Reduced-Motion Micro-Interactions: Keep the Meaning, Drop the Movement
How to design micro-interactions for prefers-reduced-motion: instant state changes, cross-fades, clear feedback and testing that does not remove meaning.
Core Takeaway
Reduced motion does not mean no feedback. It means replacing large, vestibular-triggering movement with an equivalent cue: an instant state change, a short cross-fade, a colour or text update. Respect prefers-reduced-motion in the component, keep the same information, and test that every action still has a visible result.
What reduced motion is for
Some people experience dizziness, nausea or discomfort from large or fast movement. WCAG 2.3.3, Animation from Interactions, asks that motion triggered by interaction can be disabled unless it is essential. A reduced-motion preference is a request for less movement, not a request for a broken interface. The interaction still needs to confirm what happened.
Replace, do not delete
For each animated interaction, ask what information the motion carries. A toggle uses movement to show the new position; in reduced motion, the thumb can jump to the new position and the track colour can change. A sheet uses movement to show where it came from; in reduced motion, it can cross-fade in place. A success burst can become a static check and a text confirmation.
Patterns that work
These replacements keep feedback without large movement.
- Instant position change with a colour or icon update
- Short opacity cross-fade instead of slide or scale
- Text label that names the new state
- Progress indicator that updates without continuous motion
- Focus ring and pressed state that remain visible
Implementation details
Use the prefers-reduced-motion media query in CSS and the matching API in JavaScript. Do not assume a global CSS reset reaches every animation: Svelte transitions, for example, are driven by the Web Animations API and need explicit handling. If you use a runtime, check whether it exposes a reduce-motion setting or whether the component must pass a variant. Test both the initial load and changes after the preference is toggled.
Do not hide essential feedback
A reduced-motion mode that removes the loading state, the error message or the focus indicator is worse than the original. The goal is to remove non-essential movement, not to remove information. If an animation is the only sign that something happened, replace it with a static cue rather than nothing.
Testing
Turn the preference on at the OS level and use the app through the main flows. Check toggles, sheets, menus, form validation, loading and success. Use a screen reader and keyboard as well. Then turn the preference off and confirm the full motion still works. A component that only handles one mode is half-tested.
Key Principles to Remember
- Reduced motion means less movement, not less feedback
- Replace large motion with instant changes, cross-fades, colour or text
- Handle the preference in the component, not only in a global CSS reset
- Never remove loading, error or focus information
- Test with the preference on and off, plus keyboard and screen reader
Frequently Asked Questions
Sources
- Understanding SC 2.3.3: Animation from Interactions — W3C WAI
- Technique C39: Using prefers-reduced-motion — W3C WAI
- prefers-reduced-motion — MDN Web Docs