Post

Bramus
@bram.us

Did you know it's called the View Transition API (and not the View Transitions API [plural])? Now MDN knows too (github.com/mdn/content/...) so there's no reason to keep using the wrong name. Learn about this and other misconceptions in this post: developer.chrome.com/blog/view-tr...

developer.chrome.comMisconceptions about view transitions  |  Blog  |  Chrome for DevelopersWith more and more people starting to look into the View Transition API, it's time to debunk some misconceptions.
zubiden
@zubiden.bsky.social

Is it possible for multiple elements to share a single snapshot? In lists, having 50 separate snapshots doing the same animation seems far heavier than using one shared snapshot for all. Doing grouping using DOM requires reflow :(

Bag of Tricks for View Transitions
@vtbag.dev

Not sure if I understand the question correctly, but if you set the view transition name on the list and do not have view transition names on the list elements, there will only be one snapshot for the whole list.

0 reposts1 like

Bramus
@bram.us

This is inherent to animating X elements. The same invalidation/recalc happens when trying to achieve the same effect with non-VT animations.

zubiden
@zubiden.bsky.social

Yep, and the usual optimization is to wrap element groups into a div, animate it instead, and then remove that wrapper. VT snapshot logic could be a great alternative to wrapping/unwrapping process, but sadly, it isn’t :(

Bramus
@bram.us

You can apply the same optimization to the View Transitions-powered implementation: wrap things in a div and give the wrapper a view-transition-name. (But do know that this workaround only works when things don't reflow)