Motion

View Transitions

The View Transition API cross-fades between DOM states smoothly — used for SPAs and same-origin page navigations.

Also called: View Transition API, document.startViewTransition

Live demo — click tabs

✦

Design

Pick the style and effects that match your audience.

How it works

Wrap DOM updates in document.startViewTransition(() => { ... }). Customize with ::view-transition-old() and ::view-transition-new() pseudo-elements.