Prefers Reduced Motion

You might say

Someone has the system's reduce motion setting on and my page animations still run. Should I handle it?

Reading the system's reduce motion setting and disabling or reducing animation accordinglyWhen visitors turn on 'Reduce Motion' in their system settings, wide movements, parallax scrolling, and continuous spinning animations on the page should pause or reduce to subtle fades. This accommodates people prone to motion sickness; verify by flipping the system setting once to see whether page animations adapt.

Know first

Animation

Prefers-reduced-motion

Toggle the system switch and watch the page respond

example.com

Card oneCard twoCard three

Loading indicator and decorative motion both running

Reduce motion: off

Carousel banner: auto-cycling
Card sliding: normal
Loading indicator: normal

Acceptance: toggle the system setting once and confirm the page animation follows; necessary state feedback stays.

What reduce motion handles

Decorative animation weakens or stops: Purely decorative motion like spinning, large slides, and parallax should stop when the setting is on.

Necessary feedback stays: Loading indicators and status-change cues remain useful; reduce distracting motion, not all motion.

Verify with the system setting: After changing it, toggle the system setting once and check whether the page animation actually follows—that is acceptance.

Quick checkChoose the best answer

An accessibility check flags that the page does not respond to the system's reduce motion setting. What should happen next?

Delete all animations, including loading indicatorsRead the system setting, disable or reduce decorative animation when enabled, and verify by toggling the settingAdd a pause button to every animation

You can say this to an AI Agent

Make the page respond to the system's reduce motion setting: when enabled, disable or reduce decorative animations (spinning, sliding, parallax) and keep loading and status feedback. Afterward, toggle the system setting once to confirm the animation changes accordingly.

Learn next

1Animation→2Accessibility→

Recommended tool

Web fine-tuning tool · Selector Pro

Select page elements for precise AI edits

Click a button, text, or card, note the change, then copy its exact location to AI.

Open Selector Pro website