<aside> 💡 ~30% of users enable prefers-reduced-motion at the OS level (macOS, iOS, Windows, Android all support it). This includes people with vestibular disorders, motion sickness, attention difficulties, and those who simply find animation distracting.

</aside>

Understanding reduced motion

prefers-reduced-motion: reduce does NOT mean "no motion" — it means less motion. The user wants to reduce large movements, parallax, auto-playing animations, and unexpected transitions. Small, subtle animations (a 100ms opacity fade) are generally fine.

What to reduce vs what to remove

💻 Developer checklist

CSS approach

• Default: define animations in your normal CSS
• Override: use @media (prefers-reduced-motion: reduce) { } to remove or replace animations
• Pattern: set transition-duration and animation-duration to 0.01ms (not 0 — some browsers skip the transition entirely and miss the end-state)
• Alternative pattern (progressive): define NO animation by default; add animations inside @media (prefers-reduced-motion: no-preference) { }. This makes reduced motion the default — safer for forgotten cases

JavaScript approach

• Check: window.matchMedia('(prefers-reduced-motion: reduce)').matches
• Listen for changes: matchMedia.addEventListener('change', callback) — users can toggle mid-session
• Use this to disable: requestAnimationFrame loops, GSAP/Framer Motion timelines, scroll-triggered animations, auto-playing <video>

Specific patterns

• Auto-playing video: check prefers-reduced-motion before calling .play(); if reduced, show poster frame with a Play button
• Route transitions (Next.js/Nuxt): wrap transition in the media query check; use instant page swap when reduced