How to Support prefers-reduced-motion Properly
A complete guide to supporting prefers-reduced-motion: vestibular safety, CSS media queries, JavaScript hooks, and designing meaningful reduced-motion alternatives.
Core Takeaway
Supporting prefers-reduced-motion properly does not mean stripping all feedback and leaving an interface feeling broken. It means removing large, sudden, or disorienting movement (such as parallax, 3D rotations, and sweeping translations) and replacing them with instant changes, subtle cross-fades, or color transitions that communicate state clearly without triggering vestibular distress.
Understanding vestibular disorders and motion sickness
Users with vestibular disorders experience dizziness, nausea, and vertigo when screen movement does not match their physical balance. Sweeping screen transitions, auto-playing video banners, parallax scroll effects, and bouncing icons can induce physical pain within seconds.
The blanket reset mistake
A common but harmful pattern is pasting * { animation: none !important; transition: none !important; } into CSS. This breaks multi-step state transitions, causes tooltips to disappear before reading, and disables critical loading feedback. Motion should be adapted, not destroyed.
- Eliminate large scale, translation, and parallax movement
- Retain short opacity cross-fades (100ms) to prevent visual jarring
- Replace animated spinners with clear text status labels or progress bars
- Expose a toggle in product settings in addition to honoring system preferences
Implementing with CSS and design tokens
Structure motion tokens so that duration-move tokens resolve to 0ms under @media (prefers-reduced-motion: reduce), while duration-fade tokens resolve to a gentle 80-100ms fade. This ensures consistency across the entire component system.
Handling JavaScript and physics runtimes
In JavaScript frameworks, listen to window.matchMedia('(prefers-reduced-motion: reduce)') using modern hooks. Pass reducedMotion: true into your animation runtimes so spring models jump directly to their target values.
Key Principles to Remember
- Never strip functional state feedback; replace motion with fades or instant state shifts
- Eliminate translation distances and parallax while keeping opacity transitions gentle
- Structure design tokens to handle reduced-motion overrides centrally
- Test with both macOS / Windows system toggles and browser emulation tools