Play Accessibility
Should it stop?
Decide what each animation should do when someone has asked their device to reduce motion.
Question 1 of 6. As you scroll, a background image moves at a different speed from the page, a parallax effect. With reduced motion turned on, what should it do?
Large movement tied to scrolling is one of the most common triggers for dizziness and nausea. Slower parallax is still parallax.
Question 2 of 6. A small spinner shows while search results load. With reduced motion turned on, what should it do?
The spinner tells people something is happening, so it carries information. Reduced motion means less movement, not less feedback.
Question 3 of 6. Moving to a new page slides the whole screen in from the right. With reduced motion turned on, what should it do?
Moving the entire view is the kind of motion most likely to cause discomfort. A short change in opacity still signals that the page changed, without movement.
Question 4 of 6. A progress bar fills as a file uploads. With reduced motion turned on, what should it do?
This motion is essential: it shows how far along the upload is. Removing it would take away information, not just decoration.
Question 5 of 6. A carousel moves to the next slide every five seconds on its own. With reduced motion turned on, what should it do?
Anything that moves on its own for more than five seconds needs a way to pause it for everyone (WCAG 2.2.2). With reduced motion on, it should not start moving at all.
Question 6 of 6. A card's image zooms in slightly when you hover over it. With reduced motion turned on, what should it do?
The zoom is decoration, so it is the easiest motion to drop. Hover can still be shown with a change that does not move anything.
Reduced motion means less movement, not less information. Keep what tells people something and drop what only decorates.