Smooth Page Transitions with the View Transitions API

The View Transitions API lets the browser animate between two states of your UI without you hand-writing FLIP animations.

Same-document transitions

Wrap the DOM update in document.startViewTransition:

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

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

Animate specific elements

Give matching elements the same view-transition-name and they morph between positions:

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

Each name must be unique on the page at the moment of the transition.

Cross-document (multi-page) transitions

For classic multi-page sites, opt in on both pages:

@view-transition { navigation: auto; }

Tips

• Respect users who prefer less motion with a prefers-reduced-motion media query.
• Keep transitions short (200-400 ms) so navigation never feels slower.
• Always keep the non-animated fallback path working.

Progressive enhancement at its best: browsers without support just update instantly.