Change timing of gsap animation after condition is met

I’m trying to build my own slot machine using PixiJS for my rendering and animating it with GSAP. I have some reels that spin after clicking a button, also symbol textures are swapped when they are no longer in view. So there is a decent start, but because i’m not sure if the way i build the base will work for future functionalities, i’m playing around to see if i can get some of these to work.

Here is a sandbox of the project so far: https://codesandbox.io/s/black-sea-13g0e?file=/src/js/Reels.js

What i’m trying to do now
I’m trying to see if i can do things with the animation when a condition is met. In slots u will often see that a suspense is building when the user is close to getting a bonus-game. In the example below u need 3 fishes on the reels for the bonus, and as you can see when 2 are hit the animation of the last reel takes longer.

What i tried

1. In my Reels.js i multiplied certain values like duration and y when the condition is met. This doesn’t seem to do well with the setTimeout and i notice no difference.

2. Trying to work with a gsap timeline where i then manage the timings instead of using a setTimeout Something like:

animate(reel, i) {
  const self = this;
  let delay = 0.2 * i;
  if (this.factor > 1) {
    delay = 0;
  }
  const tl = gsap.timeline();

  for (let j = 0; j < reel.children.length; j++) {
    let lastY = reel.children[j].y;

    tl.to(reel.children[j], {
      duration: 1.25 * this.factor,
      y: `+=${this.totalY * this.factor}`,
      ease: "back.inOut(0.4)",
      onComplete: () => self.calculateResults(reel.children[j], i, j),
      modifiers: {
        y(y) {
          let newY = parseFloat(y) % 800;

          let difference = newY - lastY;

          if (newY < lastY && difference < -100) {
            reel.children[j].swapSymbol(reel.children[j]);
          }
          lastY = newY;

          return newY;
        }
      }
    }, delay);
  }
}

calculateResults(symbol) {
  if (symbol.texture.textureCacheIds[0] === 'symbolYellow') {
    this.factor = 3;
    console.log('Add some suspense!')
  }
}

What i’m looking for
Is there a way to do this with the way i organized my reels?