Creare una sequenza di animazioni con JavaScript e animate.css

Pubblicato il 30 Marzo 2023

Nel caso volessimo animare un elemento in una pagina web possiamo avvalerci della nota libreria CSS animate.css che offre diverse animazioni interessanti. Per creare una sequenza di animazioni da applicare a un elemento, scriviamo la seguente funzione JavaScript:

function animateSequence(element, animations, delay) {

            // Aggiungiamo la classe "animated" all'elemento
            element.classList.add('animate__animated');

            // Impostiamo una funzione di callback che viene chiamata ogni volta che un'animazione finisce
            function onAnimationEnd() {
                // Rimuoviamo la classe dell'animazione appena terminata
                element.classList.remove(animations[0]);

                // Rimuoviamo la funzione di callback dalle animazioni
                animations.shift();

                // Se ci sono ancora animazioni da eseguire, avviamo la prossima
                if (animations.length > 0) {
                    setTimeout(function() { 
                        element.classList.add(animations[0]);
                    }, delay);
                }
            }

            // Aggiungiamo un listener per l'evento di fine animazione a cui chiamiamo la funzione di callback
            element.addEventListener('animationend', onAnimationEnd);

            // Avviamo la prima animazione
            element.classList.add(animations[0]);

}

Possiamo richiamare la funzione passando come parametri l’elemento DOM da animare, la lista delle animazioni da applicare e specificare il tempo in millisecondi tra un’animazione e l’altra.

// L'elemento da animare
const element = document.querySelector('#myElement');

// La sequenza di animazioni
const animations = ['animate__backInDown', 'animate__bounce', 'animate__heartBeat'];

// Il tempo in millisecondi tra un'animazione e l'altra
const delay = 1000;

animateSequence(element, animations, delay);

Qui puoi visionare una demo. Happy coding!