Animation from Interactions
Motion animation triggered by interaction can be disabled by the user, unless the animation is essential. Honour the `prefers-reduced-motion` media query.
What it asks
Motion animations triggered by user interaction — parallax scroll, page transitions, hover-launched zooms, scroll-driven reveal effects — must be disabled when the user requests reduced motion, unless the animation is essential to the function or information being conveyed.
The standard mechanism is the CSS prefers-reduced-motion: reduce media query, which surfaces the OS-level reduce-motion setting that macOS, Windows, iOS, and Android all expose.
How to meet it
- Wrap any meaningful motion (transforms, large translations, parallax, page transitions, scroll-linked animations) in
@media (prefers-reduced-motion: no-preference). - For JavaScript-driven animations (GSAP, Framer Motion, Lottie), check
window.matchMedia('(prefers-reduced-motion: reduce)').matchesand either skip the animation or replace it with an instant state change. - Allow critical feedback animations (loading spinners, drag previews) to continue at a subtler amplitude when reduced motion is on — they convey function, not flourish.
- Test with macOS System Settings → Accessibility → Display → Reduce motion enabled, and the equivalents on Windows, iOS, and Android.
Common failures
- Marketing pages with parallax scrolling that ignore the OS reduce-motion preference.
- Page-transition libraries (Barba.js, Astro view transitions in older configurations) that animate large translations regardless of user preference.
- Card-hover lift effects with long translateY transitions that cause discomfort to users with vestibular conditions.
- Scroll-triggered animations on long-form pages that fire dozens of motion effects as the user scrolls — particularly disorienting at scale.
- Lottie animations in onboarding flows that play full-screen motion without checking the preference.
axe and Lighthouse don’t reliably flag reduce-motion failures, but Lighthouse’s accessibility audit does include a prefers-reduced-motion check in newer versions, and many design-system linters now enforce it.
Why it matters
Vestibular disorders — Ménière’s disease, vestibular migraine, post-concussion syndrome, persistent postural-perceptual dizziness — can be aggravated by large or unexpected motion on screen. The result is real, physical nausea or vertigo, not just discomfort. Honouring prefers-reduced-motion is one of the lowest-cost, highest-impact accessibility improvements available, and the OS-level setting means the user has already told you what they need.