Chapter 21: Layout Animation

Core Idea

Smoothly animate layout changes and create shared element animations.

Key Concepts

• How to animate layout changes: To enable layout animations on a motion component
• Performance: Animating layout is traditionally slow
• Find & fix animation performance issues with your agent.: MotionScore for Agents grades animations in your source code S to F and hands your agent s
• Shared layout animations: For more advanced shared layout animations
• Customise a layout animation: Layout animations can be customised using the transition prop.
• Motion along a path: By default
• Advanced use-cases: To correctly animate layout within a scrollable container
• Layout animations inside scrollable containers: To correctly animate layout within a scrollable container
• Animating within fixed containers: To correctly animate layout within fixed elements

Code Examples

<motion.div layout />

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

Key Takeaways

1. Animate layout changes with a single prop.
2. Create shared element transitions between components.
3. Explore advanced techniques.
4. Troubleshoot common layout animation issues.
5. Understand the differences between Motion and the native View Transitions API.

Connects To

• React transitions: related Motion doc page.
• arc(): related Motion doc page.
• LayoutGroup: related Motion doc page.
• Animate numbers: related Motion doc page.
• React motion component: related Motion doc page.