Creating websites with prefers-reduced-motion

The prefers-reduced-motion media query detects if the user prefers being served content with reduced or no animated and moving elements.

Why might we want reduced motion?

There is research to show that particular types of motion can cause issues such as headaches, dizziness and other symptoms for certain people. It is important that we as web developers create websites that can cater for all who have access to the web.

Another reason we might want to reduce animated elements would be to use fewer resources of the browser or machine. A heavily animated website could be using a lot more power than one that isn’t animated, due to areas of the website needing to be repainted, or logic within the animation needing the computational power to operate. Reducing animation could therefore also reduce the power consumed by that website.

How to use the prefers-reduced-motion media query

The implementation can be used either in CSS or with Javascript. This gives us options to reduce motion across different animation implementations.

Reduced motion with CSS

.animated-object {
  animation: move 1s infinite;
}
 
@media (prefers-reduced-motion: reduce) {
  .animated-object {
    animation: none;
  }
}

Reduced motion with JavaScript

// Store the prefers reduced media query.
const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");

// Check if the media query matches or is not available.
if (!mediaQuery || mediaQuery.matches) {
  // Run with reduced or no animation
  doSomething();
} else {
  // Run with full animation
  doSomethingElse();
}

// Add an event listener to check for changes in the media query's value.
mediaQuery.addEventListener("change", () => {
  if (mediaQuery.matches) {
    // Run with reduced or no animation
    doSomething();
  } else {
    // Run with full animation
    doSomethingElse();
  }
});

With this JavaScript method, you could, for example, reduce animations created with tools such a GSAP, or stop scroll-based parallax animations.

Browser support

Like a lot of things covered on this blog, browser support is surprisingly good. The majority of modern browsers now support the media query – and according to caniuse.com – it is supported on browsers used by 92.98% of global internet users at the time of writing. So, we think it is pretty great for coverage of potential users.

Concluding

User preferences are really important. As developers creating websites, webapps etc for those users, it is imperative that we provide them in such a way that the user can digest them as they prefer. Whether for a medical reason, or purely preferential, we should provide the option for users to reduce the amount of motion they receive on a given website. The prefers-reduced-motion media query gives us this option.

Let’s continue to make the web more accessible and sustainable for all.