interanimate

Search documentation

Search pages and sections of the interanimate spec

Accessibility

Motion preferences, reduced-motion substitution, and how interanimate maps to WCAG and platform guidance.

Motion is optional; meaning is not (Principle 11). This page defines how interanimate honors motion preferences, what "reduced" means in practice, and how the framework maps to WCAG.

Who this is for#

For people with vestibular disorders — conditions of the inner ear and balance system — on-screen motion can trigger dizziness, nausea, headaches, and in severe cases reactions that need bed rest to recover from. WCAG's guidance on motion is written with them in mind. Motion also affects people with attention-related conditions, people prone to motion sickness, and anyone who simply finds an interface tiring. Apple notes that motion sensitivity isn't only a VR problem; motion on ordinary 2D screens can cause reactions too.

Motion preference#

interanimate recognizes two motion preferences:

  • Full — the default. Motion resolves per intent, tokens, and environment.
  • Reduced — the person has asked for less motion. Each intent resolves to its defined reduced behavior.

Sources of preference#

  1. Operating system setting, exposed to the web through the reduced-motion media feature. Honored automatically; the person has already told every app what they need.
  2. In-app setting, which an application may offer for finer control or for people who haven't found the OS setting. WCAG lists a site-provided control as one acceptable way to meet its motion criterion.

When both exist, the more reduced choice wins. An in-app "full motion" setting does not override an OS request for reduced motion unless the person explicitly chose it inside the app.

Preference rules (normative)#

  1. Preference is resolved last and can only reduce (see Resolution).
  2. No author, intent, or token can override a reduced-motion preference.
  3. A preference change takes effect immediately, including on motions already in flight.

Reduce means substitute, not remove#

Removing all motion often makes interfaces harder to use: state changes become invisible and content appears to teleport. interanimate's approach is substitution. Apple's guidance describes it well — replace problematic motion with a dissolve, a highlight fade, or a color shift.

What gets substituted#

Apple identifies the motion most likely to cause problems: scaling, spinning, peripheral motion, multi-axis and multi-speed movement, and vortex effects. Parallax scrolling is a common web example called out by WCAG. interanimate's substitution table:

Under full motionUnder reduced motion
Spatial entrance/exit (slide, scale)Opacity fade (swift/quick)
Navigation slides, full-screen movementCrossfade
Shared-element morphCrossfade in place
Layout relocationInstant change + brief highlight on what moved
Release with momentum / bounceShort fade or direct placement
Press scaleHighlight only
Spinning loadersStatic or slow-pulsing indicator
Parallax, scroll-linked decorationNone
Ambient or looping decorationNone
Emphasis shakeColor change
StaggerSimultaneous

What stays#

  • Direct manipulation. When a person drags something, it still tracks their finger 1:1. That motion is controlled by the person and essential to the interaction. WCAG treats user-controlled scrolling the same way.
  • Projection outcomes. A flick still dismisses a sheet — that's the person's intent. Only the throw is replaced.
  • Orientation. Choreography's meaning (origins, ordering) is preserved through where and when effects occur.
  • Essential motion. Motion that is the information — a person previewing their own animation in an authoring tool, for instance — is exempt, as WCAG allows.

Never the only channel#

Information conveyed by motion must also be conveyed another way: text, an icon, a color change paired with a label, or a status announcement for assistive technology. Apple's guidelines recommend supplementing visual feedback with other channels, such as haptics and audio where the platform supports them. In interanimate:

  1. Every emphasize has a non-motion equivalent (color, text).
  2. Every indicate has an accessible status.
  3. Every gesture has a non-gesture equivalent (see Interaction model).
  4. Focus indication never depends on motion to be noticed.

WCAG mapping (informative)#

CriterionLevelWhat it requiresHow interanimate addresses it
2.3.3 Animation from InteractionsAAAMotion triggered by interaction can be disabled unless essentialReduced behavior is required on every intent; preference honored automatically; in-app override supported
2.2.2 Pause, Stop, HideAAuto-starting motion lasting over five seconds, shown alongside other content, can be paused, stopped, or hiddenAmbient and looping motion is disallowed by default; indicate loops are expected to calm or stop; auto-advancing content requires a control
2.3.1 Three Flashes or Below ThresholdANothing flashes more than three times per secondcelebrate and emphasize may not flash above this rate in any mode
2.5.7 Dragging MovementsAADrag functionality has a single-pointer alternativeRule 11 of the interaction model: every gesture has a non-gesture equivalent

interanimate aims for AAA on motion by default. That's a deliberate position: SC 2.3.3 is often skipped because it's AAA, but it's also one of the cheapest criteria to satisfy when the framework does it for you.

Testing (informative)#

  • Every intent ships with both its full and reduced behavior documented and demonstrable side-by-side.
  • Automated checks should verify that no motion runs under the reduced preference unless it's direct manipulation or marked essential.
  • Manual review uses the real OS setting on each major platform, not just a simulated media query.