A Beautiful Site

Prefers Reduced Motion

By now, most devs are familiar with the prefers-reduced-motion media query that tells whether or not a user prefers, well, reduced motion. You can use this to tone down (or turn off) transitions and animations in your stylesheet to accommodate users with vestibular motion disorders.

.animation {
  /* normal animation */
}

@media (prefers-reduced-motion) {
  .animation {
    /* subtle or no animation */
  }
}

That's pretty useful, but if you're using the Web Animations API, you may want to check for this with JavaScript instead. Thanks to window.matchMedia, it's pretty easy to do. I like to wrap it up in a small function that returns a boolean: true if the users prefers reduced motion or false if they have no preference.

function prefersReducedMotion() {
  const query = window.matchMedia('(prefers-reduced-motion: reduce)');
  return query?.matches;
}

Usage looks something like this:

if (prefersReducedMotion()) {
  // subtle or no animation
} else {
  // normal animation
  document.querySelector('.my-element').animate(...);
}