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 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
You can’t perform that action at this time.