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:

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="red" 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="red" display="inlineBlock" padding={4}>
          <Text color="inverse">{shouldReduceMotion ? 'Reduced motion enabled' : 'Reduced motion disabled'}</Text>
        </Box>
      </div>
    </React.Fragment>
  );
}

Edit page on GitHub