Part 2 of a series on cross-document view transitions tackles the scaling problem: how to animate hundreds of elements without an explosion of CSS selectors. The key insight is the distinction between `view-transition-name` (unique identity per element) and `view-transition-class` (shared styling hook), which lets a single CSS rule handle thousands of products. The post also covers just-in-time name assignment via `pageswap`/`pagereveal` events to avoid snapshotting every element on every navigation, practical patterns for photo galleries, tab transitions, and infinite scroll, and a strong emphasis on gating all animations behind `prefers-reduced-motion: no-preference`. Browser support (Chrome, Edge, Safari 18.2+) and progressive enhancement behavior for unsupported browsers are also addressed. A future CSS `ident()` function that would solve the naming problem in pure CSS is previewed but not yet available.
Sort: