v140 · css

Element-scoped view transitions

Exposes element.startViewTransition() on arbitrary HTML elements. The element establishes a scope for the transition, which means that the transition pseudo-elements are affected by ancestor clips and transforms, and multiple transitions on separate elements can run concurrently.

concepts

  1. Element-scoped VT

    View Transitions can now be scoped to a single element subtree. Component animations no longer have to capture the whole page.

  2. Concurrent Components

    The composability motivation: two panels running their own scoped transitions simultaneously. Fire both at once and they animate independently — pre-140 they would have collided on the document.

  3. Clipped Card

    A rotated, clipped frame whose contents swap during an element-scoped VT. The snapshot stays inside its ancestor clip and transform; document-scoped VT lifts it to the top layer instead.

  4. Parallel Widgets

    Three dashboard widgets, three concurrent element-scoped transitions. Single-transition-per-page is gone — each widget animates independently.

  5. List Reorder

    A vote leaderboard using view-transition-class to apply one CSS rule across many uniquely-named rows. Upvote and watch the row physically swap.

why it shipped

View transitions are currently a "global" document-level concept, which means components cannot use transitions without sacrificing composability. For more details, see the explainer.

references