Chapter 9: Create accessible animations in React

Core Idea

Learn how to create accessible animations with Motion for React by respecting users' 'Reduced Motion' preferences. Discover the reducedMotion option for site-wide settings and the useReducedMotion hook for custom solutions like replacing transforms with opacity, disabling autoplaying videos, and parallax effects.

Key Concepts

• Automatic: The reducedMotion option can be set on MotionConfig to define how you want to adhere to th
• Manual: While reducedMotion is a great blanket tool for ensuring accessible animations across your
• Replace transform with opacity: When Reduced Motion is enabled on iOS
• Disable auto-playing video: useReducedMotion isn’t only compatible with the Motion.
• Disable parallax: Parallax animations can be very unpleasant for people pre-disposed to motion sickness.
• Conclusion: We've learned to respect people's Reduced Motion setting with Motion for React.
• Stay in the loop.: Deep dives on animation
• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

import { MotionConfig } from "framer-motion"

export function App({ children }) {
  return (
    <MotionConfig reducedMotion="user">
      {children}
    </MotionConfig>
  )
}

• What it demonstrates: Core usage pattern for Create accessible animations in React.

Key Takeaways

1. Create accessible animations in React supports Automatic.
2. Create accessible animations in React supports Manual.
3. Create accessible animations in React supports Replace transform with opacity.

Connects To

• Layout Animation: related Motion doc page.
• useReducedMotion: related Motion doc page.
• React motion component: related Motion doc page.
• React Animation: related Motion doc page.