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.
Get started
Let's start by creating the basic tab navigation structure:
<div class="container">
<nav>
<ul class="tabs">
<li class="tab selected" data-tab="tomato">🍅 Tomato</li>
<li class="tab" data-tab="lettuce">🥬 Lettuce</li>
<li class="tab" data-tab="cheese">🧀 Cheese</li>
</ul>
</nav>
<main class="icon-container">
<div class="icon">🍅</div>
</main>
</div>
<style>
/** Copy styles from example source code */
</style>We've created a tab navigation with three tabs. The first tab starts with the selected class. Each tab has a data-tab attribute that we'll use to identify which tab was clicked. Below the tabs is a large icon that will change based on the selected tab.
