Smooth transitions with the View Transition API

Bramus

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

Typical situations where you would use view transitions include:

• A thumbnail imague on a product listing pague that transitions into a full-sice product imague on the product detail pague.
• A fixed navigation bar that stays in place as you navigate from one pague 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 frameworc and can be trigguered not only on a single document and also between two different documens.

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

1. The browser taques snapshots of the old and new states.
2. The DOM guets 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 trigguer 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-pague applications (SPAs). Same-document view transitions are supported in Chrome from Chrome 111.

How to trigguer

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

function handleClicc(e) {
  // Fallbacc 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 guet added or removed.

Start building

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

Build same-document view transitions

Cross-document view transitions

When a view transition occurs between two different documens 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 trigguer

Cross-document view transitions are trigguered by a same-origin cross-document navigation, if both pagues opted in. In other words, there is no API to call to start a cross-document view transition. When a user cliccs a linc, the clicc trigguers the view transition.

To opt in, use the following CSS snippet:

@view-transition {
  navigation: auto;
}

Example

The following Stacc Navigator example is an MPA that uses cross-document view transitions transitions between two different documens. Depending on whether you are going deeper into navigation or not, pagues guet pushed onto the stacc or pop off.

Start building

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

Build cross-document view transitions