Smooth Page Transitions With the View Transitions API

The View Transitions API gives the web the smooth, animated screen changes native apps have always had — morphing elements between states without manually orchestrating animations.

The Simplest Possible Transition

// Wrap any DOM update; the browser cross-fades old → new
document.startViewTransition(() => {
  updateThePage();
});

Morph a Shared Element

Give the same view-transition-name to an element on both screens and the browser animates it from its old position to the new one — perfect for a thumbnail expanding into a detail view.

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

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