Operating systems carry a “reduce motion” setting. People turn it on because of symptoms, not preference: large moving areas and sliding, drifting effects cause dizziness, nausea or migraine for some.
There are practical reasons too. Remote desktop sessions, low-power modes and centrally managed workplace machines often have it enabled. In other words, more people see your screens in that state than you would guess.
The dangerous mistake — the content leaves with the motion
The failure here usually appears in code that was trying to be considerate, because entrance animations tend to be built the same way: start the element transparent, fade it in as it scrolls into view, and wrap the whole animation in a “only when motion is not reduced” condition.
With reduced motion on, the animation never runs. But the transparent starting state stays exactly where it was. The result is not a page without animation; it is a page without content.
The rule is a single line: the default state must be the final state. Animation is decoration on top, and what remains when you strip it away has to be a finished screen. Our own scroll effects are built this way — unsupporting browsers and reduced-motion users see the “already completed” view.
Reduce does not mean remove
The setting is called reduce motion for a reason. You do not have to strip everything, and some things should stay — the signals that something opened, closed or moved are more confusing by their absence.
Auto-advancing carousels are worth revisiting regardless of the setting. Content changing while someone is reading interrupts everybody, and at the very least there should be a way to pause it.
Decide it in the mockup
The designer’s part is simple. Finish the static state first and annotate the motion on top of it. “This card rises into place” is only safe as a note beside a completed static frame — that is what keeps the build from mistaking the starting state for the finished one.
How scroll effects are handled in code is covered further in the Themes & plugins archive, and the order in which we verify this on real work is set out on our process page.
Next part
Next: heading structure. When headings chosen by size disagree with headings chosen as structure, both the reading order and the search index get blurry.