Chapter 26: MotionConfig

Core Idea

Configure default transition options and manage reduced motion preferences.

Key Concepts

• Props: Define a fallback transition to use for all child motion components.
• transition: Define a fallback transition to use for all child motion components.
• reducedMotion: Default: "never"
• transformPagePoint: Default: point => point
• correctParentTransform: When a parent element has a CSS transform (scale
• transformViewBoxPoint: When an svg element has a viewBox that differs from its rendered size
• Custom transforms: transformPagePoint accepts any function that takes a page point and returns a corrected one.
• nonce: If using a Content Security Policy with a nonce attribute
• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

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

export const MyComponent = ({ isVisible }) => (
  <MotionConfig transition={{ duration: 1 }}>
    <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
      />
  </MotionConfig>
)

• What it demonstrates: Core usage pattern for MotionConfig.

Key Takeaways

1. MotionConfig supports Props.
2. MotionConfig supports transition.
3. MotionConfig supports reducedMotion.

Connects To

• React motion component: related Motion doc page.
• Layout Animation: related Motion doc page.
• React drag animation guide: related Motion doc page.
• SVG Animation in React: related Motion doc page.
• React Animation: related Motion doc page.