onComplete not firing

[El Cas]

Hello,

 

This is my first time trying to use GSAP for animations and I was trying to create an animation based on Peter Barr's Deconstructed Advanced Staggers Grid (

See the Pen jONBMjd by petebarr (@petebarr) on CodePen

) and I was able to get onComplete to execute but when I changed it so that each box had their own animation the onComplete stopped working. My guess is that I somehow managed to create a super long timeline instead of a bunch of small ones (ex. Tween totalDuration() = 10000000000, duration() = 2) and this is why it's not firing. 

 

Is there a way to find it this cause or what I need to change to make it fire at the end of each box's to animation?

Edit: I added onRepeat to the Tween and it is firing. Does this fire after complete is done and the animation starts or is repeat fired at a different time?

See the Pen eYPvyaX by eaglexboy (@eaglexboy) on CodePen

[Rodrigo]

Hi @El Cas and welcome to the GreenSock forums!

 

Maybe you're looking for onRepeat:

onRepeat

A function to call each time the animation enters a new iteration cycle (repeats). Obviously this only occurs if you set a non-zero repeat.

 

Here is a fork of your codepen:

See the Pen GRYWxWz by GreenSock (@GreenSock) on CodePen

 

However this is not working:

setTimeout(randomWait(), () => timeline.pause(false));

You have that inverted, the callback goes first and then the time:

setTimeout(() => timeline.pause(false), randomWait());

Hopefully this helps.

Happy Tweening!

[El Cas]

onRepeat makes sense since I am trying to pause the current animation and set the focus on the element if it randomly meets the criteria after the iteration else it continues animating.

 

I noticed the setTimeout bug before you posted and had fixed it 😛 Thanks for pointing it out though.

 

Thanks for the help @Rodrigo