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 enable their system's reduced-motion preference, a page can query it and reduce, stop, or replace nonessential animation, such as replacing a large movement with a static state. Keep loading and status information clear; a spinning icon can be replaced with text or progress. Toggle the system setting to check that the page responds.

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

Decorative gradient: shifting slowly
Page layout: kept
Loading status: spinning cue

These controls simulate the system preference; with it on, the background gradient and spinner stop while the loading state remains readable.

What reduce motion handles

Nonessential animation can change: When the preference is on, reduce, stop, or replace nonessential motion such as large movement or parallax.

Keep the page state clear: You can stop a loading spinner and use text or progress to show that work continues; keeping the information does not require keeping the animation.

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 the loading message and status information tooRespond to the system preference, reduce nonessential motion, and keep the page state clearAdd a pause button to every animation

You can say this to an AI Agent

Make the page respond to the system's reduced-motion preference by reducing or replacing nonessential animation. A loading spinner may stop, but keep static text or progress feedback so the waiting state is clear. Toggle the system setting to verify the page responds.

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