This is an experimental technologyCheck 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 descendents. Defaults tofalse
.
Return value
An Array
of Animation
objects, each representing an animation currently targetting 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
Specification | Status | Comment |
Web AnimationsThe definition of 'Animatable.getAnimations()' in that specification. | Working Draft | Editor's draft. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Chrome Full support 84 Full support 84 Full support 79 Disabled' From version 79: this feature is behind the Notes' Does not support the Notes' Does not automatically flush pending style changes and does not support the Notes' Does not automatically flush pending style changes and does not support the |
Edge Full support 84 Full support 84 Full support 79 Disabled' From version 79: this feature is behind the |
Firefox Full support 75 Full support 75 No support 63 — 75 Disabled' From version 63 until version 75 (exclusive): this feature is behind the Disabled' From version 48 until version 63 (exclusive): this feature is behind the Notes' Does not support the Notes' Does not support the Notes' Does not automatically flush pending style changes and does not support the |
IE
No support No |
Opera Full support 71 Full support 71 Full support 66 Disabled' From version 66: this feature is behind the Notes' Does not support the Notes' Does not automatically flush pending style changes and does not support the Notes' Does not automatically flush pending style changes and does not support the |
Safari Partial support Partial Partial support Partial Notes' Does not support the |
WebView Android
No support No |
Chrome Android Full support 84 Full support 84 Full support 79 Disabled' From version 79: this feature is behind the Notes' Does not support the Notes' Does not automatically flush pending style changes and does not support the Notes' Does not automatically flush pending style changes and does not support the |
Firefox Android Full support 63 Full support 63 Disabled' From version 63: this feature is behind the Disabled' From version 48 until version 63 (exclusive): this feature is behind the Notes' Does not support the Notes' Does not support the Notes' Does not automatically flush pending style changes and does not support the |
Opera Android Partial support 48 Partial support 48 Notes' Does not support the Notes' Does not automatically flush pending style changes and does not support the Notes' Does not automatically flush pending style changes and does not support the |
Safari iOS Partial support Partial Partial support Partial Notes' Does not support the |
Samsung Internet Android
No support No |
Legend
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- Experimental. Expect behavior to change in the future.'
- Experimental. Expect behavior to change in the future.
- See implementation notes.'
- See implementation notes.
- User must explicitly enable this feature.'
- User must explicitly enable this feature.
- Uses a non-standard name.'
- Uses a non-standard name.
See also
- Web Animations API
- CSS Animations
- CSS Transitions
Document.getAnimations()
- Fetch all animations in the documentAnimation
Element.getAnimations() by Mozilla Contributors is licensed under CC-BY-SA 2.5.