v147 · JavaScript · CSS

Element-scoped view transitions

Call element.startViewTransition() on any HTML element to scope a transition to its subtree — multiple transitions run concurrently and the rest of the page stays fully interactive.

concepts

  1. Concurrent Shuffle

    Two independent card lists that can be shuffled at the same time. Hit both "Shuffle" buttons quickly — both animate without blocking each other, because each list owns its own transition scope.

  2. Live Feed

    Three news-feed columns, each auto-refreshing on its own interval. All three can be mid-transition simultaneously. Pause and resume each feed independently to see the scoping at work.

  3. Panel Switcher

    A sidebar navigation + content panel. Clicking a nav item transitions only the content area — the sidebar and page controls remain fully interactive during the animation, even if you trigger another switch before the first one finishes.

  4. FAQ Accordion

    An FAQ accordion where each item transitions independently via element.startViewTransition(). Expand two items in rapid succession — both animate concurrently on their own scopes. Disable transitions to compare the bare CSS max-height expand.

  5. Compatibility Lab

    Probes Element.startViewTransition, document.startViewTransition, and the CSS @view-transition at-rule via feature detection. A live two-panel test fires both lists in rapid succession — confirming whether concurrent element-scoped transitions actually work. Provides the three-tier fallback pattern: element VT → document VT → instant update.

why it shipped

document.startViewTransition(), introduced in Chrome 111, freezes the entire page while capturing the before/after snapshots. That means: only one transition can run at a time, elements outside the transitioning region become unresponsive, and position-fixed overlays interfere with the effect. Element-scoped transitions fix all three. The scope element and its descendants are snapshotted; everything outside remains live. Because scopes are independent, multiple transitions on separate parts of the DOM can run concurrently — which unlocks real-time dashboards, split-view carousels, and feed-based UIs where several independent regions update at once.

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗