JavaScript Element activeViewTransition Property

What You’ll Learn

Element.activeViewTransition is a read-only instance property that returns the ViewTransition currently active on an element, or null if none is running. Learn why it exists next to Element.startViewTransition(), how to feature-detect it, and how it differs from document-scoped transitions—with five examples and try-it labs.

Introduction

The View Transition API can animate DOM updates. With element-scoped transitions you call element.startViewTransition(callback) so only that element’s subtree is captured—the rest of the page can stay interactive.

Sometimes you start a transition in one function and later need the same ViewTransition object (for example to call skipTransition() or await finished). MDN: activeViewTransition gives a consistent way to read the active transition without saving the return value yourself.

const box = document.querySelector(".my-element");
console.log(box.activeViewTransition); // null when idle (if supported)

Understanding the Property

MDN: the activeViewTransition read-only property of the Element interface returns a ViewTransition instance representing the view transition currently active on an element.

• Read-only — you read it; you do not assign to it.
• Value — ViewTransition while active, otherwise null.
• Experimental — Limited availability (not Baseline) on MDN.
• Pair with — Element.startViewTransition() for element-scoped transitions.

📝 Syntax

activeViewTransition

Value

A ViewTransition, or null if the element has no active view transition.

⚖️ Element vs Document scope

Element-scoped transitions are useful for cards, lists, and widgets that animate without freezing the whole page. Always confirm both startViewTransition and activeViewTransition exist on your target.

🔗 With Element.startViewTransition()

MDN’s basic example starts a transition, then notes you can read activeViewTransition while it is still ongoing:

const myElement = document.querySelector(".my-element");

function handleVT() {
  const vt = myElement.startViewTransition(() => {
    // updateDOMSomehow();
  });
}

// Returns a reference to vt if the transition is still ongoing
myElement.activeViewTransition;

Examples Gallery

Examples follow MDN Element: activeViewTransition. Labs feature-detect first. Starting a real transition needs a supporting browser and Element.startViewTransition.

console.log({
  hasActiveViewTransition: "activeViewTransition" in Element.prototype,
  hasStartViewTransition: typeof Element.prototype.startViewTransition === "function",
  tip: "Element.activeViewTransition is experimental — feature-detect first."
});

{
  "hasActiveViewTransition": true,
  "hasStartViewTransition": true,
  "tip": "Element.activeViewTransition is experimental — feature-detect first."
}

const el = document.createElement("div");
document.body.appendChild(el);

if (!("activeViewTransition" in el)) {
  console.log("activeViewTransition not supported");
} else {
  console.log({
    activeViewTransition: el.activeViewTransition,
    note: "null means no element-scoped transition is active"
  });
}

{
  "activeViewTransition": null,
  "note": "null means no element-scoped transition is active"
}

const myElement = document.createElement("div");
myElement.textContent = "Hello";
document.body.appendChild(myElement);

if (typeof myElement.startViewTransition !== "function") {
  console.log("startViewTransition not supported; update DOM without VT");
  myElement.textContent = "Updated";
} else {
  myElement.startViewTransition(() => {
    myElement.textContent = "Updated";
  });
  console.log({
    hasActive: myElement.activeViewTransition != null,
    constructorName: myElement.activeViewTransition
      ? myElement.activeViewTransition.constructor.name
      : null
  });
}

{
  "hasActive": true,
  "constructorName": "ViewTransition"
}
// or: startViewTransition not supported; update DOM without VT

const el = document.createElement("section");
document.body.appendChild(el);

if (typeof el.startViewTransition !== "function") {
  console.log("Cannot compare — startViewTransition missing");
} else {
  const vt = el.startViewTransition(() => {
    el.dataset.state = "b";
  });
  console.log({
    sameReference: el.activeViewTransition === vt,
    tip: "Store vt or re-read activeViewTransition later"
  });
}

{
  "sameReference": true,
  "tip": "Store vt or re-read activeViewTransition later"
}

console.log({
  elementProp: "activeViewTransition" in Element.prototype,
  elementStart: typeof Element.prototype.startViewTransition,
  documentProp: "activeViewTransition" in Document.prototype,
  documentStart: typeof document.startViewTransition,
  documentActiveNow: document.activeViewTransition ?? null,
  status: "Element.activeViewTransition is experimental (element-scoped VT)"
});

{
  "elementProp": true,
  "elementStart": "function",
  "documentProp": true,
  "documentStart": "function",
  "documentActiveNow": null,
  "status": "Element.activeViewTransition is experimental (element-scoped VT)"
}

🚀 Common Use Cases

• Skip or finish an in-flight element-scoped transition from another module.
• Await finished / ready without threading the return value everywhere.
• Guard UI actions while activeViewTransition != null.
• Teaching element-scoped vs document-scoped View Transitions.
• Debugging whether a widget still has an active transition.

🔧 How It Works

📝 Notes

• Experimental and Limited availability (MDN)—experimental banner shown above.
• Not Deprecated or Non-standard on MDN.
• Read-only; value is ViewTransition or null.
• Different from document.activeViewTransition (document scope).
• Related: startViewTransition(), Node, EventTarget, JavaScript hub.

💡 Best Practices