Accessible Animation (Reduced Motion, Tiered)

Honor prefers-reduced-motion: reduce as a graceful degradation, not a kill switch. The OS-level setting (macOS: Settings > Accessibility > Display > Reduce motion; Windows: Settings > Accessibility > Visual effects > Animation effects; iOS/Android equivalents) signals that vestibular-triggering motion causes nausea, dizziness, or migraines. The correct response is to remove the dangerous motion while keeping orientation cues.

When to use

Use when adding or auditing animation in a web UI, when a user reports motion sickness or WCAG findings, or when integrating animation libraries (GSAP, Framer Motion, Lenis smooth scroll, Anime.js, CSS keyframes) into an accessible product.

The core principle: tier motion, do not nuke it

Removing all animation is a common over-correction. An instant state change with no transition can be more disorienting (elements teleport) and removes useful affordances (focus rings, loading spinners that communicate progress). Sort every animation into three tiers:

• Tier 1 — Remove entirely (vestibular triggers). Parallax; large-area slides/translates across the viewport; scale/zoom of large elements; 3D rotation and spin; continuous auto-playing carousels and marquees; smooth-scroll hijacking (Lenis/Locomotive); scroll-jacked pinned scenes; motion-path animation; anything that moves a large portion of the screen or implies depth/self-motion.
• Tier 2 — Soften / shorten. Replace movement with a short opacity fade (≤200ms). Reduce distance and duration. Keep the fact of a transition (so elements don't teleport) but strip the displacement. Replace a 600ms slide-in-from-left with a 150ms cross-fade.
• Tier 3 — Always keep. Opacity fades, color/background transitions, focus-ring transitions, loading indicators, and motion that is essential to meaning (WCAG allows essential animation). These rarely trigger vestibular responses because they imply no self-motion.

CSS layer: media-query gating

Write motion as the default, then override under the reduce query. Prefer a global safety net plus targeted overrides.