Shared view animation

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.