View Transitions for crossfade

Native page-state transitions

document.startViewTransition(callback) animates between DOM states for free. The browser snapshots the current DOM, runs your callback (which mutates the DOM), snapshots the new DOM, and crossfades between them.

document.startViewTransition(() => {
  document.body.innerHTML = "<h1>New state</h1>";
});

What you don't have to write

• Capture before-state.
• Animate via CSS keyframes.
• Capture after-state.
• Diff and patch DOM.

The browser does all of it. Default animation: a soft crossfade.

Browser support note

Chrome and Edge have it (since 2023). Safari shipped support in 2024. Firefox is behind a flag at the time of writing. Always check if (document.startViewTransition) before calling.

Graceful degradation

function transition(update) {
  if (document.startViewTransition) {
    document.startViewTransition(update);
  } else {
    update();
  }
}

Browsers without support still get the new state — they just skip the animation.