Cross-Document View Transitions: Scaling Across Hundreds of Elements | CSS-Tricks

Deprecated meta tags can silently fail, and a fixed four-second timeout can terminate transitions without clear feedback. Image aspect ratio changes can distort visuals, turning layout morphs into unintended shapes. Pagereveal and pageswap events provide lifecycle hooks for view transitions. After achieving a single element transition, scaling to many elements like product cards reveals additional complexity. A scalable approach uses CSS to generate unique view-transition-name values per element by combining ident() with sibling-index(). This same pattern can apply to scroll-timeline-name, container-name, and view-timeline-name. sibling-index() is available in Chrome 138, while ident() is still missing, with an intent to prototype noted for May 2025.

"In a perfect world, you'd solve the scaling problem with pure CSS. No JavaScript. No server-side loops. Just this: .card { /* Generates card-1, card-2, card-3, etc. automatically */ view-transition-name: ident("card-" sibling-index()); } That's - a CSS function proposed by Bramus (who works on Chrome) to the CSS Working Group. It takes strings, integers, or other identifiers, concatenates them, and spits out a valid CSS name. Pair it with sibling-index(), which returns an element's position among its siblings (1, 2, 3...), and you get auto-generated unique names for every element in a list. One rule. Works for 10 cards or 10,000. The CSS doesn't care."

"And it's not just view transitions. The same pattern works for scroll-timeline-name, container-name, view-timeline-name - anywhere you need unique identifiers at scale. You could even pull names from HTML attributes with attr() instead of sibling-index(), constructing identifiers like ident("--item-" attr(id) "-tl"). The flexibility is real."

"Here's the thing: half of this equation already exists. sibling-index() shipped in Chrome 138 - you can use it today for things like staggered animations and calculated styles. The missing piece is ident(). There's a Chrome Intent to Prototype from May 2025, w"

"All of that gets you from "nothing works" to "one element transitioning nicely between two pages." Which feels great. For about five minutes. Then you try to build a product listing page with 48 cards that each need to morph into a detail view, and you realize the tutorials left out the hard part. This is where it gets real. Let's scale this thing."

Read at CSS-Tricks