View Transitions API
Animate page state changes natively with the browser's View Transitions API — no JavaScript animation library required.
Demo State transition
Click the button to animate between two UI states using
document.startViewTransition(). The cross-fade is driven by the
browser — zero JavaScript animation code.
State A
Rounded, centred, primary colour. Hit the button to transition.
⚠ Your browser doesn't support
document.startViewTransition — the state still changes, just without the animation.
How it works
document.startViewTransition(() => {
// Synchronously mutate the DOM here.
// The browser captures before/after snapshots
// and cross-fades between them automatically.
updateState();
});
document.startViewTransition() captures a screenshot of the current state,
applies your DOM mutation, then animates between the two snapshots using a default
cross-fade. You can override the animation entirely with the
::view-transition-old and ::view-transition-new pseudo-elements.