demo · v140

Concurrent Components

The chromestatus motivation: document-level transitions block composability — you can only run one at a time, and any other component on the page freezes during it. Element-scoped transitions let independent components transition independently, even simultaneously.

panel a — its own scope

A · slide 1

panel b — its own scope

B · slide 1
Element-scoped transitions: probing…
// pre-140 — global, blocks every other component
document.startViewTransition(() => updatePanel(a));
// panel B can't transition at the same time

// Chrome 140 — element-scoped
zoneA.startViewTransition(() => updatePanel(a));
zoneB.startViewTransition(() => updatePanel(b));
// both run independently

The composability story: a third-party component shipped on your page can now own its own transitions without colliding with yours. No coordination needed. The pseudo-elements participate in the ancestor's clip and transform context, so a transitioning card inside a scrolling container behaves correctly.

see also