I've long wondered whether there were any particular gotchas with React when it came to using the prefers-reduced-motion flag. Well, Josh has written up the answer (and, as usual, extremely well). The short is: yes, probably. It's best to assume no animations (which I think is a solid position regardless of tech stack), which means legacy browsers are catered for as well. He also points out that global overrides in CSS can cause issues with JS libraries like React Spring, which is worth knowing.

To determine the flag in JS you can use the window.matchMedia(prefers-reduced-motion: no-preference) (Josh has a full example of the code involved, including with event listeners to catch a user that alters the OS accessibility settings after already landing on your site, a very nice touch). He's even converted that logic into a hook 🤩 plus outlines how it might differ for SSR frameworks like Gatsby, which highlights that hydration can be tricky here (possibly another argument for removing React from the client-side if possible).

It's also interesting to see that Apple came up with the prefers-reduced-motion flag and that it's now supported pretty much everywhere, which is fantastic news.

For some folks, motion can trigger physical symptoms like nausea, dizziness, and malaise. I very much don't want to cause any of those symptoms!