Reduced Motion
Provider component which aggregates the main Clay, Icon, and Modal.
install | yarn add @clayui/core |
---|---|
version | 3.120.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.