The secret phrase is:

Use the prefers-reduced-motion media query

Around a quarter to a third of users have some form of motion sensitivity, which means a significant number of people may be bothered by animations or scrolling/parallax effects. Many experience dizziness, nausea, or distraction triggered by motion on a screen. This can happen for all kinds of reasons, such as fatigue, headaches, hangovers, ADHD, autism, dyslexia, or a mix of these factors.

That’s why operating systems include an option called Reduce Motion. As responsible web developers, we can respect that preference using a simple CSS media query.

The quick explanation

prefers-reduced-motion is a user setting that tells your site whether to minimize motion effects like transitions, keyframes, and auto-scrolling. You can detect it in CSS like this:

@media (prefers-reduced-motion: reduce) {
  /* Add styles for users who prefer less motion */
}

For example:

.element {
  transition: transform 0.5s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .element {
    transition: none;
  }
}

What this does

If the user has turned on “Reduce Motion” in their system preferences, the animation will be disabled. Everyone else still sees the normal transition.

Pro tip

You can also handle this in JavaScript for more complex interactions:

const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
if (mediaQuery.matches) {
  // Disable heavy animations or autoplaying videos
}

That’s all there is to it, actually. Respecting user preferences doesn’t just improve accessibility, it also makes your site feel smoother and more considerate. Small effort, big impact.

An example of beautiful accessible design with animations

The new GitHub signup experience is proof: Accessibility and stunning animated design can go hand in hand. I posted an article about it called “Designers, your excuse is gone. Stunning, animated and accessible. Yes, you can!” for all those designers who cry murder over accessibility because they assume that accessible graphic design can never be an attractive design. Boy, oh, boy, are they missing out on being able to say they create converting websites!