JavaScript Document getAnimations() Method

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

Definition

document.getAnimations() returns an array of Animation objects currently in effect on descendants of the document — including CSS Animations, CSS Transitions, and Web Animations (MDN).

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

Syntax

Call document.getAnimations. Start with this line.

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

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

Library declarations
JavaScript
document.getAnimations()

Parameters

This member has no parameters beyond those shown in the signature.

Return Value

Return ValueDescription
*Animation[] currently in effect

JavaScript Examples

Example 1 — Count Animations

Start a Web Animation, then read how many are in effect on the document.

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

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

const list = document.getAnimations();
console.log(list.length);           // at least 1
console.log(list[0].playState);     // "running"
Try It Yourself

How It Works

  1. Create a target. Append an element so it is in the document.
  2. Start WAAPI. animate() returns an Animation that stays in effect.
  3. List the page. getAnimations() includes that animation.
  4. Inspect state. playState is often "running" while looping.

Example 2 — Halve Every playbackRate

MDN pattern: slow all in-effect animations at once.

JavaScript
const el = document.createElement("div");
document.body.appendChild(el);
el.animate([{ transform: "none" }, { transform: "translateX(20px)" }], {
  duration: 1000,
  iterations: Infinity
});

document.getAnimations().forEach((animation) => {
  animation.playbackRate *= 0.5;
});

console.log(document.getAnimations()[0].playbackRate); // 0.5
Try It Yourself

How It Works

  1. Start an animation. Default rate is 1.
  2. List all. getAnimations() returns every in-effect item.
  3. Mutate rates. Multiply each playbackRate by 0.5.
  4. Verify. Reading the array again shows the new rate.

Example 3 — Document vs Element Scope

Compare whole-document listing with a single element’s animations.

JavaScript
const a = document.createElement("div");
const b = document.createElement("div");
document.body.appendChild(a);
document.body.appendChild(b);

a.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 3000, iterations: Infinity });
b.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 3000, iterations: Infinity });

console.log(document.getAnimations().length); // 2 (or more if page has others)
console.log(a.getAnimations().length);        // 1
console.log(b.getAnimations().length);        // 1
Try It Yourself

How It Works

  1. Animate two nodes. Each gets its own Animation.
  2. Document list. Sees both (plus any other page animations).
  3. Element list. a.getAnimations() only sees a’s animations.
  4. Choose scope. Global controls → Document; local → Element.
Compatibility

Browser Support

Document.getAnimations() is part of the Web Animations API. MDN lists it as Baseline Widely available (since September 2020).

✓ Baseline · Web Animations

Document.getAnimations()

Supported in modern Chrome, Firefox, Safari, and Edge. Safe for listing and controlling in-effect Animation objects.

99% Universal API
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
getAnimations() Excellent

Bottom line: Safe for document-wide animation inspection. See the MDN getAnimations() reference.

Frequently Asked Questions

It returns an array of all Animation objects currently in effect whose target elements are descendants of the document. This includes CSS Animations, CSS Transitions, and Web Animations.
No. MDN marks Document.getAnimations() as Baseline Widely available (since September 2020). It is not Deprecated, Experimental, or Non-standard.
An Array of Animation objects, each representing one animation currently associated with descendant elements of the Document.
No. Document.getAnimations() has no parameters. Element.getAnimations() can take an options object such as { subtree: true }.
Document.getAnimations() lists animations across the whole document. Element.getAnimations() is scoped to one element (optionally including its subtree).
Common controls include playbackRate, play(), pause(), cancel(), and awaiting animation.finished. MDN’s example halves every animation’s playbackRate.

Next: getElementById()

Learn document.getElementById() — the classic way to select one element by id.

getElementById() 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)

11 people found this page helpful

JavaScript Document exitPointerLock() Method JavaScript Document getElementById() Method