Smoother Page Changes With View Transitions

You do not need to turn a multi-page site into an application just to animate a page change. View Transitions can sit on top of ordinary DOM updates and, in supporting browsers, normal same-origin navigation.

That makes the API interesting to me. The transition is an enhancement; the underlying interaction remains boring and reliable.

The MDN View Transition guide covers both same-document and cross-document transitions.

Wrap a normal DOM update

Without a transition, a layout toggle might look like this:

button.addEventListener("click", () => {
  gallery.classList.toggle("compact");
});

Pass the same update to startViewTransition():

button.addEventListener("click", () => {
  document.startViewTransition(() => {
    gallery.classList.toggle("compact");
  });
});

The browser captures the old and new states and animates between them. Keep the fallback beside it:

function updateLayout() {
  gallery.classList.toggle("compact");
}

button.addEventListener("click", () => {
  if (!document.startViewTransition) {
    updateLayout();
    return;
  }

  document.startViewTransition(updateLayout);
});

Now the action works even when the API does not.

Name only the elements that need continuity

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

Matching names let the browser connect a particular element between states—for example, a thumbnail becoming a hero image. A transition name must be unique in the active document, so assigning the same name to every card is an easy way to break the effect.

The generated pseudo-elements can adjust timing:

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 250ms;
}

I would try the default first. Animation code has a habit of growing around a result nobody disliked.

Multi-page navigation can opt in with CSS

Supporting browsers can animate eligible same-origin page changes:

@view-transition {
  navigation: auto;
}

The pages are still separate documents connected by normal links. Support for cross-document details remains uneven, so navigation must never depend on the animation.

Respect reduced motion

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) {
    animation-duration: 0s;
  }
}

Use transitions where movement explains a relationship or makes a state change easier to follow. Avoid delaying navigation or animating every small control. A quarter-second hint can feel polished; a site that ceremonially dissolves each time I open a link gets old rather quickly.