Menu

Links

Settings

Theme
Animations
Scrolling

Encyclopedia

Reduced Motion

Reduced motion is a setting, toggled either at the browser level or the operating system level, for minimizing the frequency and scale of animations.

Animations can pose an accessibility issue on the web for people with vestibular disorders, who can find them severely nauseating, dizzying, or migraine-inducing. Some animations can trigger epileptic seizures. Neurodivergent people can find them particularly distracting or overstimulating. For affected users, animations can be disruptive at best and outright unsafe at worst. When properly supported, the reduced motion setting puts control back in the hands of these users.

“Reduced motion” does not necessarily mean “no motion.” Rather, it typically means that unnecessary animations will be disabled, and whichever animations remain are made less dramatic where possible. On many sites, however, animations serve as uncritical flourishes, and in these cases, it might be worth considering just turning off all animations altogether when reduced motion is active.

In Code

In CSS, we can detect whether reduced motion is active with the prefers-reduced-motion media feature:

@media (prefers-reduced-motion: reduce) {
	/* Reduced motion is active */
}

@media (prefers-reduced-motion: no-preference) {
	/* Default: Reduced motion is either not active or not a supported setting */
}

Here, there are really two main patterns developers could take with these media queries:

  1. Apply animations by default throughout your styles, and then use a @media (prefers-reduced-motion: reduce) media query to unset or tone down the animations.
  2. A no-motion-first approach, where animations are gated behind @media (prefers-reduced-motion: no-preference) media queries. This means that on the off chance that a user is visiting your site from a device or browser that doesn’t support a reduced motion setting, the site will default to the safest option of having no animations.

These media queries will only impact animations and transitions that have been set in CSS. JavaScript-based animations should also respect reduced motion preferences, and can do so with a window.matchMedia() check.

External Resources