Accessible animations in React | Josh W Comeau

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!

Explore Other Notes

Newer

The design systems between us

Have design systems helped bridge the gap between designers and developers? Probably not. Is part of that potentially the increasing complexity of frontend build tooling? Possibly. Design and […]
  • 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). […]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.