Motion that makes people ill

Motion makes some people ill, and the mechanism is specific

This is not a preference about taste. A significant number of people get dizziness, nausea, headache or disorientation from certain kinds of screen motion, and it is a physiological response with a known cause.

Your sense of balance comes from combining three signals: what your eyes see, what your inner ear’s vestibular system reports about acceleration and head position, and proprioception from muscles and joints. When these disagree (your eyes report large-field movement while your inner ear reports that your head is still) the brain treats the conflict as a problem. The same conflict, in the other direction, causes seasickness.

The scale is larger than most developers assume. Analysis of US National Health and Nutrition Examination Survey data found that roughly 35 per cent of American adults aged 40 and over had some form of vestibular dysfunction. Not all of them are affected by screen motion, but this is not a rare edge case, and it overlaps with migraine, concussion recovery, and a long tail of conditions people do not disclose.

Which motion triggers it

The trigger is not “animation”. It is a narrow set of properties:

• Large area. Motion that fills a large part of the visual field. A 40px toast sliding in is fine; a full-screen background that zooms is not.
• Parallax. Layers moving at different speeds is the strongest trigger in the set, because it is exactly the depth cue your visual system uses to judge self-motion. A page that parallaxes as you scroll is telling your visual system that you are moving through a space.
• Scale over distance. Something rushing toward the viewer, or the whole interface zooming in and out on navigation.
• Spinning and rotation, especially sustained.
• Continuous, unstoppable motion: an autoplaying background video, an infinite carousel.

Small, short, local motion is generally safe. That is the useful news: honouring reduced motion does not mean shipping a static product.

The switch exists and you can read it

Every major operating system exposes a reduce-motion setting, and the browser exposes it as a media query.

.card {
  transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: opacity 150ms linear;
    transform: none;
  }
}

On iOS it is Settings → Accessibility → Motion → Reduce Motion. On Android, Settings → Accessibility → Remove animations. On macOS, System Settings → Accessibility → Display → Reduce motion. On Windows, Settings → Accessibility → Visual effects → Animation effects. In JavaScript: window.matchMedia('(prefers-reduced-motion: reduce)').matches, and listen for changes rather than reading it once at load.

Reduced is not removed

The most common mistake is treating the query as an off switch and disabling everything. That throws away the feedback function covered earlier in this module: the user who asked for less motion still needs to know their tap registered and still needs to know where the panel came from.

The substitutions that work:

• Slide → cross-fade. An opacity change carries no motion signal but still marks a state change.
• Large travel → small travel. Keep the motion, cut the distance to a few pixels.
• Parallax → nothing. This one has no safe reduced form; remove it.
• Autoplay → a play button. Anything running without being asked for should stop.
• Long → short. Halving durations reduces exposure without removing the cue.

Never set * { animation: none !important; }. It breaks CSS-driven functionality that depends on animation events firing, and it removes loading indicators, which is a usability regression for everyone.

What the standards actually require

Two WCAG success criteria are relevant and are often confused.

• 2.2.2 Pause, Stop, Hide (Level A): any motion that starts automatically, lasts more than five seconds, and is presented alongside other content, must have a mechanism to pause, stop or hide it.
• 2.3.3 Animation from Interactions (Level AAA): motion animation triggered by interaction can be disabled, unless it is essential.

The second one is AAA, which means it is not in the compliance bar most organisations target. That does not make it optional in any moral sense; it means you will not be forced to do it by a procurement checklist, and you should anyway.

Testing it

Turn the setting on in your own OS and use your product for a day. It is the only test that finds the animations you forgot about: the ones inside a third-party component, the ones in a video that autoplays, the scroll-linked header you stopped noticing months ago.

Browsers also let you emulate it: Chrome DevTools has it under Rendering → Emulate CSS media feature prefers-reduced-motion, and Firefox has the same under the Inspector’s accessibility settings. Free, and it takes one click.

The limitation

The media query only reports an operating-system setting, and most people who would benefit have never found it. Somebody who gets migraines from parallax will usually leave your site rather than search their OS settings for a toggle they do not know exists. So the query is a floor, not a solution: it catches the people who already know what to ask for.

The stronger design position is to keep the large-field, parallax and zoom effects out of the default experience entirely, and reserve the media query for the smaller adjustments. A product that is comfortable by default needs the query least.