Chapter 10: AnimateActivity - Create React exit animations

Core Idea

Add powerful enter, exit, and layout animations to components managed by React's <Activity>

Key Concepts

• Install: First
• Sequencing: As with AnimatePresence
• Layout: By default
• Get early access to AnimateActivity with Motion+: Motion+ is a one-time purchase that unlocks 430+ examples

Code Examples

<AnimateActivity mode={isVisible ? "visible" : "hidden"}>
  <motion.div
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    exit={{ opacity: 0 }}
  />
</AnimateActivity>

• What it demonstrates: Core usage pattern for AnimateActivity - Create React exit animations.

Key Takeaways

1. AnimateActivity - Create React exit animations supports Install.
2. AnimateActivity - Create React exit animations supports Sequencing.
3. AnimateActivity - Create React exit animations supports Layout.

Connects To

• Install Motion+ for React: related Motion doc page.
• React Animation: related Motion doc page.