Link to this headingContext
For some people, motion can be harmful.
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 💯
For these cases, I created a
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!
Link to this headingListening for changes
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:
To make sure we support as many browsers as possible, we'll use both.
Link to this headingUsage
Link to this headingWith React Spring