2.3.3: Animation from Interactions

What it means

Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed. Respect prefers-reduced-motion and offer a site-level off switch at AAA.

Parallax, zoom-on-scroll, and large transitions can cause vestibular symptoms.

How to fix it

• Honor prefers-reduced-motion in CSS and JavaScript animations.
• Provide a setting to turn off non-essential motion site-wide.
• Replace parallax scrolling with static layouts when reduced motion is requested.
• Keep essential motion only where it communicates state (for example a loading indicator).

Quick examples

• Good: A site disables scroll-triggered zoom effects when reduced motion is enabled.
• Bad: Background shapes fly across the screen on every mouse move with no off switch.
• Good: Users toggle “Reduce animations” in account settings.
• Bad: A long page uses aggressive parallax that cannot be stopped.