View transition

For years this was the expensive kind of animation. Moving a thumbnail into a detail view meant measuring both positions, cloning the element, animating the clone over the top of everything, and removing it at the right moment, all while keeping the real DOM in a state nobody could see. The pattern was common enough to have a name, shared element transition, and rare enough in practice that most products skipped it.

The browser does the bookkeeping now. document.startViewTransition(callback) photographs the current page, runs the callback that changes the DOM, photographs the result, and cross-fades between the two. Anything you want treated as a continuous object rather than as part of the background gets a view-transition-name, and the two photographs of that name are matched and animated from one to the other. A name may only be worn by one element at a time, which is the rule most first attempts break: the name moves from the old element to the new one, it is never held by both.

It is worth keeping the two halves of the word apart. The transition is the change between views; easing is the shape of the movement inside it, and stagger is what you reach for when many things arrive at once rather than one thing persisting. A view transition is the opposite claim: this element did not appear, it was already here.

Motion this large is also motion that can make people ill, so a view transition answers prefers-reduced-motion like any other. The views still swap, because the swap is the function; the browser is simply not asked to animate between them.