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!