Understanding the API

How View Transitions Work

The browser can animate between an old visual state and a new one, giving developers a new way to create transitions without manually animating every change.

Two Ways To Use View Transitions

This project demonstrates both navigation between pages and a content change within one page.

Cross-Document

Navigation between pages can use a transition when both pages opt in. This project uses the @view-transition rule with navigation: auto.

Same-Document

JavaScript can call document.startViewTransition() before changing content or the DOM.

Named Elements

view-transition-name can identify an element so the browser can create a transition for that specific visual element.

Cross-Document CSS

@view-transition {
  navigation: auto;
}

h1 {
  view-transition-name: page-title;
}

Same-Document JavaScript

document.startViewTransition(() => {
  // Update the page content here
});