useReducedMotion

A utility hook designed to stop the running of animations in react-spring through determining whether a user prefers reduced motion.

Usage

To get the most out of this hook, I recommend that you call it in the root of your app. However, you may need to directly know the preference to synchronize a third-party system e.g. autoplaying a video.

import { useReducedMotion } from '@react-spring/web'

export default function MyApp() {
  const reducedMotion = useReducedMotion()

  return (
    <main>
      <h1>Hello World</h1>
      {reducedMotion ? <p>You're using reduced motion!</p> : null}
    </main>
  )
}

Stopping animations

So how does this hook have the ability to stop all animations? react-spring has a Globals object, these global objects are used for to synchronize hooks across your application. One property that can be set is called skipAnimation. This property is a boolean and is checked by either the Controller or SpringValue to see if it should animate. If skipAnimation is set to true then the animation will "jump" to the goal value, similar to if the immediate prop is true.

The animation below has it's skipAnimation set to true so it will instantly jump to the goal value, check the code to learn more.

import { useRef, useEffect } from 'react'
import { useSpring, animated, Globals } from '@react-spring/web'

export default function MyApp() {
  const isRight = useRef(false)

  const [springs, api] = useSpring(
    () => ({
      x: 0,
    }),
    []
  )

  const handleClick = () => {
    api.start({
      x: isRight.current ? 0 : 200,
      onRest: () => {
        isRight.current = !isRight.current
      },
    })
  }

  useEffect(() => {
    Globals.assign({
      skipAnimation: true,
    })

    return () => {
      Globals.assign({
        skipAnimation: false,
      })
    }
  })

  return (
    <animated.div onClick={handleClick} className="spring-box" style={springs}>
      Click me!
    </animated.div>
  )
}

Why is it important?

Vestibular dysfunction, a balance disorder of the inner ear, is surprisingly common among US adults. A study from the early 2000's found that approximately 69 million Americans had vestibular dysfunction which results in vertigo, nausea, migraines and hearing loss. Many people affected by vestibular dysfunction will choose to set the "Reduce motion" setting in their operating system.

Typescript

function useReducedMotion(): boolean