usePrefersReducedMotion

js

For some people, motion can be harmful.

The prefers-reduced-motion CSS media query allows us to disable animations for these folks. For our animations that are entirely in CSS (eg. CSS transitions, CSS keyframe animations), this works great 💯

What about for our animations in JavaScript, though? For example, when we use a library like React Spring or Framer Motion? We need to manage it ourselves, and it becomes a pretty tricky endeavour.

For these cases, I created a use-prefers-reduced-motion hook.

I wrote a blog post all about this:

The “prefers-reduced-motion” Hook

A deep dive into how animations can be harmful, and what we can do to address it. Because nobody should feel sick after using our products!

For the best possible user experience, we want to re-render components that rely on this hook when the user toggles prefers-reduced-motion on or off.

In older browsers, this is done with mediaQueryList.addListener(...). This syntax has been updated in newer browsers to be a bit more conventional: mediaQueryList.addEventListener('change', ...).

To make sure we support as many browsers as possible, we'll use both.

jsx