The reduced motion check: animation that turns down when people ask
Operating systems let people ask for less motion: Reduce Motion on Apple devices, Remove animations on Android, a switch for animation effects on Windows. Websites can read that preference through the prefers-reduced-motion media query. Anticode's design gate runs a reduced motion check before publishing: if a page animates anything and never mentions the query, it isn't published.
Why motion needs an off switch
For most visitors a section that slides in as they scroll is a small pleasure. For people with vestibular disorders, migraine or some kinds of motion sensitivity, large movement on screen, parallax especially, can bring on dizziness or nausea. Others find constant movement distracting, which makes reading harder. These visitors have already told their device what they need. A site that ignores the setting overrides that choice.
Not all motion is equal. A button that darkens over a tenth of a second is barely movement at all. The effects that cause trouble are large and tied to scrolling: whole sections sliding up, backgrounds moving at a different speed from the text, elements zooming as they enter. Those are exactly the effects generated landing pages like to add. The fix isn't to ban animation. It's to treat motion as a layer that steps aside when asked. The design article on prefers-reduced-motion covers the patterns in detail.
How the gate decides
The check has two steps, both run on the exact HTML that would be published:
- Does the page animate? It looks through the page's styles, including inline
styleattributes, for@keyframes, ananimationoranimation-namedeclaration, or atransitiondeclaration. - If it does, does it answer the preference? It then searches the document for
prefers-reduced-motion. If the page animates and the query appears nowhere, the check fails.
A page with no animation or transitions passes without needing the query. A failing page is refused with a message naming “respects reduced motion” and the advice to turn animation down under prefers-reduced-motion. The same rule applies to model-written apps, which are repaired against the gate before they're shown.
What design-engine pages do
Pages from Anticode's design engine handle motion in two layers, so they pass from the start:
| Layer | What happens |
|---|---|
| A reduce rule for everything | Under prefers-reduced-motion: reduce, every element and its pseudo-elements have animations and transitions switched off, and smooth scrolling returns to an instant jump. |
| Scroll-linked motion goes too | Effects tied to scrolling, such as sections rising into place or the hero image's gentle drift, are animations, so the reduce rule switches them off as well. |
| And only where supported | Those scroll effects also sit behind a check that the browser supports scroll-driven animation, so older browsers simply show the page still. |
Motion you add with the layout editor's motion options, which you can reach from its keyboard inspector, goes a step further: it's written inside a prefers-reduced-motion: no-preference query, so it only exists for visitors who haven't asked for less. See the layout editor.
Writing a reduce rule yourself
If you're building elsewhere or editing an exported project, a broad rule like the engine's is a reasonable safety net: inside a prefers-reduced-motion: reduce media query, set animation: none and transition: none on all elements and scroll-behavior: auto. Better still, design motion as an addition: put entrance animations and parallax inside a no-preference query so they never reach people who opted out. Keep essential feedback, such as a colour change on a pressed button, which isn't movement and doesn't need removing.
Limits
- It checks for the query, not its effect. A page that mentions
prefers-reduced-motionanywhere passes, even if the rule inside covers only one animation. The gate catches pages that ignore the setting entirely. - Script-driven motion. Movement drawn by JavaScript, as in a canvas game, isn't detected as animation by this check. In an app, a script that reads the preference also counts as mentioning it, since the whole document is searched.
- Video and GIFs. Moving images aren't part of this check. Design-engine pages can't carry video, but an app build can.
- One of several basics. See the design gate for the other checks that run at publish.
Questions people ask
What is prefers-reduced-motion?
A CSS media query that reports whether the visitor has asked their device for less motion. Sites can use it to turn animation down or off.
Does a page without any animation need the rule?
No. The reduced motion check before publishing only fails a page that animates or uses transitions without mentioning the query.
Will my visitors with Reduce Motion on see a still page?
On design-engine pages, yes: animations and transitions are switched off, and scroll effects aren't applied at all.