Smooth Page Transitions with the View Transitions API

Animating from one UI state to another (a thumbnail growing into a detail view, a list reordering) used to need a heavy animation library. The View Transitions API lets the browser do it.

Same-page transitions

function showDetails(item) {
  if (!document.startViewTransition) {
    render(item); // fallback: update without animation
    return;
  }
  document.startViewTransition(() => render(item));
}

The browser snapshots the old state, runs your update, snapshots the new state, then cross-fades between them by default.

Morph specific elements

Give the "same" element in both states a matching view-transition-name and the browser animates its position and size:

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

::view-transition-old(product-image),
::view-transition-new(product-image) {
  animation-duration: 300ms;
}

Each name must be unique on the page at a time.

Transitions between pages

For multi-page sites (separate HTML documents on the same origin), opt in on both pages with CSS:

@view-transition {
  navigation: auto;
}

Normal link clicks now cross-fade, and elements with matching view-transition-name morph between pages, with no JavaScript framework required.

Respect reduced motion

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

Same-document transitions work in all major browsers' current versions; cross-document support is newer, so treat it as progressive enhancement.