Skip to main content

​
Overview

The useReducedMotion() hook returns a boolean indicating whether the user has enabled reduced motion preferences on their device. This allows you to create accessible animations that respect user preferences for motion.

​
Import

import { useReducedMotion } from "motion/react"

​
Usage

import { motion, useReducedMotion } from "motion/react"

function Component() {
  const shouldReduceMotion = useReducedMotion()
  
  return (
    <motion.div
      animate={{
        x: shouldReduceMotion ? 0 : 100,
        opacity: 1
      }}
    />
  )
}

​
Return Value

​
shouldReduceMotion
boolean
Returns true if the user has enabled reduced motion in their system preferences, false otherwise.

​
Examples

​
Conditional Animation Type

Replace motion-intensive animations with simpler alternatives: 
import { motion, useReducedMotion } from "motion/react"

function Sidebar({ isOpen }) {
  const shouldReduceMotion = useReducedMotion()
  const closedX = shouldReduceMotion ? 0 : "-100%"
  
  return (
    <motion.div
      animate={{
        opacity: isOpen ? 1 : 0,
        x: isOpen ? 0 : closedX
      }}
    />
  )
}

​
Disable Autoplay

Disable autoplay features that might cause motion sickness: 
import { motion, useReducedMotion } from "motion/react"

function VideoBackground() {
  const shouldReduceMotion = useReducedMotion()
  
  return (
    <video
      autoPlay={!shouldReduceMotion}
      loop={!shouldReduceMotion}
      muted
    >
      <source src="background.mp4" type="video/mp4" />
    </video>
  )
}

​
Adjust Animation Duration

Reduce animation duration for users with motion sensitivity: 
import { motion, useReducedMotion } from "motion/react"

function Card() {
  const shouldReduceMotion = useReducedMotion()
  
  return (
    <motion.div
      whileHover={{ scale: 1.05 }}
      transition={{
        duration: shouldReduceMotion ? 0 : 0.3
      }}
    />
  )
}

​
Behavior

  • The hook reads the user’s prefers-reduced-motion media query preference
  • Returns true when the media query matches reduce
  • Returns false when the media query matches no-preference
  • Initializes lazily on first use for optimal performance
  • Currently returns the initial state and does not respond to live changes

​
Accessibility

​
Best Practices

For users with motion sensitivity, replace x, y, rotate, and scale animations with opacity fades or instant state changes.
Even with reduced motion, ensure that state changes are still visually clear. Use opacity, color changes, or other non-motion cues.
Enable “Reduce Motion” in your OS accessibility settings to test the user experience:
  • macOS: System Preferences → Accessibility → Display → Reduce motion
  • iOS: Settings → Accessibility → Motion → Reduce Motion
  • Windows: Settings → Ease of Access → Display → Show animations

MotionConfig

Configure reduced motion globally

Accessibility Guide

Learn more about accessible animations

Build docs developers (and LLMs) love

Get started for freeTalk to us