Shared view animation
Matt Perry
In this tutorial, we're going to build the Shared view animation example step-by-step.
This tutorial is rated beginner difficulty, which means we'll spend some time explaining the Motion APIs that we've chosen to use (and why), and also any browser APIs we encounter that might be unfamiliar to beginners.
Here's a live demo of the example we're going to be creating:
Checking Motion+ status…
The Shared view animation tutorial
is exclusive to Motion+
300+ examples & 40+ tutorials
Premium APIs
Motion Studio editing tools
alpha
Discord community
Early access
Lifetime updates
One-time payment, lifetime updates
Already joined?
Introduction
The Shared view animation example shows how to create smooth animations between different UI states using the browser's View Transitions API through Motion. When clicking between tabs, the icon morphs seamlessly and the underline slides smoothly to the new position.
This example uses press from Motion to listen for clicks on the tabs, and animateView to animate the DOM changes using the browser's native View Transitions API.
The View Transitions API lets browsers automatically animate elements that share the same view-transition-name CSS property. Motion's animateView function wraps this API, making it simple to trigger these animations whenever your UI changes.
