Why motion can harm
Large animations like parallax scrolling, sliding panels, and spinning transitions can cause dizziness, nausea, or disorientation for people with vestibular sensitivities. Operating systems offer a reduce motion setting so users can ask for calmer interfaces. Honoring that request is a basic courtesy and an accessibility requirement.
- The preference is a system signal that the browser exposes to your code.
- It does not mean remove all motion but cut the intense, sweeping kind.
- Defaults matter so the calm path should be easy to provide.
Responding to the preference
A media query lets your styles react when reduce motion is requested.
- Disable or shorten large transforms and parallax effects.
- Replace a sliding entrance with a gentle fade or an instant change.
- Keep small, functional cues like a brief focus transition.
Practical habits
- Treat reduced motion as a first class state, not an afterthought.
- Test by toggling the system setting and watching your animations.
- Avoid autoplaying motion that the user never asked for.
The goal is not a frozen page but an interface that respects a users explicit request for less movement.
Key idea
Honor the systems reduce motion preference by replacing large sweeping animations with gentle or instant changes while keeping small functional cues.