useReducedMotion

useReducedMotion allows a user to request that the system minimize the amount of non-essential motion.

Users can experience distraction or nausea from animated content. For example, scrolling a page which causes elements to move (other than the essential movement associated with scrolling) can trigger vestibular disorders.

Change your Accessibility -> Display device settings to "Reduce motion" and notice the animation stops.

References:

also known as prefers-reduced-motion

Accessibility

Partially ready

Examples

To test the example below, change your Accessibility -> Display device settings to "Reduce motion" and notice the animation stops.

function Example() {
  const shouldReduceMotion = useReducedMotion();

  return (
    <React.Fragment>
      <style dangerouslySetInnerHTML={{__html: `
        @keyframes vibrate {
          0% {
            transform: translate(0);
          }
          33% {
            transform: translate(-2px, -2px);
          }
          66% {
            transform: translate(2px, -2px);
          }
          100% {
            transform: translate(0);
          }
        }
      `}} />
      <div
        style={
          shouldReduceMotion
            ? {}
            : { animation: 'vibrate 0.3s linear infinite both' }
        }
      >
        <Box color="infoBase" display="inlineBlock" padding={4}>
          <Text color="inverse">{shouldReduceMotion ? 'Reduced motion enabled' : 'Reduced motion disabled'}</Text>
        </Box>
      </div>
    </React.Fragment>
  );
}

function Example() {
  const shouldReduceMotion = useReducedMotion();

  return (
    <React.Fragment>
      <style dangerouslySetInnerHTML={{__html: `
        @keyframes vibrate {
          0% {
            transform: translate(0);
          }
          33% {
            transform: translate(-2px, -2px);
          }
          66% {
            transform: translate(2px, -2px);
          }
          100% {
            transform: translate(0);
          }
        }
      `}} />
      <div
        style={
          shouldReduceMotion
            ? {}
            : { animation: 'vibrate 0.3s linear infinite both' }
        }
      >
        <Box color="infoBase" display="inlineBlock" padding={4}>
          <Text color="inverse">{shouldReduceMotion ? 'Reduced motion enabled' : 'Reduced motion disabled'}</Text>
        </Box>
      </div>
    </React.Fragment>
  );
}

Component quality checklist

Component quality checklist
Quality item	Status	Status description
Figma Library		Component is not currently available in Figma.
Responsive Web	Ready	Component is available in code for web and mobile web.
iOS		Component is not currently available in code for iOS.
Android		Component is not currently available in code for Android.

Edit page on GitHub

; Opens a new tab