https://kizu.dev/tree-counting-and-random/

Thanks!

That way you can transition h1#big-title on page A to page B because it will get a view-transition-name of big-title.

If that’s just how view-transition-name: auto worked I wouldn’t be mad about it 🙂

Here’s some answers to the questions you have:

• Unique View Transition Names vs MPA:

Correct, auto-generated names won’t play nice with MPA indeed because you get different nodes. Therefore we are also looking into giving you a way to create a view-transition-name that uses the value from the HTML id attribute. That way you can transition h1#big-title on page A to page B because it will get a view-transition-name of big-title.

• Access to Custom Properties in the VT pseudos:

The snapshots are nothing but pixels on a screen. As a result you can’t do things like color: red on a vt-pseudo. Same goes for access to custom properties of the original element: in the vt-pseudo you get a pixel representation, not the actual element. I cover this in my View Transition talks. See this clip, for example: https://www.youtube.com/clip/UgkxAtyHsIZJsTW17ERXGTK21GuPt_e2czg0

• Staggering with sibling-index():

You will be able to use sibling-index() on the ::view-transition-group pseudos. Combined with the upcoming layered capturing mode, you’ll be able to easily stagger the animations using just that.

• Overflow bummer:

The new layered capturing mode will solve that. See https://codepen.io/bramus/pen/GRVRjYE for a demo (try it in Chrome Canary)

• DevTools:

You can also pause the animations before they start 😉

Feel free to ping me on any occasion should you have questions about View Transitions (and other CSS things).