Silky Smooth Navigation with the View Transitions API

The View Transitions API is arguably the most impactful enhancement to web animation in a decade.

The Basic Workflow

if (!document.startViewTransition) {
  updateDOM()
  return
}

document.startViewTransition(() => {
  updateDOM()
})

The browser automatically captures snapshots of the previous state, prepares the incoming state, and blends them using customizable CSS keyframes:

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.25s;
}

:: ::