Reduced motion in life anyone?

If, like me, you have some fancy scroll animations on your site, this tip is for you. Such animations can cause discomfort for people with vestibular motion disorders. Animations like scaling or panning large objects can be vestibular motion triggers, which is why users can turn them off in the browser. But we need to listen for that preference in our code as well, which is easy to do with media queries.

@media (prefers-reduced-motion: no-preference) {
  /* Turn on the animation */
}

@media (prefers-reduced-motion: reduce) {
  /* Turn off the animation */
}

For a few years now, operating systems have allowed users to opt out of animations, typically within Accessibility settings. ‘no-preference’ is the default value, while ‘reduce’ indicates that the user has enabled reduced motion on their device.

Be kind to users and make the web more inclusive for everyone!