Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • How to Read This Documentation
    • Composition Philosophy
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Focus Trap
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Reduced Motion
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
K
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Reduced Motion

Provider component which aggregates the main Clay, Icon, and Modal.

installyarn add @clayui/core
version3.96.0

Stable3.96.0CHANGELOGstorybook demos

  • Introduction
  • JS
  • CSS

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.

How can this be improved? Create an issue!