Created
March 2, 2023 19:51
-
-
Save rossberenson/487a87bbb75e08c371daa830e512142c to your computer and use it in GitHub Desktop.
Check to see if motion is ok
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Is motion ok? | |
| * | |
| * Prevent animations from running if the user has enabled 'reduce motion' on their machines. | |
| * | |
| * Use as a conditional. if ( isMotionOk ) { runAnimation(); } | |
| */ | |
| function checkMQ( mediaQuery ) { | |
| return ! mediaQuery.matches; | |
| } | |
| const isMotionOk = () => { | |
| // Grab the prefers reduced media query. | |
| const mediaQuery = window.matchMedia( '(prefers-reduced-motion: reduce)' ); | |
| let isOk = true; | |
| // If there is no mediaQuery for some reason, return. | |
| if ( ! mediaQuery ) { | |
| return false; | |
| } | |
| // On load, Check if the media query matches or is not available. | |
| isOk = checkMQ( mediaQuery ); | |
| // Check for changes in the media query's value. I don't think this is a property that can change on the fly, but just incase. | |
| mediaQuery.addEventListener( 'change', () => { | |
| isOk = checkMQ( mediaQuery ); | |
| } ); | |
| return isOk; | |
| }; | |
| export default isMotionOk; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment