Smooth transitions between UI states — a list morphing into a detail view, a crossfade between pages — used to require significant JavaScript: capturing positions, cloning elements, animating manually, cleaning up. The View Transitions API hands that work to the browser. You tell it what change is happening and it animates between the before and after states, replacing a lot of fragile code with a small, declarative API.
How it works
The core idea: the browser snapshots the current state, you make your DOM change inside a transition, and the browser animates from the old snapshot to the new one — a crossfade by default. You trigger it by wrapping your DOM update in document.startViewTransition(), and the browser handles capturing both states and tweening between them:
if (document.startViewTransition) {
document.startViewTransition(() => updateTheDOM());
} else {
updateTheDOM(); // progressive enhancement — no transition, still works
}Morphing specific elements
Beyond a whole-page crossfade, you can animate specific elements from their old position and size to their new ones — a thumbnail growing into a hero image, a card expanding into a detail panel. You give the elements a shared view-transition-name in CSS, and the browser matches them across the two states and morphs one into the other. This shared-element transition is the effect that previously took the most JavaScript, and here it is largely CSS.
Across full navigations
The API also works across full page navigations, not just in-page state changes — meaning multi-page (non-SPA) sites can have smooth page transitions that were previously the exclusive preserve of single-page apps. This is significant: it narrows the gap that pushed teams toward SPAs purely for transition polish, letting a traditional server-rendered site feel just as fluid.
Always structure view transitions as an enhancement: check for support and fall back to an instant, un-animated change where the API is not available, as in the example above. The transition is polish, not function — the app must work perfectly without it. Feature-detect, wrap the animation, and the effect gracefully degrades to a plain state change on browsers that do not support it yet.
The View Transitions API moves the work of animating between UI states — crossfades, element morphs, even full page navigations — into the browser, replacing brittle JavaScript with a small declarative API and some CSS. Use it to add polish that used to be expensive, including page transitions on multi-page sites, and layer it as a progressive enhancement so the experience stays solid everywhere while getting nicer where the API is supported.
Independent software engineer in Nairobi specialising in Acumatica customisations, Laravel backends, and tax fiscalisation integrations across East and Southern Africa.