document.startViewTransition()
View Transitions API
Wrap a DOM update in startViewTransition() and the browser takes a before/after screenshot of the page, then cross-fades between them automatically. Give matching elements the same view-transition-name and it morphs their position and size too, the effect libraries used to fake with cloned nodes and manual FLIP math.
The JS
function selectItem(id) {
if (!document.startViewTransition) {
setSelectedId(id);
return;
}
document.startViewTransition(() => {
flushSync(() => setSelectedId(id));
});
}How it works
Click a card to open its detail view, or switch between Grid and List: both trigger document.startViewTransition(callback). Inside the callback, the DOM (here, React state) updates synchronously; the browser diffs old and new frames and animates the difference.
Elements that share a view-transition-name across the old and new frame get their own mini transition, morphing shape and position instead of just cross-fading, which is why the clicked card visibly grows into the detail panel rather than popping in.
Chrome / Edge 111+, Safari 18+. Falls back to an instant swap elsewhere.