Reduced Motion Media Query
The Reduced Motion media query provides a way for people who experience motion sickness and vertigo to specify that they’d like to reduce the motion of an interface.
Reader Daniel Post shared some code he uses to implement this on his sites.
Daniel’s codes is written in ES6 and Sass. Here’s the ES5 and CSS version.
JavaScript
if (window.matchMedia('(prefers-reduced-motion)')) {
// Handle JavaScript differently
document.documentElement.className += ' reduced-motion';
}
CSS
.some-component {
animation: all 2s ease-in;
}
.reduced-motion .some-component {
animation: none 0s ease-in;
}
Without JavaScript
Daniel’s approach requires JavaScript, which is fine when modifying JS components.
But for CSS, a simple media query does the same thing and works even if the JavaScript fails, fails to load, or loads after an animation has started.
.some-component {
animation: all 2s ease-in;
}
@media (prefers-reduced-motion) {
.some-component {
animation: none 0s ease-in;
}
}