Motion Sensitivity and Animated Web Content: What to Know

For most people, animation on a website is decoration. For people with vestibular disorders, migraines, or motion sensitivity, parallax scrolling, zooming transitions, and autoplaying motion can cause dizziness, nausea, or headaches. Flashing content can trigger seizures in people with photosensitive epilepsy.

What causes problems

• Parallax effects where layers move at different speeds.
• Large zoom, spin, or slide transitions between pages or sections.
• Autoplaying video backgrounds and carousels.
• Scroll-triggered animations that move content as you scroll.
• Flashing or strobing content.

What WCAG requires

• Pause, stop, hide (level A): anything that moves, blinks, or scrolls automatically for more than 5 seconds needs a way to pause or hide it.
• Three flashes (level A): nothing should flash more than three times in any one second, unless it's below the flash thresholds.
• Animation from interactions (level AAA): motion triggered by interaction should be possible to turn off, unless it's essential.

How sites should handle it

Browsers pass on a user's system preference through the CSS media query prefers-reduced-motion. Sites should use it to replace big movement with simple fades or no animation:

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

A blanket rule like this is a start; better sites tune each animation, keeping helpful feedback and removing the rest.

What you can do as a user

• Mac and iPhone: turn on Reduce Motion in Accessibility settings.
• Windows: turn off "Animation effects" in Accessibility, Visual effects.
• Android: turn on "Remove animations" in Accessibility settings.
• Use reader mode for articles, and pause autoplay where a site allows it.

For calming busy sites more broadly, see sensory overload from busy websites.