Code examples for Reduced Motion Queries

examples

/*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
    }
}

updated to public