JavaScript Document getAnimations() Method

What You’ll Learn

document.getAnimations() is an instance method that returns every Animation currently in effect under the document (see MDN Document: getAnimations()). Learn what the array contains (CSS animations, transitions, and Web Animations), how to change playbackRate, pause or cancel everything, how it compares to Element.getAnimations(), and five try-it labs.

Introduction

Pages mix motion from many sources: CSS @keyframes, CSS transitions, and JavaScript element.animate(). The Web Animations API unifies them as Animation objects you can inspect and control.

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

Related tutorials: Element.getAnimations(), exitPointerLock(), parseHTML().

Understanding document.getAnimations()

An instance method on the page’s document object (also defined for ShadowRoot in the Web Animations spec; MDN Document page).

• Parameters — none (MDN).
• Return value — an Array of Animation objects (MDN).
• Targets — animations whose target elements are descendants of this document (MDN).
• Sources — CSS Animations, CSS Transitions, and Web Animations (MDN).
• Empty array — nothing is currently animating under the document.
• Scoped cousin — element.getAnimations() for one element (optional subtree).

📝 Syntax

General form of Document.getAnimations (MDN):

getAnimations()

Parameters

None (MDN).

Return value

An Array of Animation objects, each representing one animation currently associated with descendant elements of the Document (MDN).

MDN example (slow everything down)

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

That snippet halves the speed of every current animation on the page by multiplying Animation.playbackRate by 0.5 (MDN).

⚖️ Document vs Element getAnimations()

Examples Gallery

Examples follow MDN Document: getAnimations() and practical Web Animations patterns for beginners.

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

console.log(
  document.getAnimations().map((a) => a.playbackRate)
);

[0.5]
(or one half-rate value per running animation)

const anims = document.getAnimations();
console.log("count:", anims.length);
console.log(
  anims.map((a) => a.playState).join(", ") || "(none)"
);

count: 1
running

document.getAnimations().forEach((animation) => {
  animation.pause();
});

console.log(
  document.getAnimations().map((a) => a.playState).join(", ")
);

paused

document.getAnimations().forEach((animation) => {
  animation.cancel();
});

console.log("remaining:", document.getAnimations().length);

remaining: 0

const box = document.getElementById("box");
box.animate(
  [{ opacity: 1 }, { opacity: 0.3 }, { opacity: 1 }],
  { duration: 1500, iterations: Infinity }
);

console.log("document:", document.getAnimations().length);
console.log("element:", box.getAnimations().length);

document: 1
element: 1

🚀 Common Use Cases

• Global slow-mo / speed-up — MDN’s playbackRate pattern.
• Pause all motion — accessibility or debug overlays.
• Cleanup — cancel leftover animations when unmounting a view.
• Diagnostics — count running animations during performance work.
• Prefer element scope — use Element.getAnimations() for a single widget.
• Not creating motion — use element.animate() or CSS to start animations.

📝 Notes

• MDN: Baseline Widely available since September 2020.
• MDN: includes CSS Animations, CSS Transitions, and Web Animations.
• MDN: no parameters; returns an array of Animation objects.
• Only descendants of this document are included (MDN).
• For one component, prefer Element.getAnimations().
• Related: Element.getAnimations(), exitPointerLock(), parseHTML().

💡 Best Practices