View Transitions

ELI5 — The Vibe Check

View Transitions API lets you animate between page states — or even between pages — with smooth crossfade, morph, and slide effects. It's what made people say 'wait, this is a website, not a native app?' The web finally got real page transitions.

Real Talk

The View Transitions API provides a mechanism for creating animated transitions between DOM states. It captures screenshots of the before and after states and applies CSS animations between them. It works for both SPA state changes and multi-page navigations (MPA view transitions).

Show Me The Code

document.startViewTransition(() => {
  updateDOM(); // Your state change
});

/* CSS */
::view-transition-old(root) {
  animation: fade-out 0.3s;
}
::view-transition-new(root) {
  animation: fade-in 0.3s;
}

When You'll Hear This

"View Transitions make our MPA feel like a native app" / "We added page transitions with 5 lines of CSS using the View Transitions API"