Chapter 13: AnimateView - Animated page transitions in React

Core Idea

Animate between views and create page transitions with the AnimateView component.

Key Concepts

• Install: First
• Enter/exit animations: To animate an element as it enters and exits the DOM
• Configure the transition: It's possible to set a default transition for all view transitions via the transition prop.
• Setting values: By default
• Animating updates: Elements wrapped in AnimateView will also animate whenever their content or visual styles change
• Shared element animations: When an AnimateView component with a name prop exits the DOM
• Transition types: React's addTransitionType lets you set contextual information (like navigation direction)
• Suspense: AnimateView integrates with Suspense.
• Performance: The React docs state:

Code Examples

{isOpen && (
  <AnimateView transition={{ type: spring }}>
    <div className="modal" />
  </AnimateView>
)}

• What it demonstrates: Core usage pattern for AnimateView - Animated page transitions in React.

Anti-patterns

• Note from docs: <ViewTransition> creates an image that can be moved around, scaled and cross-faded. Unlike Layout Animations you may have seen in React Native or Motion, this means that not every individual Element inside of it animates its position. This can lead to better performance and a more continuous feeling, smooth animation compared to animating every individual piece.

Key Takeaways

1. AnimateView - Animated page transitions in React supports Install.
2. AnimateView - Animated page transitions in React supports Enter/exit animations.
3. AnimateView - Animated page transitions in React supports Configure the transition.

Connects To

• React transitions: related Motion doc page.
• Install Motion+ for React: related Motion doc page.
• Layout animations: related Motion doc page.