JavaScript Element getAnimations() Method

What You’ll Learn

Element.getAnimations() is an instance method from the Web Animations API. It returns an array of Animation objects affecting the element—CSS animations, transitions, and JavaScript animate() calls. Learn subtree and pseudoElement options, controlling playback, and five try-it labs.

Introduction

When you call animate(), the browser creates an Animation and starts playing it. But elements can also animate from CSS @keyframes, transition, or multiple overlapping effects.

getAnimations() gives you one array of every Animation currently targeting the element. From there you can pause(), cancel(), or await animation.finished before updating the DOM.

This page is part of JavaScript Element. Pair it with animate() for the full Web Animations workflow.

Understanding the getAnimations() Method

Calling el.getAnimations(options) queries the browser’s animation engine for effects tied to el. Each entry is a live Animation object you can control.

• It is an instance method on Element.
• Covers CSS animations, CSS transitions, and Web Animations.
• Optional { subtree: true } includes descendant animations and pseudo-elements.
• Optional { pseudoElement: "::after" } filters to one pseudo-element.
• Returns an array—use .length, forEach, or map.
• Invalid pseudoElement selectors throw an exception (MDN).

📝 Syntax

General forms of Element.getAnimations (MDN):

getAnimations()
getAnimations(options)

Parameters

• options (optional) — an object with:
  • subtree — if true, include animations on descendants and their pseudo-elements. Default false.
  • pseudoElement — a string such as "::after" to target a pseudo-element.

Return value

An array of Animation objects targeting the element (per options).

Common patterns

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

// List animations on this element only
const anims = el.getAnimations();
console.log(anims.length);

// Include descendants
const all = el.getAnimations({ subtree: true });

// Pause every animation on the element
el.getAnimations().forEach((a) => a.pause());

// Wait for all, then remove (MDN)
Promise.all(
  el.getAnimations({ subtree: true }).map((a) => a.finished)
).then(() => el.remove());

Examples Gallery

Examples follow MDN Element.getAnimations() patterns. Use View Output or Try It Yourself for each case.

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

box.animate(
  [{ transform: "translateX(0)" }, { transform: "translateX(100px)" }],
  { duration: 2000, fill: "forwards" }
);

const anims = box.getAnimations();
console.log(anims.length);        // 1
console.log(anims[0].playState);  // "running"

1
running

const box = document.getElementById("box");
// box has CSS: animation: pulse 2s infinite;

const anims = box.getAnimations();
console.log(anims.length >= 1);           // true
console.log(anims[0].effect.timing.duration); // 2000

true
2000

const parent = document.getElementById("parent");
const child = document.getElementById("child");

child.animate([{ opacity: 1 }, { opacity: 0.5 }], { duration: 1000, iterations: Infinity });

console.log(parent.getAnimations().length);                  // 0
console.log(parent.getAnimations({ subtree: true }).length);   // 1

0
1

const elem = document.getElementById("panel");

Promise.all(
  elem.getAnimations({ subtree: true }).map((animation) => animation.finished)
).then(() => {
  elem.remove();
  console.log("removed after animations");
});

removed after animations

const box = document.getElementById("box");
box.animate([{ transform: "scale(1)" }, { transform: "scale(1.2)" }], {
  duration: 800,
  iterations: Infinity,
  direction: "alternate"
});

box.getAnimations().forEach((a) => a.pause());

console.log(box.getAnimations()[0].playState);
// "paused"

paused

🚀 Common Use Cases

• Pausing UI motion when the user toggles “reduce motion”.
• Waiting for exit animations before removing a modal or toast.
• Debugging how many effects overlap on one element.
• Coordinating CSS and JavaScript animations on the same node.
• Targeting pseudo-element animations with pseudoElement (with fallbacks).
• Building animation utilities that wrap animate() and getAnimations().

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available, July 2020).
• Includes CSS animations, CSS transitions, and Web Animations (MDN).
• Empty array means no matching animations at query time.
• pseudoElement support varies—MDN shows a subtree filter fallback.
• See also Document.getAnimations() for document-wide queries.
• Related: animate(), computedStyleMap(), checkVisibility(), JavaScript hub.

💡 Best Practices