JavaScript Document activeViewTransition Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word ACTIVEVIEWTRANSITION

Definition

document.activeViewTransition is a read-only property that returns the ViewTransition currently active on the document, or null if none is running (MDN). It is a consistent way to re-read the active transition without saving the return value yourself.

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use document.activeViewTransition. Start with this line.

JavaScript
document.activeViewTransition
CallWhat it does
document.activeViewTransitionPrimary signature.

Built into the browser. Read or assign document.activeViewTransition — no import required.

Library declarations
JavaScript
document.activeViewTransition

Parameters

ParameterDescription
Writable?Optional. Read-only instance property

Return Value

Return ValueDescription
*ViewTransition or null (MDN)

JavaScript Examples

Example 1 — Feature-Detect and Idle null

Check support, then read the property when no transition is running.

JavaScript
const supported = "activeViewTransition" in Document.prototype;

console.log(supported);

if (supported) {
  console.log(document.activeViewTransition); // null when idle
} else {
  console.log("activeViewTransition not supported");
}
Try It Yourself

How It Works

  1. Detect the property on Document.prototype before reading it.
  2. Unsupported: treat that as normal and skip view-transition logic.
  3. Supported + idle: the value is null (MDN).
  4. Rule: never assume the property exists in every browser.

Example 2 — Start, Check Active, Await finished (MDN)

MDN pattern: start a transition, confirm it is active, then react when it finishes.

JavaScript
const box = document.getElementById("box");

function updateUI() {
  box.textContent = box.textContent === "Hello" ? "Goodbye" : "Hello";
}

if (typeof document.startViewTransition !== "function") {
  updateUI();
  console.log("fallback — instant update");
} else {
  document.startViewTransition(updateUI);

  if (document.activeViewTransition) {
    console.log("A view transition is currently active");
    document.activeViewTransition.finished.then(() => {
      console.log("View transition finished");
    });
  }
}
Try It Yourself

How It Works

  1. Share one updater so supported and unsupported paths stay in sync.
  2. Start with document.startViewTransition(updateUI).
  3. Re-read document.activeViewTransition without storing the return value (MDN).
  4. Await finished to run cleanup after the animation ends.

Example 3 — Same Object as the Return Value

While active, activeViewTransition matches what startViewTransition returned.

JavaScript
const box = document.getElementById("box");

if (typeof document.startViewTransition !== "function") {
  box.textContent = "Updated";
  console.log("Cannot compare — startViewTransition missing");
} else {
  const vt = document.startViewTransition(() => {
    box.textContent = "Updated";
  });

  console.log(document.activeViewTransition === vt); // true while active
}
Try It Yourself

How It Works

  1. Capture the return value from startViewTransition.
  2. Compare immediately with document.activeViewTransition.
  3. Same reference while the transition is in flight.
  4. Use either: store vt, or re-read the property from another module later.
Compatibility

Browser Support

Document.activeViewTransition is a browser View Transition API property. MDN marks it Experimental (CSS View Transitions Module Level 2). Support is newer than startViewTransition() — always feature-detect.

✓ Experimental · Limited

Document.activeViewTransition

ViewTransition or null for the active document-scoped transition. Check current browser tables and detect before use.

Ltd Experimental
Google Chrome Recent Chromium — feature-detect
Check
Microsoft Edge Follow Chromium — feature-detect
Check
Mozilla Firefox Recent versions — feature-detect
Check
Apple Safari Recent versions — feature-detect
Check
Opera Follow Chromium where available
Check
Internet Explorer No View Transition API
No
activeViewTransition Limited

Bottom line: Detect activeViewTransition and startViewTransition before use. Keep a plain DOM-update fallback. See the MDN activeViewTransition reference.

Frequently Asked Questions

MDN: a ViewTransition instance for the view transition currently active on the document, or null if none is active.
MDN marks Document.activeViewTransition as Experimental (CSS View Transitions Module Level 2). It is not Deprecated or Non-standard. Always feature-detect before use.
Yes. You read it to get the active ViewTransition (or null). You do not assign a transition to the property.
document.startViewTransition() starts a same-document transition and returns a ViewTransition. activeViewTransition lets you re-read that ongoing transition later without keeping your own reference (MDN).
When the document has no active view transition — before one starts, after it finishes, or if the property is unsupported.
Document.activeViewTransition is document-scoped. Element.activeViewTransition is for element-scoped transitions on a single element subtree.

Next: adoptedStyleSheets

Continue with adopting constructed CSSStyleSheet arrays on the document.

adoptedStyleSheets →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

JavaScript Document activeElement Property JavaScript Document adoptedStyleSheets Property