Chapter 12: AnimatePresence

Core Idea

Add exit animations to React components when they're removed from the page.

Key Concepts

• Import: AnimatePresence works by detecting when its direct children are removed from the React tree.
• Exit animations: AnimatePresence works by detecting when its direct children are removed from the React tree.
• Changing key: Changing a key prop makes React create an entirely new component.
• Access presence state: Any child of AnimatePresence can access presence state with the useIsPresence hook.
• Access presence data: When a component has been removed from the React tree
• Manual usage: It's also possible to manually tell AnimatePresence when a component is safe to remove wit
• Propagate exit animations: By default
• 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
• 430+ production-ready examples.: JavaScript

Code Examples

<AnimatePresence>
  {show && <motion.div key="modal" exit={{ opacity: 0 }} />}
</AnimatePresence>

• What it demonstrates: Core usage pattern for AnimatePresence.

Key Takeaways

1. AnimatePresence supports Import.
2. AnimatePresence supports Exit animations.
3. AnimatePresence supports Changing key.

Connects To

• React motion component: related Motion doc page.
• AnimatePresence modes example & tutorial for React: related Motion doc page.
• Layout Animation: related Motion doc page.
• Custom cursor & follow-cursor animations: related Motion doc page.
• AnimateActivity - Create React exit animations: related Motion doc page.