JavaScript Element getAnimations() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word GETANIMATIONS

Definition

The Element.getAnimations() method returns an array of Animation objects that affect this element now, or are scheduled to (MDN). That includes CSS animations, CSS transitions, and Web Animations from animate().

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call el.getAnimations. Start with this line.

JavaScript
el.getAnimations(options?)
CallWhat it does
el.getAnimations(options?)Primary signature.
el.getAnimations(...)Call with the arguments your case needs.

Built into the browser. Call getAnimations(...) on an Element — no import required.

Library declarations
JavaScript
el.getAnimations(options?)

Parameters

ParameterDescription
options.subtreeOptional. true = include descendants (default false)
options.pseudoElementOptional. Target like "::after"

Return Value

Return ValueDescription
*Animation[]

JavaScript Examples

Example 1 — Count Animations

Start a Web Animation, then ask how many are on the element.

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

el.animate(
  [{ opacity: 1 }, { opacity: 0.2 }, { opacity: 1 }],
  { duration: 2000, iterations: Infinity }
);

out.textContent = "count: " + el.getAnimations().length;
Try It Yourself

How It Works

  1. Create with animate(). That returns an Animation already playing.
  2. Call getAnimations(). Lists animations affecting this element.
  3. Read .length. One call to animate() → usually one entry.
  4. Empty means idle. No matching animations → [].

Example 2 — Pause All

Loop the array and pause every Animation.

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

el.animate(
  [{ transform: "translateX(0)" }, { transform: "translateX(40px)" }],
  { duration: 1500, iterations: Infinity }
);

el.getAnimations().forEach((a) => a.pause());
out.textContent = "paused: " + el.getAnimations().length;
Try It Yourself

How It Works

  1. Start motion. Infinite iteration keeps it in the list.
  2. Fetch the array. getAnimations() gives live Animation objects.
  3. Call pause(). Each animation freezes at its current time.
  4. Resume later. Use play() on the same objects when needed.

Example 3 — Wait for Finished

MDN pattern: await every animation (including subtree), then continue.

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

el.animate(
  [{ opacity: 1 }, { opacity: 0 }],
  { duration: 800, fill: "forwards" }
);

Promise.all(
  el.getAnimations({ subtree: true }).map((a) => a.finished)
).then(() => {
  out.textContent = "all finished";
});
Try It Yourself

How It Works

  1. Start a finite animation. Duration ends → finished settles.
  2. Use subtree: true. Include child animations too (MDN).
  3. Map to finished. Each promise resolves when that animation ends.
  4. Then continue. Safe place to remove nodes or update UI.
Compatibility

Browser Support

Element.getAnimations() is Baseline Widely available on MDN (across browsers since July 2020). It is not Deprecated, Experimental, or Non-standard. Some option details (for example pseudoElement) may vary — check your target browsers.

✓ Baseline Widely available

Element.getAnimations()

List CSS and Web Animations affecting an element. Widely available since 2020.

2020+ Widely available
Google Chrome 84+
Supported
Mozilla Firefox 75+
Supported
Apple Safari 13.1+
Supported
Microsoft Edge 84+
Supported
Opera 70+
Supported
Internet Explorer Not supported
Unavailable
getAnimations() Baseline

Bottom line: Safe for modern browsers. Pair with animate() to create, then getAnimations() to inspect and control.

Frequently Asked Questions

It returns an array of Animation objects that currently affect the element, or are scheduled to (MDN). This includes CSS animations, CSS transitions, and Web Animations from animate().
No. MDN marks Element.getAnimations() as Baseline Widely available (across browsers since July 2020). It is not Deprecated, Experimental, or Non-standard.
An array of Animation instances. An empty array means nothing matches your options right now.
Pass { subtree: true } to also include animations on descendants and their pseudo-elements. Defaults to false (MDN).
animate() creates and plays a new animation. getAnimations() lists animations already affecting the element so you can pause, cancel, or await animation.finished.
The document-level method returns all animations in the document. Element.getAnimations() is scoped to one element (plus optional subtree).

Next: getAttribute()

Read the value of an HTML attribute on an element.

getAttribute() →

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)

20 people found this page helpful

JavaScript Element computedStyleMap() Method JavaScript Element getAttribute() Method