Hide and Seek

The much-anticipated nested view transition groups are already defined in the Level 2 spec, but to my knowledge they are not yet supported by any browser.

Tree Clipping

One intriguing aspect of nested view transition groups is their potential for clipping images within grouped elements. Currently, you can clip images within a single group, but that’s limited to one or two images at a time. Nested groups, however, would allow clipping all the images further down the hierarchy.

The primary use case

Clipping descendants can be handy for example if you want to sort the element of a list that has a scrollbar. Currently, when you assign view transition names to the list elements and start a view transition, their images will all be shown in the view transition layer. Even if they were hidden in the original list.

Clipping descendant elements becomes especially useful when working with scrollable lists. Today, if you apply view transition names to the items within a scrollable list, all list items will be thrown into the view transition layer even those initially hidden. With nested view transition groups animated list elements kan be kept inside the viewable part of the list.

Naive Scrollable List

Here is a demo of what you get with the naive approach.

Playing Hide & Seek

And this is what I got so far as a solution.