How to handle a timeline with labels and indefinitely repeated tweens?

[Alberto Mercurio]

Hello,

 

I need to play the timeline incrementally by pressing a button. The timeline however has one infinite tween.

 

This is a problem when using for example `tweenFromTo`, because the animation stops just after. I was thinking to use `tl.call` and run the animation out of the timeline, but apparently `tl.call` is asynchronous, and it runs just after, no matter the label.

 

Do you have any ways to fix this?

See the Pen LEVrPRr?editors=1111 by albertomercurio (@albertomercurio) on CodePen.

[Rodrigo]

Hi,

 

I'm having a hard time understanding what the issue is here actually. A call() method is just a way a GSAP Timeline has to execute a specific function, it has no time and hence it doesn't occupy any time in the Timeline. If you run this after adding all the labels to the Timeline you can see it:

console.log(tl.labels);
// {step-1: 0, step-2: 0.5, step-3: 0.5, step-4: 1, step-5: 1.5}

As you can  see step-2 and step-3 basically share the same position time-wise, but of course one is after the other in terms of it's execution. The reason why you think call() is asynchronous is because the Tween (or any code that runs inside that particular function) is executed immediately and the Timeline's playhead keeps moving forward, but that particular Tween (the one created inside the call function) is not inside the Timeline.

 

Maybe you're trying to achieve something like this:

See the Pen XJbYmVO by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[Alberto Mercurio]

Hi @Rodrigo, sorry for my late reply.

 

On 6/13/2025 at 7:40 PM, Rodrigo said:

I'm having a hard time understanding what the issue is here actually.

I have a timeline that I want to play between labels with a button, like in the example. At some point, I want to play an infinite animation still with a click (while not it runs automatically both on my case and in your case).

 

Thus, I'm not sure that using onComplete is the good choice, as it runs immediately after the previous animation.

[Rodrigo]

Well, based on the description you share and what the last demo I posted does, it seems to be what you're expecting.

 

Happy Tweening!

[Alberto Mercurio]

As you can see from my first example, the infinite animation is supposed to start from step-2 to step-3, while it starts immediately after step-1. Also in your case it starts immediately after step-1, as it is run on a `onComplete` function.

 

I was wondering if I can start this infinite animation following the timeline labels.

[mvaneijgen]

Your question is "how do I start my infinite animation only when the next button is clicked", right? 

 

Below I've just add an empty tween that has a onStart which houses your infinite looping tween.

 

Hope it helps and happy tweening! 

 

See the Pen VYLoxjL?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[Alberto Mercurio]

Perfect, thanks!