Básicamente, estoy trabajando en un sitio web que necesita tener fullpage.js funcionando. Después de la primera sección, tengo 3 secciones similares en estructura, donde algunos elementos visuales son fijos (que no son parte de esas secciones en el árbol HTML) y otros elementos que prácticamente permanecen en el mismo lugar para estas 3 secciones.

Ahora, cuando nos desplazamos en cada una de estas 3 secciones, debe haber un desplazamiento retrasado para que ocurra una animación de "salida" en los elementos antes de que la siguiente sección ingrese y tome su lugar. Tengo esta parte funcionando según lo previsto, como puede ver en el código a continuación, pero cuando se desplaza hacia arriba o hacia abajo y la clase de animación se elimina y se vuelve a encender, la demora no se activa nuevamente.

¿Alguien tiene alguna idea de cómo puedo lograr que esta animación se dispare cada vez?

 const delay = 1000; let timeoutId; let animationIsFinished = false; const roseTxt = document.querySelectorAll('.smart-rose'); const smartIllus = document.querySelector('.cc-smart-illustration'); const smartTitle = document.querySelector('.cc-smart-title'); new fullpage('#fullpage', { //options here css3: true, scrollHorizontally: true, scrollBar: true, scrollOverflow: true, normalScrollElements: '.scrollable-content', fitToSection: true, fitToSectionDelay: 1000, onLeave: function (origin, destination, direction) { var curTime = new Date().getTime(); if (origin.index == 1 && direction == 'up') { for (var i = 0; i < roseTxt.length; i++) { roseTxt[i].classList.remove('ccsAnimate'); } smartIllus.classList.remove('ccAnimate'); smartTitle.classList.remove('ccAnimate'); return true; } if (origin.index == 1 && direction == 'down') { //animating my element for (var i = 0; i < roseTxt.length; i++) { roseTxt[i].classList.add('ccsAnimate'); } smartIllus.classList.add('ccAnimate'); smartTitle.classList.add('ccAnimate'); //roseTxt.classList.add('ccsAnimate'); clearTimeout(timeoutId); timeoutId = setTimeout(function () { animationIsFinished = true; fullpage_api.moveTo(destination.index + 1); }, delay); return animationIsFinished; } if (origin.index == 2 && destination.index == 1) { for (var i = 0; i < roseTxt.length; i++) { roseTxt[i].classList.remove('ccsAnimate'); } smartIllus.classList.remove('ccAnimate'); smartTitle.classList.remove('ccAnimate'); } }, });

¡Gracias por adelantado!