JavaScript - getAnimations() method

revision: February 14, 2024

Category : document

The getAnimations() method of the Document interface returns an array of all Animation objects currently in effect whose target elements are descendants of the document. This array includes CSS Animations, CSS Transitions, and Web Animations.

Syntax :

        getAnimations()
    

Parameters: none

Examples :

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

Category : element

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.

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

This is an experimental technology

Syntax:

        getAnimations()
        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.

:

Examples:

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

Practical examples