Chapter 27: React Animation

Core Idea

Create React animation with Motion components. Learn variants, gestures, and keyframes.

Key Concepts

• What you'll learn: TIP
• Animate with <motion />: Most animations in Motion are created with the <motion /> component.
• Enter animations: We can set initial values for an element with the initial prop.
• Animatable values: Motion can animate any CSS value
• Transforms: Unlike CSS
• Supported value types: Motion can animate any of the following value types:
• Value type conversion: In general
• Transform origin: transform-origin has three shortcut values that can be set and animated individually:
• CSS variables: Motion for React can animate CSS variables

Code Examples

import { motion } from "motion/react"

• What it demonstrates: Core usage pattern for React Animation.

Key Takeaways

1. How to create your first animation with the <motion.div /> component.
2. Which values and elements you can animate.
3. How to customise your animations with transition options.
4. How to animate elements as they enter and exit the DOM.
5. How to orchestrate animations with variants.

Connects To

• Motion for React: Get started - React Animation Library: related Motion doc page.
• React motion component: related Motion doc page.
• SVG Animation in React: related Motion doc page.
• Motion Values: related Motion doc page.
• Easing functions: related Motion doc page.