The short verdict
- Every major operating system has a reduce motion setting, and browsers pass it to your site.
- Respecting it means removing large movement, not removing all feedback.
- It takes a few lines of code and one test on your own device.
01Who turns it on, and why
People with vestibular disorders can feel dizzy or sick from parallax, zooming and large scroll effects. People with migraines, some people with ADHD, and people who simply find movement distracting use it too. Others turn it on to save battery. The setting is in accessibility options on macOS, iOS, Windows and Android, and websites can read it through the prefers-reduced-motion media query.
Most generated sites ignore it. Every section fades and slides regardless.
02What to remove
- Parallax and scroll-linked movement. Backgrounds moving at a different speed to content are the classic trigger.
- Large slides and zooms. Elements flying in from off-screen, scaling from small to full size.
- Auto-playing motion. Carousels, looping background videos, marquees. Pause them or show a still.
- Smooth scrolling libraries. Scroll hijacking that changes how fast the page moves.
- Page transitions with big movement. Swap for an instant change or a short fade.
03What to keep
Reduced motion does not mean no motion. Feedback that helps people use the site can stay.
- Colour and opacity changes on hover and focus.
- Short fades that show something appearing, without travel.
- Loading and progress states, kept simple.
- Content. Anything that only appears via animation must still appear, immediately.
“Reduced motion is a request to stop moving things around, not a request for a worse site.”
04How to build it in
In CSS
Wrap animation styles in a media query, or override them for people who prefer reduced motion. The cleanest approach is to write motion only inside a no-preference query, so the default is still.
In JavaScript
Check window.matchMedia("(prefers-reduced-motion: reduce)") before starting scroll animations. With GSAP, matchMedia lets you define one set of animations for full motion and another, or none, for reduced. The script on this blog checks the setting and skips the thumbnail animations entirely when it is on.
Watch out for hidden content
The most common bug: elements start at opacity 0 waiting for an animation to reveal them. Turn animations off and they stay invisible. Make sure the reduced path sets them to their final state.
05How to test
Turn the setting on in your own operating system and reload the site. In Chrome DevTools, the Rendering panel can emulate it too. Scroll every page. Nothing should slide or zoom, and nothing should be missing.
06Questions people ask
Is respecting reduced motion a legal requirement?
WCAG 2.2 includes a criterion about motion triggered by interaction at level AAA, and one about pausing moving content at level A. Respecting the system setting is the simplest way to meet the spirit of both.
Will reduced motion make my site look broken?
Not if it was planned. A well-designed site looks complete without movement. Motion should add to a layout, not hold it up.
Should I add a motion toggle on the site itself?
It is a nice extra for motion-heavy sites. The system setting should still be respected by default.
Can you check my site?
Yes. Send us the link and we will test it with the setting on.
