View Transitions API
Interactive Demonstration

See the API in Action

This page uses the View Transitions API for a real interface change. Try it yourself, then navigate between pages to see a second type of transition.

Same-Document Transition

Use the button below. If the browser supports document.startViewTransition(), the browser animates between the card's old and new states. If it does not, the content still changes normally.

Original View

Ready for a transition?

Click the button to change this card's content and appearance using the View Transitions API.

Now try page navigation

Use the navigation at the top of the page. The pages opt in to cross-document view transitions, giving the navigation itself a second demonstration of the API.