Smooth transitions with the View Transition API

Bramus

The View Transition API gives you the power to create seamless visual transitions between different views on your website. This creates a more visually engaging user experience for users as they navigate your site, regardless of whether it's built as a multi-page application (MPA) or a single-page application (SPA).

Typical situations where you would use view transitions include:

• A thumbnail image on a product listing page that transitions into a full-size product image on the product detail page.
• A fixed navigation bar that stays in place as you navigate from one page to another.
• A grid with items moving positions as you filter through.

Implement view transitions

View transitions are not tied to a specific application architecture or framework and can be triggered not only on a single document and also between two different documents.

Both types of view transition rely on the very same building blocks and principles:

1. The browser takes snapshots of the old and new states.
2. The DOM gets updated while rendering is suppressed.
3. The transitions are powered by CSS Animations.

The one thing that's different between both types is how you trigger them.

Same-document view transitions

When a view transition runs on a single document it is called a same-document view transition. This is typically the case in single-page applications (SPAs). Same-document view transitions are supported in Chrome from Chrome 111.

How to trigger

Trigger a same-document view transitions by calling document.startViewTransition:

function handleClick(e) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow();
    return;
  }

  // With a View Transition:
  document.startViewTransition(() => updateTheDOMSomehow());
}

Example

The following cards example is an SPA that uses same-document view transitions to animate the cards as new ones get added or removed.

Start building

Refer to the dedicated documentation page to learn all there is to know about same-document view transitions.

Build same-document view transitions

Cross-document view transitions

When a view transition occurs between two different documents it is called a cross-document view transition. This is typical for MPAs. Cross-document view transitions are supported in Chrome 126 and greater.

How to trigger

Cross-document view transitions are triggered by a same-origin cross-document navigation, if both pages opted in. In other words, there is no API to call to start a cross-document view transition. When a user clicks a link, the click triggers the view transition.

Top opt in, use the following CSS snippet:

@view-transition {
  navigation: auto;
}

Example

The following Stack Navigator example is an MPA that uses cross-document view transitions transitions between two different documents. Depending on whether you are going deeper into navigation or not, pages get pushed onto the stack or pop off.

Start building

Learn all there is to know about cross-document view transitions.

Build cross-document view transitions