Detects user’s preferences for reduced motion using the
prefers-reduce-motionCSS3 level 5 media query.
Quoting from the CSS3 level 5 media queries specfication…
The
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 justminified, or
minified & gzipp’d
- They use the
window.matchMediaAPI underneath - 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…
- 📺
environmentBlending() - 🎨
forcedColors() - 🌑
invertedColors() 🕯️lightLevel()- 🌗
prefersColorScheme() - 🔆
prefersContrast() - 💎
prefersReducedTransparency()
You can install prefersReducedMotion() using a package manager such as yarn or npm…
$ yarn add "@magica11y/prefers-reduced-motion"
# OR
$ npm install --save "@magica11y/prefers-reduced-motion"You can also include prefersReducedMotion() from a CDN on your page, such as jsDelivr or unpkg…
<script src="https://cdn.jsdelivr.net/npm/@magica11y/prefers-reduced-motion@latest/dist/magica11y.prefersReducedMotion.min.js"></script>
<!-- OR -->
<script src="https://unpkg.com/@magica11y/prefers-reduced-motion@latest/dist/magica11y.prefersReducedMotion.js"></script>prefersReducedMotion() is distributed as a UMD module, so you can use it as a browser global…
var motionPreference = window.magica11y.prefersReducedMotion.default();
var disableAnimations = (motionPreference === window.magica11y.prefersReducedMotion.motionPreferences.REDUCE);… or as a CommonJS module…
const prefersReducedMotion = require('@magica11y/prefers-reduced-motion');
const motionPreference = prefersReducedMotion.default();
const disableAnimations = (motionPreference === prefersReducedMotion.motionPreferences.REDUCE);… or as an ES module…
import prefersReducedMotion, { motionPreferences } from '@magica11y/prefers-reduced-motion';
const motionPreference = prefersReducedMotion();
const disableAnimations = (motionPreference === motionPreferences.REDUCE);The motionPreferences object contains all the possible values supported by the 'prefers-reduce-motion' media query…
motionPreferences.NO_PREFERENCE(spec:'no-preference')Indicates that the user has made no preference known to the system.
motionPreferences.REDUCE(spec:'reduce')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.
nullThe user’s preference could not be determined.
You can import the Flow types from the provided libdefs
in node_modules/@magica11y/prefers-reduced-motion/lib by configuring them in your .flowconfig…
[libs]
node_modules/@magica11y/prefers-reduced-motion/lib
Now, you can use the Flow types as follows…
// @flow
import prefersReducedMotion, { type MotionPreference } from '@magica11y/prefers-reduced-motion';
const motionPreference: ?MotionPreference = prefersReducedMotion();🎩 Note: prefersReducedMotion() returns a nullable
type (i.e. MotionPreference). So using the ? prefix to indicate nullable types is recommended (i.e. ?MotionPreference).
- 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 :heart: by Rishabh.
