demo · v142

External Skip & Observe

Before Chrome 142 the only place you could call .skipTransition() on a running view transition was from the caller that started it. With document.activeViewTransition, any module — a back-button handler, an analytics layer, an accessibility prefers-reduced-motion watcher — can reach into the live transition and skip it, or just observe its lifecycle without holding the original handle.

Two-panel swap, deliberately slow (1.8s)

Panel A

First state of A

Panel B

First state of B

activeViewTransitionnull

ready—

finished—

updateCallback—

relevant markup

// Module A — start the transition
document.startViewTransition(() => mutateDom());

// Module B (totally separate) — read and act on the live transition
const vt = document.activeViewTransition;
if (vt) {
  // observe
  vt.ready.then(() => console.log("ready"));
  vt.finished.then(() => console.log("finished"));
  // or skip on demand
  vt.skipTransition();
}

why this is useful

Back-button handling. A popstate listener doesn't own the transition that's running, but it can short-circuit it before navigating.
Reduced motion. An a11y module watching matchMedia("(prefers-reduced-motion: reduce)") can skip every transition it sees flip on, without coordinating with each call site.
Telemetry. A logger can attach to ready/finished from outside, without monkey-patching startViewTransition.

Two-panel swap, deliberately slow (1.8s)

Panel A

Panel B

relevant markup

why this is useful

see also