Disable Web Animations Based On User’s Preferences – Reduced Motion

The Reduced Motion CSS library is a simple and lightweight solution that automatically adjusts your website’s animations based on the user’s preferences

If a user has disabled animations on their device, this library reduces or removes motion effects to ensure a smooth and comfortable browsing experience.

Reduced Motion is designed to cater to users who may experience motion sickness, vestibular disorders, or other conditions that make animations uncomfortable.

By automatically detecting the user’s preference for reduced motion, the library applies CSS styles that remove or minimize CSS-powered animations (e.g. CSS animations & transitions), video backgrounds, and other motion-related elements.

How to use it:

1. Install & download the Reduced Motion.

# Yarn
$ yarn add reduced-motion
# NPM
$ npm install reduced-motion

2. Import the Reduced Motion.

<link rel="stylesheet" href="/dist/index.min.css">
// OR
import 'reduced-motion/css';

3. Or directly insert the following CSS snippet into your document.

@media (prefers-reduced-motion) {
  *,
  *::before,
  *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
  }
  video[autoplay] {
    display: none !important;
  }
}

Changelog:

v1.0.4 (03/13/2024)

• Update package