The View Transitions API Explained

The Problem It Solves

Smoothly animating between two completely different page states - like navigating from a product list to a product detail page - traditionally required careful manual JavaScript work to track old and new element positions and fake a transition between them. The View Transitions API lets the browser handle this automatically.

Triggering a Transition

document.startViewTransition(() => {
  // update the DOM to its new state here
  updatePageContent();
});

The browser automatically captures a snapshot of the page before the callback runs, lets the callback update the DOM, captures a new snapshot afterward, and then smoothly crossfades and morphs between the two - by default, a simple crossfade.

Customizing the Transition with CSS

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.4s;
}

These special pseudo-elements represent the "before" and "after" snapshots the browser generated, and can be styled or animated directly with normal CSS - including custom easing, duration, or entirely different animations than the default crossfade.

Animating a Specific Shared Element

.product-image {
  view-transition-name: product-hero;
}

Giving a specific element a unique view-transition-name tells the browser to treat it as a single continuous element across the transition - producing a smooth "morph" effect, such as a thumbnail image appearing to grow into a full-size hero image on the next page.

A Practical Note on Support

This API is newer and not universally supported yet. Since it only enhances the transition experience and does not change what content is actually shown, a page still works correctly for browsers that do not support it - it should be treated as a progressive enhancement, not a required dependency.