demo · v142

Element-scoped activeViewTransition

CSS View Transitions Level 2 splits the API into two axes: document.startViewTransition() sets document.activeViewTransition, while element.startViewTransition() sets element.activeViewTransition independently. Click each stage to start a scoped transition and watch which property lights up in the live readout.

Probing document.activeViewTransition…
Probing element.startViewTransition…
Level 1 · document.startViewTransition()
State A
click to transition
document.activeViewTransition null
el.activeViewTransition null
Level 2 · element.startViewTransition()
State A
click to transition
document.activeViewTransition null
el.activeViewTransition null

Two-axis design (View Transitions Level 2)

Level 1 (Chrome 111+)
document.startViewTransition(cb)
Sets document.activeViewTransition. Transitions the whole page. Only one active at a time on the document.
Level 2 (Chrome 126+)
element.startViewTransition(cb)
Sets element.activeViewTransition. Scoped to the subtree. Multiple elements can transition concurrently — each has its own activeViewTransition.

document.activeViewTransition is set by document-level transitions only. An element-scoped transition leaves document.activeViewTransition as null, and document.startViewTransition() leaves element.activeViewTransition as null.

see also