Async await in loop in combination with onComplete in gsap animation

[pils]

Sandbox of the project so far: https://codesandbox.io/s/muddy-water-h2tpb?file=/src/js/Reels.js (it gives some webpack errors in the console but it works fine - might take a few seconds tho)

 

As you can see i'm trying to build a slot-machine. Now i want to do stuff to the animation depending on the symbols that land on each real.

For example: If reel 0 is done animating, i want to check what symbols landed on that reel, and optionally change some animation timings for the next reel(s).

 

Now the problem with my code is that the onComplete fires only after all reels are are finisched animating. I'm logging to my console what is happening (you can also see this in the sandbox project after spinning the weels with the green button) and that now looks like this:

 

begin animation
Animating reel:  0
Animating reel:  1
etc..
end of animation
Symbol 0:  symbolBlue
Symbol 1:  symbolJ

etc..

 

But what i want is:

 

begin animation
Animating reel:  0

Symbol 0:  symbolBlue
Symbol 1:  symbolJ

etc..
Animating reel:  1

Symbol 0:  symbolBlue
Symbol 1:  symbolJ

etc..

Animating reel:  2

..

..
end of animation

 

The code in my reels.js now looks like this:

 sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

  animate(reel, i) {
    return this.sleep(100 * i).then(() => {

      console.log('Animating reel: ', i);
      for (let j = 0; j < reel.children.length; j++) {
        let lastY = reel.children[j].y;
        gsap.to(reel.children[j], {
          duration: 1.25,
          y: `+=6400`,
          ease: "back.inOut(0.4)",
          onComplete: () => console.log('Symbol ' + j + ': ', reel.children[j].texture.textureCacheIds[0]),
          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;
            }
          }
        })
      }
    })
  }

  async spin() {
    console.log('begin animation');
    for (let i = 0; i < this.items.length; i++) {
      await this.animate(this.items[i], i);
    }
    console.log('end of animation');
  }

 

What i tried:

- I thought maybe a timeline made more sense for this. But could not get this to work, animation got very weird.

- I saw this topic, and thought maybe something like await gsap.to() would work, but got an error Unexpected reserved word 'await'

 

Could not think of anything else so hopfully one of you guys can help me out with this. Also might me that there are more issues with the way i try to do this, don't go easy on me  Thanks!

[OSUblake]

Is this what you're looking for?

https://codesandbox.io/s/quiet-wood-yij2j?file=/src/js/Reels.js

 

[pils]

This is definitely what i asked for! Thanks for that.

 

Sadly it also shows that probably the overlapping animations (reel 2 starts spinning while reel 1 is still going, etc..) is not possible with the way i generate and animate the reels/symbols now. The reason i opened this topic was because i'm looking to get a effect like this:

 

 

Where if a certain symbol (in this case the fish scatter) is on reel 3 and reel 4, then the animation for reel 5 reel is longer. This is to build a certain suspense when a condition for a bonus is almost met. 

 

Should have maybe asked the question better, but i'm going to play around some more to see if i can come up with a solution for this. If you have any ideas/suggestions please let me know. 

[OSUblake]

It seems like you just need to make each successive reel have a longer duration. So you may also have to increase the y value for each successive reel so that the speed/velocity stays relatively the same. Velocity is just distance / time.