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

Category: CSS & CSS3 | March 13, 2024
Author:lucianmurmurache
Views Total:20 views
Official Page:Go to website
Last Update:March 13, 2024
License:MIT

Preview:

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

Description:

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

You Might Be Interested In:


Leave a Reply