Prefers reduced motion: animation everyone can use

Prefers reduced motion, written prefers-reduced-motion in CSS, is a media feature that tells your website a visitor has asked their device to minimise non-essential motion. When it reports reduce, you should calm the page down: stop autoplaying loops, replace slides, zooms and parallax with gentle fades or nothing, and show still versions of animated backgrounds. It is a small amount of work that makes a site usable for people who would otherwise leave it feeling unwell.

Who reduced motion is for

Some people have vestibular disorders, which affect the inner ear and the brain's sense of balance and movement. For them, large motion on screen, especially parallax, zooming and elements sliding across big areas, can trigger dizziness, nausea, headaches or disorientation. Others find constant movement distracting, have migraines, or simply prefer a calmer screen. They all use the same switch in their device settings, and they shouldn't have to explain why.

What to reduce, and what can stay

Reduced motion is not the same as no motion. The aim is to remove movement that simulates travel through space or fills large parts of the screen, and to stop anything that plays on its own. Small, quick feedback and simple fades are generally fine, and often help people understand what changed.

Replace rather than delete where you can. If a panel normally slides in from the side, let it fade in instead. If the hero plays a loop, show a still frame of it. The design stays intact; only the travel goes.

How to honour prefers-reduced-motion in CSS

The most robust approach is to treat motion as an enhancement. Write the still design first, then add movement inside a media query that only applies when the visitor has no preference. If the query isn't supported or the setting is on, the page is simply still. MDN's page on prefers-reduced-motion documents the feature.

/* Still by default */
.hero-bg {
  background: linear-gradient(135deg, #1e1b4b, #6d28d9 55%, #db2777);
  background-size: 100% 100%;
}
.card {
  opacity: 0;
  transition: opacity 200ms ease-out; /* a fade is fine for everyone */
}
.card.is-visible {
  opacity: 1;
}

/* Movement only for visitors with no preference */
@media (prefers-reduced-motion: no-preference) {
  .hero-bg {
    background-size: 200% 200%;
    animation: drift 20s linear infinite alternate;
  }
  .card {
    transform: translateY(24px);
    transition: opacity 200ms ease-out, transform 300ms cubic-bezier(0, 0, 0.2, 1);
  }
  .card.is-visible {
    transform: none;
  }
}

@keyframes drift {
  to { background-position: 100% 100%; }
}

Reduced motion in JavaScript, video and canvas

Motion driven by scripts, such as scroll effects, canvas or WebGL backgrounds and video, needs a JavaScript check. Read the setting with matchMedia, and listen for changes, because people can switch it while your page is open.

const query = matchMedia('(prefers-reduced-motion: reduce)')
const video = document.querySelector('.hero-video')

function apply() {
  if (query.matches) {
    video?.pause()            // the poster image stays
    stopBackgroundLoop()      // your canvas or WebGL loop: draw one frame, then stop
  } else {
    video?.play().catch(() => {})
    startBackgroundLoop()
  }
}

query.addEventListener('change', apply)
apply()

Background videos and live gradients are the most common offenders because they play on their own. Video backgrounds on websites and shader gradients both show where the check belongs.

What WCAG says about motion

Three success criteria in the Web Content Accessibility Guidelines deal with motion. Reduced motion support is the practical way to meet the first; a pause control handles the second.

Designing still versions that still look good

The still version shouldn't feel like a broken one. For animated backgrounds, choose the frame that looks best on its own, not whatever frame happens to be first. For entrances, make sure the final layout is complete without them. For loops made from a brand material, a well-chosen still of the same material keeps the identity intact. Motion design principles suggests testing every animation with a single paused frame for this reason.

Gradiently follows the same rule: live Marks in the app hold still when your device asks for reduced motion, and any design you export as a loop can also be exported as a PNG still of the same Mark, for places where motion isn't welcome. For social posts, where you can't detect the setting, the kindest approach is slow, gentle movement; see animated gradient backgrounds.

1. 1

   Turn the setting on

   Enable reduce motion in your operating system and reload the site.

2. 2

   Check every moving thing

   Heroes, carousels, scroll effects, videos, canvases and loading states should all be calm.

3. 3

   Switch it while the page is open

   Your scripts should follow the change without a reload.

4. 4

   Emulate it in developer tools

   Chrome and Firefox can emulate the media feature, which is quicker while you work.

5. 5

   Look at the still design

   Make sure the reduced version looks intended and complete, not like something failed to load.