GSAP v3 Timeline '.clear' issue

[Ch1pStar]

I'm trying to migrate a project from TweenMax v1.17.0 to gsap v3.2.0, but I'm facing some issues.

Even though I'm currently using an older version of gsap, I'm finding those issues when I compare TweenMax v2.1.3 with gsap v3.0.0.
What I have is a timeline where I add new tweens infinitely(like a loop) until some event happens and adding the tweens should stop. At that point I clear the timeline and add a final tween on the same target.

Using TweenMax v1.17.0(also v2.1.3) everything runs smoothly (open then link and check the pen's console).
Codepen : https://codepen.io/angelgbg/pen/oNXZKJY

However when I use gsap v3.2.0(also v3.0.0), the final tween is executed immediately without any tweening (please open then link and check the pen's console).
Codepen: https://codepen.io/angelgbg/pen/poJeMoV

I believe the problem is when I call timeline.clear which I think works differently than before.
I know than when stopping the loop I can kill the timeline and create another one, but there is more logic around this timeline which is not in the pen and ideally I would like to keep the current timeline, but just clear all existing tweens.

Has anyone noticed this issue and have you found a work around?

[ZachSaucier]

Hey Ch1pStar.

In my console in both pens I see:

########################################## LOOPING ##########################################
##################### STOPPING #####################
... a bunch of numerical values going down to 0 ...
##################### COMPLETE #####################
FINAL: 5

What's difference are we supposed to be seeing?

[Ch1pStar]

Hi ZachSaucier,

Thank you for your reply. 🙂

The numeric values are just logs of the delta between the current tweening target's value and the previously cached one.
It seems that the 'loop' I was simulating has timed out(as for testing purpose it is based on setTimeout) before you have opened the codepen. I've edited it and allowed for bigger timeout before stopping the looping tween.
Could you please check the links one by one and open the tab as soon as you click on the link, so the setTimeout doesn't end before that?

Looking at the GSAP Timeline v3.2.0 you'll notice that there is no actual tweening after clearing the 'looping' tween and attaching the final tween to the timeline (i.e. onUpdate is called only once).

Thank you. 🙂

[ZachSaucier]

I see. Thank you for the additional details. For cases like this it might be helpful to use console.clear() at the top of the script and change the default behavior of the CodePen to run when you click "Run" instead of auto-updating (you can change that in the pen's settings - the cog icon). The setTimeout finishing before I go to the window might be a good reason to use gsap.delayedCall() instead as well 🙂

But that's besides the point. I see what you mean now. After "Stopping" the GSAP 3 version just logs one value while the older version logs more tweened values. That's what you're referencing, right?

I think it might be related to your timeline continuing to play after the clear so the playhead is already past the very small duration of the tween? Jack is more familiar with the specifics of how the timeline's playhead works so we can wait for him to respond.

Why are you using a timeline for this anyway? I'd just use a regular tween since you're using a tail function call for recursion: https://codepen.io/GreenSock/pen/abOWZZY?editors=0010

[jackdoyle]

Should be resolved in 3.2.2.