Chapter 53: View animations

Core Idea

Discover Motion's animateView() for seamless animations between different views or layouts. Learn how it simplifies layout changes, shared element transitions, and page effects using the browser's native View Transition API, with a cleaner API, spring animations and interruption handling.

Key Concepts

• Import: animateView can be imported from the main "motion" package.
• Page crossfade: By default
• Animate elements: The simplest way to animate an element is to target it with add
• Set a default transition: animateView supports the same transition options as the animate function:
• Override a transition: By default the layout animation uses the default transition you pass to animateView.
• Shared-element transitions: To morph between two different elements
• Enter and exit animations: enter and exit can define animations on elements that have no matching old or new layer
• Page transitions: The entire page can be animated with the new and old methods
• Animating values: animateView animates any value the browser can animate with CSS

Code Examples

animateView(update).enter({ opacity: 1 })

• What it demonstrates: Core usage pattern for View animations.

Key Takeaways

1. Cleaner API.
2. Spring animations.
3. Interruption handling/queuing.
4. Simplified shared element matching.

Connects To

• animate(): related Motion doc page.
• stagger: related Motion doc page.
• Layout Animation: related Motion doc page.
• Layout animations: related Motion doc page.
• AnimateView - Animated page transitions in React: related Motion doc page.