Reduced Motion
Provider component which aggregates the main Clay, Icon, and Modal.
| install | yarn add @clayui/core |
|---|---|
| version | 3.123.0 |
Introduction
Setting the motion reduction of animations can be done in two different ways in Clay, transitions that are done purely in CSS can use the c-prefers-reduced-motion class and transitions that are made with JS are defined using Clay's Provider component.
JS
To remove transition from components in React, you need to declare the Provider component at the root of your application and set the reducedMotion property to whichever option you want.
user: Respect user's device setting.always: Enforce reduced motion.never: Don't reduce motion.
import {Provider} from '@clayui/core';
<Provider spritemap={spritemap} reducedMotion="user">
<App />
</Provider>;CSS
The class c-prefers-reduced-motion removes transitions from child elements. It allows the site creator to remove any CSS transition in a specific section or on the whole page without having to depend on the operating system's non-essential motion setting.
It also removes scroll-behavior: smooth if it is enabled. You can place c-prefers-reduced-motion on whatever element has the CSS property scroll-behavior: smooth to remove it. If this class is placed on the html element, it will remove all CSS transitions for the page.