Chapter 1: React motion component

Core Idea

Animate elements with a declarative API. Supports variants, gestures, and layout animations.

Key Concepts

• Performance: motion components bypass React's render cycle entirely.
• Server-side rendering: motion components are fully compatible with server-side rendering
• Custom components: You can add motion capabilities to any React component with motion.create().
• Props: motion components accept the following props.
• Animation: Motion provides declarative animation props like animate and exit.
• initial: The initial visual state of the motion component.
• animate: A target to animate to on enter
• exit: A target to animate to when a component is removed from the tree.
• transition: The default transition for this component to use when an animation prop (animate

Code Examples

// React
import { motion } from "motion/react"

// React Server Components (Next.js etc)
import * as motion from "motion/react-client"

• What it demonstrates: Core usage pattern for React motion component.

Key Takeaways

1. React motion component supports Performance.
2. React motion component supports Server-side rendering.
3. React motion component supports Custom components.

Connects To

• React Animation: related Motion doc page.
• Tailwind CSS animations: related Motion doc page.
• Motion Values: related Motion doc page.
• Motion AI Kit AI Context: docs and example context for your agent: related Motion doc page.
• AnimatePresence: related Motion doc page.