useReducedMotion

A hook that returns true if the current device has Reduced Motion setting enabled.

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.

export function Sidebar({ isOpen }) {
  const shouldReduceMotion = useReducedMotion()
  const closedX = shouldReduceMotion ? 0 : "-100%"

  return (
    <motion.div animate={{
      opacity: isOpen ? 1 : 0,
      x: isOpen ? 0 : closedX
    }} />
  )
}

#Usage

Import useReducedMotion from Framer Motion.

import { useReducedMotion } from "framer-motion"

In any component, call useReducedMotion to check whether the device's Reduced Motion setting is enabled.

const prefersReducedMotion = useReducedMotion()

You can then use this true/false value to change your application logic.