This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing potentially motion-sickness inducing x/y animations with opacity, disabling the autoplay of background videos, or turning off parallax motion.

It will actively respond to changes and re-render your components with the latest setting.

Usage

Implemented on expandable components, users can toggle the animations off with the reduceMotion boolean property. This will result in expandable content to show without the animation transition.

Example

<AccordionV2>
  <AccordionV2.Item title="Item 1 with expandable animation">
    <Text>Item content showing as expandable content</Text>
  </AccordionV2.Item>

  <AccordionV2.Item reduceMotion title="Item 2 with reduced motion">
    <Text>Item content showing instantly</Text>
  </AccordionV2.Item>
</AccordionV2>
<AccordionV2>
  <AccordionV2.Item title="Item 1 with expandable animation">
    <Text>Item content showing as expandable content</Text>
  </AccordionV2.Item>

  <AccordionV2.Item reduceMotion title="Item 2 with reduced motion">
    <Text>Item content showing instantly</Text>
  </AccordionV2.Item>
</AccordionV2>
content_copy
Copy
live example

useReducedMotion hook

The prefers-reduced-motion CSS media feature is used to detect if a user has enabled a setting on their device to minimize the amount of non-essential motion. This feature is used to automatically via useReducedMotion hook and is applied regardless of the reduceMotion property.