{"course":{"slug":"motion-and-audio","title":"Motion, Sound and Music","url":"https://addaly.com/learn/motion-and-audio","level":"intermediate","track":"create"},"lesson":{"slug":"prefers-reduced-motion","title":"Motion that makes people ill","url":"https://addaly.com/learn/motion-and-audio/prefers-reduced-motion","position":17,"of":72,"minutes":10,"answer":"Large-area, parallax and zoom motion cause a visual-vestibular conflict that produces real nausea in a large minority of adults, so the media query should substitute a cross-fade rather than switch animation off.","keyIdea":"Large-area, parallax and zoom motion cause a visual-vestibular conflict that produces real nausea in a large minority of adults, so the media query should substitute a cross-fade rather than switch animation off, and the effects most likely to trigger it should not be in the default experience at all."},"body":{"format":"markdown","text":"## Motion makes some people ill, and the mechanism is specific\n\nThis 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.\n\nYour 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.\n\nThe 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.\n\n## Which motion triggers it\n\nThe trigger is not \"animation\". It is a narrow set of properties:\n\n- **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.\n- **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.\n- **Scale over distance.** Something rushing toward the viewer, or the whole interface zooming in and out on navigation.\n- **Spinning and rotation**, especially sustained.\n- **Continuous, unstoppable motion**: an autoplaying background video, an infinite carousel.\n\nSmall, short, local motion is generally safe. That is the useful news: honouring reduced motion does not mean shipping a static product.\n\n## The switch exists and you can read it\n\nEvery major operating system exposes a reduce-motion setting, and the browser exposes it as a media query.\n\n```css\n.card {\n  transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .card {\n    transition: opacity 150ms linear;\n    transform: none;\n  }\n}\n```\n\nOn 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.\n\n## Reduced is not removed\n\nThe 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.\n\nThe substitutions that work:\n\n- **Slide → cross-fade.** An opacity change carries no motion signal but still marks a state change.\n- **Large travel → small travel.** Keep the motion, cut the distance to a few pixels.\n- **Parallax → nothing.** This one has no safe reduced form; remove it.\n- **Autoplay → a play button.** Anything running without being asked for should stop.\n- **Long → short.** Halving durations reduces exposure without removing the cue.\n\nNever 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.\n\n## What the standards actually require\n\nTwo WCAG success criteria are relevant and are often confused.\n\n- **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.\n- **2.3.3 Animation from Interactions (Level AAA)**: motion animation triggered by interaction can be disabled, unless it is essential.\n\nThe 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.\n\n## Testing it\n\nTurn 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.\n\nBrowsers 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.\n\n## The limitation\n\nThe 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.\n\nThe 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."},"check":{"question":"A site honours prefers-reduced-motion by applying a global rule that disables all animations and transitions. Why is this a worse implementation than substituting cross-fades?","options":[{"text":"Because the operating-system setting is intended only to reduce the speed of animations, and disabling them entirely goes beyond what the user asked the system to do.","correct":false,"tempting":"Reads the setting as a speed control; it is a request for less motion, and removing a trigger entirely is legitimate for parallax."},{"text":"Because a global disable rule cannot reach animations defined inside a shadow DOM or a third-party iframe, so the effects most likely to cause harm are precisely the ones it misses.","correct":false,"tempting":"Points at a real coverage gap, but the central problem is what the rule breaks rather than what it fails to reach."},{"text":"Because it removes the feedback that tells a user their action registered, and it breaks loading indicators and any code waiting on animation events.","correct":true},{"text":"Because vestibular symptoms are caused by the abruptness of a change rather than by its extent, so an instant state change is a stronger trigger than the slide it replaced and the rule makes the symptom worse.","correct":false,"tempting":"Inverts the mechanism: the trigger is large-field movement signalling self-motion, not abruptness."}]},"prev":{"slug":"waiting-states","title":"Spinners, skeletons and honest waiting","url":"https://addaly.com/learn/motion-and-audio/waiting-states"},"next":{"slug":"compositor-only-properties","title":"Why transform is cheap and width is not","url":"https://addaly.com/learn/motion-and-audio/compositor-only-properties"},"authorship":"Founder and series editor: Dr Mustafa Mun. Written by AI models to a written standard. Exam keys checked blind by a second model: 3,665 of 3,666 agreed. Academic review invited.","review":{"status":"Draft, open for academic review"},"cite":"Addaly (2026) 'Motion that makes people ill', in Motion, Sound and Music. Edited by M. Mun. Addaly. Available at: https://addaly.com/learn/motion-and-audio/prefers-reduced-motion (Accessed: 13 October 2026).","licence":{"name":"CC BY-NC-SA 4.0","url":"https://creativecommons.org/licenses/by-nc-sa/4.0/"},"reader":{"schema":1,"title":"Motion that makes people ill","courseTitle":"Motion, Sound and Music","module":{"index":2,"slug":"motion-that-carries-meaning","title":"Motion that carries meaning"},"answer":null,"keyIdea":"Large-area, parallax and zoom motion cause a visual-vestibular conflict that produces real nausea in a large minority of adults, so the media query should substitute a cross-fade rather than switch animation off, and the effects most likely to trigger it should not be in the default experience at all.","hero":{"kind":"plate","image":null,"alt":null,"caption":null},"blocks":[{"t":"h2","id":"motion-makes-some-people-ill-and-the-mechanism-is-specific","runs":[{"text":"Motion makes some people ill, and the mechanism is specific"}]},{"t":"p","runs":[{"text":"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."}]},{"t":"p","runs":[{"text":"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."}]},{"t":"p","runs":[{"text":"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."}]},{"t":"h2","id":"which-motion-triggers-it","runs":[{"text":"Which motion triggers it"}]},{"t":"p","runs":[{"text":"The trigger is not “animation”. It is a narrow set of properties:"}]},{"t":"ul","items":[[{"text":"Large area.","b":true},{"text":" 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."}],[{"text":"Parallax.","b":true},{"text":" 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."}],[{"text":"Scale over distance.","b":true},{"text":" Something rushing toward the viewer, or the whole interface zooming in and out on navigation."}],[{"text":"Spinning and rotation","b":true},{"text":", especially sustained."}],[{"text":"Continuous, unstoppable motion","b":true},{"text":": an autoplaying background video, an infinite carousel."}]]},{"t":"p","runs":[{"text":"Small, short, local motion is generally safe. That is the useful news: honouring reduced motion does not mean shipping a static product."}]},{"t":"h2","id":"the-switch-exists-and-you-can-read-it","runs":[{"text":"The switch exists and you can read it"}]},{"t":"p","runs":[{"text":"Every major operating system exposes a reduce-motion setting, and the browser exposes it as a media query."}]},{"t":"code","lang":"css","label":"CSS","text":".card {\n  transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .card {\n    transition: opacity 150ms linear;\n    transform: none;\n  }\n}"},{"t":"p","runs":[{"text":"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: "},{"text":"window.matchMedia('(prefers-reduced-motion: reduce)').matches","code":true},{"text":", and listen for changes rather than reading it once at load."}]},{"t":"h2","id":"reduced-is-not-removed","runs":[{"text":"Reduced is not removed"}]},{"t":"p","runs":[{"text":"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."}]},{"t":"p","runs":[{"text":"The substitutions that work:"}]},{"t":"ul","items":[[{"text":"Slide → cross-fade.","b":true},{"text":" An opacity change carries no motion signal but still marks a state change."}],[{"text":"Large travel → small travel.","b":true},{"text":" Keep the motion, cut the distance to a few pixels."}],[{"text":"Parallax → nothing.","b":true},{"text":" This one has no safe reduced form; remove it."}],[{"text":"Autoplay → a play button.","b":true},{"text":" Anything running without being asked for should stop."}],[{"text":"Long → short.","b":true},{"text":" Halving durations reduces exposure without removing the cue."}]]},{"t":"p","runs":[{"text":"Never set "},{"text":"* { animation: none !important; }","code":true},{"text":". It breaks CSS-driven functionality that depends on animation events firing, and it removes loading indicators, which is a usability regression for everyone."}]},{"t":"h2","id":"what-the-standards-actually-require","runs":[{"text":"What the standards actually require"}]},{"t":"p","runs":[{"text":"Two WCAG success criteria are relevant and are often confused."}]},{"t":"ul","items":[[{"text":"2.2.2 Pause, Stop, Hide (Level A)","b":true},{"text":": 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."}],[{"text":"2.3.3 Animation from Interactions (Level AAA)","b":true},{"text":": motion animation triggered by interaction can be disabled, unless it is essential."}]]},{"t":"p","runs":[{"text":"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."}]},{"t":"h2","id":"testing-it","runs":[{"text":"Testing it"}]},{"t":"p","runs":[{"text":"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."}]},{"t":"p","runs":[{"text":"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."}]},{"t":"h2","id":"the-limitation","runs":[{"text":"The limitation"}],"role":"limit"},{"t":"p","runs":[{"text":"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."}]},{"t":"p","runs":[{"text":"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."}]}],"check":{"question":[{"text":"A site honours prefers-reduced-motion by applying a global rule that disables all animations and transitions. Why is this a worse implementation than substituting cross-fades?"}],"options":[{"text":[{"text":"Because the operating-system setting is intended only to reduce the speed of animations, and disabling them entirely goes beyond what the user asked the system to do."}],"correct":false,"tempting":[{"text":"Reads the setting as a speed control; it is a request for less motion, and removing a trigger entirely is legitimate for parallax."}]},{"text":[{"text":"Because a global disable rule cannot reach animations defined inside a shadow DOM or a third-party iframe, so the effects most likely to cause harm are precisely the ones it misses."}],"correct":false,"tempting":[{"text":"Points at a real coverage gap, but the central problem is what the rule breaks rather than what it fails to reach."}]},{"text":[{"text":"Because it removes the feedback that tells a user their action registered, and it breaks loading indicators and any code waiting on animation events."}],"correct":true,"tempting":null},{"text":[{"text":"Because vestibular symptoms are caused by the abruptness of a change rather than by its extent, so an instant state change is a stronger trigger than the slide it replaced and the rule makes the symptom worse."}],"correct":false,"tempting":[{"text":"Inverts the mechanism: the trigger is large-field movement signalling self-motion, not abruptness."}]}],"order":[1,0,2,3],"why":null},"prev":{"slug":"waiting-states","title":"Spinners, skeletons and honest waiting","minutes":9},"next":{"slug":"compositor-only-properties","title":"Why transform is cheap and width is not","minutes":10}}}