JavaScript Element activeViewTransition Property

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

Definition

Element.activeViewTransition is a read-only property that returns the ViewTransition currently active on that element, or null if none (MDN). Use it to access an element-scoped transition later without saving the return value of startViewTransition().

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

Syntax

Use el.activeViewTransition. Start with this line.

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

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

Library declarations
JavaScript
element.activeViewTransition

Parameters

ParameterDescription
Writable?Optional. Read-only (MDN)

Return Value

Return ValueDescription
*The current value of el.activeViewTransition.

JavaScript Examples

Example 1 — Feature Detect

Check the property and method before using them.

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

const hasProp = "activeViewTransition" in el;
const hasMethod = typeof el.startViewTransition === "function";

console.log(hasProp, hasMethod);
// e.g. true true — or false false
Try It Yourself

How It Works

  1. Pick an element. The property lives on Element.
  2. Test with in. Safer than reading when unsupported.
  3. Also detect startViewTransition. Needed to create a transition.
  4. Fallback: update the DOM without a view transition.

Example 2 — Start + Read (MDN)

Start a transition, then read activeViewTransition.

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

el.startViewTransition(() => {
  el.textContent = "Updated";
});

// While still ongoing (MDN):
console.log(el.activeViewTransition);
// → ViewTransition (or null if already finished)
Try It Yourself

How It Works

  1. Call startViewTransition. Starts an element-scoped VT.
  2. Callback updates the DOM inside that element’s scope.
  3. Read the property to get the live ViewTransition (MDN).
  4. No need to store the return value if you only need it later.

Example 3 — Idle Is null

Before or after a transition, the property is null.

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

console.log(el.activeViewTransition); // null (idle)

if (typeof el.startViewTransition === "function") {
  const vt = el.startViewTransition(() => {
    el.textContent = "B";
  });
  vt.finished.then(() => {
    console.log(el.activeViewTransition); // null again
  });
}
Try It Yourself

How It Works

  1. Idle first. No active transition → null.
  2. Start one. May briefly be a ViewTransition.
  3. Await finished. When done, the property clears.
  4. Always null-check before calling methods on the value.
Compatibility

Browser Support

Element.activeViewTransition is Experimental with Limited availability on MDN (not Baseline). Feature-detect and treat null / missing support as the normal fallback path.

✓ Experimental · Limited

Element.activeViewTransition

Read the active element-scoped ViewTransition — limited support.

— Limited
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
activeViewTransition Limited

Bottom line: Detect "activeViewTransition" in el. Pair with Element.startViewTransition(). Expect null when idle or when the API is missing.

Frequently Asked Questions

A ViewTransition instance for the view transition currently active on that element, or null if none is active (MDN).
MDN marks Element.activeViewTransition as Experimental and Limited availability (not Baseline). It is not Deprecated or Non-standard.
Yes. You read it to get the active ViewTransition (or null). You do not assign a transition to the property.
Element.startViewTransition() starts an element-scoped transition and returns a ViewTransition. activeViewTransition lets you read that ongoing transition later without keeping your own reference (MDN).
When the element has no active view transition — before one starts, after it finishes, or if the API is unsupported.
Related idea, different scope. Document.activeViewTransition is for document-scoped transitions. Element.activeViewTransition is for element-scoped transitions on that element.

Next: ariaActiveDescendantElement

Learn the Element property for aria-activedescendant targeting.

ariaActiveDescendantElement tutorial →

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)

9 people found this page helpful

JavaScript Element startViewTransition() Method JavaScript Element ariaActiveDescendantElement Property