So basically, I'm working on a website that needs to have fullpage.js working. After the first section, I have 3 similar in structure sections, where some visual elements are fixed (which aren't part of those sections in the HTML tree), and other elements that pretty much stay on the same spot for these 3 sections.

Now, when we scroll in each of these 3 sections, there needs to be a delayed scroll for an "leaving" animation to happpen on the elements before the next section enters and takes its place. I've got this part working as intended as you can see in the code below, but when you scroll up or down and the animation class is removed and back on again the delay isn't firing again.

Anyone has any idea how I can manage to make this animation fire every single time?

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');
    }
  },
});

Thanks in advance!