Detects user’s preferences for reduced motion using the
prefers-reduce-motionCSS3 level 5 media query.
prefers-reduced-motionmedia feature is used to detect if the user has requested the system to minimize the amount of animation or motion it uses.
prefersReducedMotion() is part of 🔮 Magica11y,
which provides a suite of functions to detect “user-preference” and “environment” media features.
Magica11y functions are awesome because…
- They have zero dependencies
- They’re lightweight; e.g.
prefersReducedMotion()is just minified, or minified & gzipp’d
- They use the
- They’re optimized for performance; all the module functions are designed in such a way that they exit early
- They provide a clean, well-documented and semantic API to work with
In addition to
prefersReducedMotion(), Magica11y also provides…
🚀 Getting started
$ yarn add "@magica11y/prefers-reduced-motion"# OR$ npm install --save "@magica11y/prefers-reduced-motion"
<!-- OR -->
prefersReducedMotion() is distributed as a UMD module, so you can use it as a browser global…
var motionPreference = windowmagica11yprefersReducedMotion;var disableAnimations = motionPreference === windowmagica11yprefersReducedMotionmotionPreferencesREDUCE;
… or as a CommonJS module…
const prefersReducedMotion = ;const motionPreference = prefersReducedMotion;const disableAnimations = motionPreference === prefersReducedMotionmotionPreferencesREDUCE;
… or as an ES module…
;const motionPreference = ;const disableAnimations = motionPreference === motionPreferencesREDUCE;
motionPreferences object contains all the possible values supported by the
'prefers-reduce-motion' media query…
Indicates that the user has made no preference known to the system.
Indicates that user has notified the system that they prefer an interface that minimizes the amount of movement or animation, preferably to the point where all non-essential movement is removed.
The user’s preference could not be determined.
Now, you can use the Flow types as follows…
// @flow;const motionPreference: ?MotionPreference = ;
prefersReducedMotion() returns a
MotionPreference). So using the
? prefix to indicate nullable types is recommended (i.e.
📚 Further reading
- Change Accessibility Display preferences on Mac — Apple Support
- Reduce screen motion on your iPhone, iPad, or iPod touch — Apple Support
See LICENSE.md for more details.
Handcrafted with ❤️ by Rishabh Rao.