Skip to content

Instantly share code, notes, and snippets.

@jesseyuen

jesseyuen/examples

Last active Apr 8, 2019
Embed
What would you like to do?
Code examples for Reduced Motion Queries
/*Learn more: https://jesseyuen.com/motion-queries-in-the-wild/*/
/* Quick and dirty attempt to remove ALL the motion */
@media (prefers-reduced-motion) {
*,
*:before,
*:after {
animation: unset !important;
transition: none !important;
}
}
/* Detect users that prefer no motion in your js*/
if (!(window.matchMedia('(prefers-reduced-motion)').matches)) {
// initialsie animation
}
/* Create a utility class for users that prefer no motion */
if (window.matchMedia('(prefers-reduced-motion)').matches) {
document.documentElement.classList.add('prefers-no-motion');
}
/* Nested parent selector example */
.selector {
//styles that include motion
.prefers-no-motion & {
// stop the motion
}
}
@jesseyuen

This comment has been minimized.

Copy link
Owner Author

@jesseyuen jesseyuen commented Apr 8, 2019

updated to public

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment