Back to Projects List

JS View Transition

The View Transitions API animates between two DOM states with a single call. You pass document.startViewTransition(callback) a function that mutates the DOM, the browser snapshots the page before and after, and the difference is crossfaded for you. Tagging elements with the CSS view-transition-name property pairs them across states, so they animate position and size instead of fading independently.

Below are a few live demos. If your browser does not yet support startViewTransition you will see a notice instead. As of mid-2026 it is available unflagged in recent Chromium and Safari, and shipping in Firefox.