# Research & references

> The research, guidelines, and practitioner work this specification draws on — and where interanimate agrees or departs.

interanimate's principles are synthesized from four kinds of source: platform design systems, human–computer interaction research, accessibility standards, and the craft knowledge of practicing design engineers. This page lists them, summarizes what each contributes, and notes where the framework departs.

## Platform design systems [#platform-design-systems]

### Apple — *Designing Fluid Interfaces* (WWDC 2018) [#apple--designing-fluid-interfaces-wwdc-2018]
The single most influential source for the **Continue** pillar. It frames interface motion as a conversation with an object; makes interruptibility the central requirement; and introduces the practical techniques interanimate adopts directly — 1:1 tracking, hysteresis, momentum projection, rubber-banding, and velocity hand-off from gesture to animation.
[https://developer.apple.com/videos/play/wwdc2018/803/](https://developer.apple.com/videos/play/wwdc2018/803/)

### Apple — *Animate with Springs* (WWDC 2023) [#apple--animate-with-springs-wwdc-2023]
Source of the springs-first stance and the two-parameter spring model (perceptual duration and bounce). Establishes that springs are the only common animation type that maintains continuity from both rest and existing velocity; that zero-bounce springs are the versatile default; and gives the calibration for bounce that interanimate's character scale uses. Also distinguishes perceptual completion from settling.
[https://developer.apple.com/videos/play/wwdc2023/10158/](https://developer.apple.com/videos/play/wwdc2023/10158/)

### Apple — *Human Interface Guidelines: Motion* [#apple--human-interface-guidelines-motion]
Purposeful motion; avoiding motion on frequent interactions; brevity and precision in feedback; never making people wait for animation; supplementing motion with other feedback channels; and modality-dependent response (more emphasis for direct touch than trackpad).
[https://developer.apple.com/design/human-interface-guidelines/motion](https://developer.apple.com/design/human-interface-guidelines/motion)

### Apple — *Reduced Motion evaluation criteria* [#apple--reduced-motion-evaluation-criteria]
Identifies the motion types most likely to cause problems — scaling, spinning, peripheral, multi-axis, multi-speed, vortex — and recommends substitutes such as dissolves, highlight fades, and color shifts. Basis for interanimate's substitution table.
[https://developer.apple.com/help/app-store-connect/manage-app-accessibility/reduced-motion-evaluation-criteria](https://developer.apple.com/help/app-store-connect/manage-app-accessibility/reduced-motion-evaluation-criteria)

### Google — Material Design 3 and M3 Expressive motion [#google--material-design-3-and-m3-expressive-motion]
Material's token hierarchy and its separate standard, entrance, and exit easing informed the tween roles. M3 Expressive's split between **spatial** springs (position, size, shape) and **effects** (opacity, color) is the direct precedent for interanimate's channel model.
[https://m3.material.io/styles/motion/overview](https://m3.material.io/styles/motion/overview)

### IBM — Carbon Design System: Motion [#ibm--carbon-design-system-motion]
The **productive / expressive** distinction — efficient, subtle motion for task-focused moments; vibrant motion reserved for occasional, significant ones — underlies interanimate's frequency tiers and restraint principle. Carbon's non-linear, distance-aware duration scale informs the sub-linear tempo rule.
[https://carbondesignsystem.com/elements/motion/overview/](https://carbondesignsystem.com/elements/motion/overview/)

## Human–computer interaction research [#humancomputer-interaction-research]

### Miller (1968); Nielsen, *Response Times: The 3 Important Limits* [#miller-1968-nielsen-response-times-the-3-important-limits]
The 0.1 s / 1 s / 10 s limits: instantaneous response and the feeling of direct manipulation; uninterrupted flow of thought; and sustained attention. Basis for the 100 ms response budget.
[https://www.nngroup.com/articles/response-times-3-important-limits/](https://www.nngroup.com/articles/response-times-3-important-limits/)

### Google — *Interaction to Next Paint* (web.dev) [#google--interaction-to-next-paint-webdev]
The web's field metric for responsiveness: 200 ms or less from input to next paint is good; over 500 ms is poor. interanimate targets the stricter perceptual threshold for its own acknowledgment so it never consumes an application's INP budget.
[https://web.dev/articles/inp](https://web.dev/articles/inp)

## Accessibility standards [#accessibility-standards]

### W3C — WCAG 2.2 [#w3c--wcag-22]
- **SC 2.3.3 Animation from Interactions** (AAA) — non-essential motion triggered by interaction can be disabled. Explains vestibular impacts and lists the reduced-motion media query and site-level controls as techniques.
- **SC 2.2.2 Pause, Stop, Hide** (A) — control over long-running automatic motion.
- **SC 2.3.1 Three Flashes or Below Threshold** (A).
- **SC 2.5.7 Dragging Movements** (AA) — single-pointer alternatives for drag.
[https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions)

## Practitioners [#practitioners]

### Emil Kowalski — essays, *Animations on the Web*, and open source skills [#emil-kowalski--essays-animations-on-the-web-and-open-source-skills]
The strongest influence on the **Respond** and **Respect** pillars. *You Don't Need Animations* and *Great Animations* argue for restraint, speed, purpose, interruptibility, performance, and accessibility. His published animation decision framework (in the `emilkowalski/skills` repository) contributes the frequency gate — no motion for actions seen 100+ times a day or initiated by keyboard — the named purposes, duration budgets by element type, origin-aware popovers, never scaling from zero, subtle press scale, and asymmetric press/release timing. His `apple-design` skill is a useful web translation of Apple's fluid-interface principles.
[https://emilkowal.ski/ui/great-animations](https://emilkowal.ski/ui/great-animations) · [https://github.com/emilkowalski/skills](https://github.com/emilkowalski/skills)

### Rauno Freiberg — *Invisible Details of Interaction Design* [#rauno-freiberg--invisible-details-of-interaction-design]
Deconstructs why great interactions feel right. interanimate draws on his emphasis on robustness (can you break it by scrolling fast or on low battery?) and on follow-through and overlapping action as the classical animation principle most useful for UI.
[https://rauno.me/craft/interaction-design](https://rauno.me/craft/interaction-design)

### Issara Willenskomer — *The UX in Motion Manifesto* [#issara-willenskomer--the-ux-in-motion-manifesto]
Distinguishes motion design in service of usability from UI animation as decoration, and articulates twelve principles (easing, offset and delay, parenting, transformation, value change, masking, overlay, cloning, obscuration, parallax, dimensionality, dolly and zoom). Basis for the relationships section of choreography.
[https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc](https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc)

### Thomas & Johnston — *The Illusion of Life* (Disney's 12 principles) [#thomas--johnston--the-illusion-of-life-disneys-12-principles]
Timing, easing (slow in and slow out), follow-through and overlapping action, anticipation, and arcs remain useful. interanimate agrees with Willenskomer that most of the twelve address representing physical reality in film, not usability, and adopts only those that serve the principles above.

## Where interanimate departs [#where-interanimate-departs]

| Topic | Source position | interanimate position | Why |
|---|---|---|---|
| Ease-in curves | Material and Carbon define accelerating exit curves | Disallowed except for elements leaving the viewport entirely | Sides with Kowalski: a slow start delays visible response |
| Removing motion | Common practice: disable animations under reduced motion | Substitute, don't remove | Removal hides state changes; substitution preserves meaning |
| WCAG 2.3.3 | AAA, often treated as optional | Met by default | Cheap when the framework does it; high impact |
| Bounce | Often a stylistic choice | Earned by momentum or rarity, capped | Overshoot without momentum reads as decoration |
| Duration vs. springs | Many systems are duration-first | Springs-first for spatial; durations for effects | Only springs preserve continuity under interruption |

## Platform landscape *(informative)* [#platform-landscape-informative]

- **View Transitions.** Same-document view transitions reached Baseline Newly Available in October 2025; cross-document transitions are following. Relevant to `navigate` and `morph`.
- **Scroll-driven animations.** Now shipping in Chrome, Firefox, and Safari. Relevant to scroll-linked values.
- **Existing libraries.** Motion (formerly Framer Motion) is MIT-licensed, declarative, and spring-capable; GSAP became free for all uses in 2025 after Webflow's acquisition and excels at imperative timelines. interanimate's distinction is not the engine but the **intent layer and enforced principles** on top of one.