Element.getAnimations()

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The getAnimations() method of the Element interface (specified on the Animatable mixin) returns an array of all Animation objects affecting this element or which are scheduled to do so in future. It can optionally return Animation objects for descendant elements too.

Note: This array includes CSS Animations, CSS Transitions, and Web Animations.

Syntax

const animations = Element.getAnimations(options);

Parameters

options Optional

An options object containing the following property:

subtree

A boolean value which, if true, causes animations that target descendants of Element to be returned as well. This includes animations that target any CSS pseudo-elements attached to Element or one of its descendants. Defaults to false.

Return value

An Array of Animation objects, each representing an animation currently targeting the Element on which this method is called, or one of its descendant elements if { subtree: true } is specified.

Examples

The following code snippet will wait for all animations on elem and its descendants to finish before removing the element from the document.

Promise.all(
  elem.getAnimations({ subtree: true })
    .map(animation => animation.finished)
).then(() => elem.remove());

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
getAnimations
84
79
67-79
Does not support the subtree option.
44-67
Does not automatically flush pending style changes and does not support the subtree option.
38-44
Does not automatically flush pending style changes and does not support the subtree option.
84
79
75
63-75
No
70
66
54-66
Does not support the subtree option.
31-54
Does not automatically flush pending style changes and does not support the subtree option.
25-31
Does not automatically flush pending style changes and does not support the subtree option.
13.1
11.1
Does not support the subtree option.
84
84
79
67-79
Does not support the subtree option.
44-67
Does not automatically flush pending style changes and does not support the subtree option.
38-44
Does not automatically flush pending style changes and does not support the subtree option.
79
63-79
60
57
48-57
Does not support the subtree option.
32-48
Does not automatically flush pending style changes and does not support the subtree option.
25-32
Does not automatically flush pending style changes and does not support the subtree option.
13.4
11.3
Does not support the subtree option.
14.0

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/getAnimations