v156 · :navigation-source · view transitions

Thumbnail view transition

The use case that motivated the feature. To morph a clicked thumbnail into a detail hero, the thumbnail needs a view-transition-name — but only the clicked one, and only for this navigation. Today that is JavaScript: set the name on click, start the transition, clean the name up afterwards. On Chrome 156 it is one declaration: a:navigation-source .thumb { view-transition-name: hero }.

Open a photo

Aurora, Tromsø

← Back to gallery

Transition log

  1. No transitions yet.

The two implementations

/* Chrome 156 — the whole naming step: */
a:navigation-source .thumb { view-transition-name: hero; }
.detail .hero              { view-transition-name: hero; }

/* Today's pattern (runs here as the labelled fallback):     */
/* click → thumb.style.viewTransitionName = 'hero'           */
/*       → document.startViewTransition(update)              */
/*       → transition.finished.then(clean up the name)       */

The forward morph is the selector's job: while the navigation runs, the clicked link matches, so its thumbnail carries the name in the old snapshot and the hero carries it in the new one. The return trip's naming (hero back to a specific thumbnail) is done by script in both lanes here — the source of the back-navigation is the back link, not the thumbnail — and the log labels every step with which mechanism did the naming.

see also