v140 · css

Nested view transitions groups

Allow view-transitions to generate a nested pseudo-element tree rather than a flat one. This allows the view transition to appear more in line with its original elements and visual intent, as it enables clipping, nested 3D transforms, and proper application of effects like opacity, masking and filters.

concepts

  1. Nested VT Groups

    View Transitions support nested groups — a parent transition can wrap children, sharing animation properties along the chain. Enables complex element compositions.

  2. Clipped Card Flip

    The clipping motivation: an inner badge + back-face that would escape the card under flat-tree captures. With nested groups they stay inside the card's clip.

  3. Three Deep

    Three-level nested transition with contain at every layer. The rotated outer wrapper continues to clip and rotate the middle and inner snapshots during the swap.

  4. Route Shell

    App-shell pattern where only the right pane animates: the nav and shell stay put because the route-content transition is contained inside the content pane's group.

  5. contain vs normal

    Side-by-side comparison: normal promotes nested snapshots to the root; contain keeps them inside the parent's pseudo subtree. Same markup, two behaviours.

why it shipped

Flat-tree view transitions, as available today, are limited: they don't work correctly and don't provide the full set of expression features with regards to clipping, 3D transforms, masking and filter effects, as those work differently on a flat tree and on a hierarchical tree. By representing the captured elements by a nested tree we let authors apply those CSS features correctly on the view transition pseudo-elements, resulting in view transitions that are both more visually correct and contain the entire set of CSS visual expressions.

references