Timeline on repeat without inner tweens only runs once [v3]

[Friebel]

Wanting to control a Spine animation with a gsap timeline, in version 2 it was enough to initialize a timeline on yoyo loop (repeat: -1, yoyo: true) and use the onUpdate() method to update the Spine playhead. But this seems not to work anymore in gsap v3. (converting a working project to v3)

 

Gsap Version 2 (works: repeats endlessly):

this.tl = new TimelineMax({

            repeat: -1,

            yoyo: true,

            onUpdate: () => {

                const total = this.tl.totalTime();

                const delta = total - this.lastTime;

                this.tree.update(delta);

                this.lastTime = total;

            },

        });

 

 

Gsap Version 3 (doesn't work: only runs once): 

this.tl = gsap.timeline({

            repeat: -1,

            yoyo: true,

            onUpdateParams: [this],

            onUpdate: (self) => {

                const total = self.tl.totalTime();

                const delta = total - self.lastTime;

                self.tree.update(delta);

                self.lastTime = total;

            },

        });

 

 

It seems like in version 3 a timeline without inner tweens stops after the first round, eventhough it's set to endless loop. Is this an issue in v3 or am I missing something here that has been changed in v3?

[ZachSaucier]

1 hour ago, Friebel said:

It seems like in version 3 a timeline without inner tweens stops after the first round, eventhough it's set to endless loop. Is this an issue in v3 or am I missing something here that has been changed in v3?

The timeline has a duration of 0 so how could it have a progress? I'm surprised that'd work in v2.

 

You can fix it by adding a tween: this.tl.to({}, {});

See the Pen wvazjpL?editors=0010 by GreenSock (@GreenSock) on CodePen

[Friebel]

19 hours ago, ZachSaucier said:

The timeline has a duration of 0 so how could it have a progress? I'm surprised that'd work in v2.

Thanks for your help @ZachSaucier. You are right in that the timeline has a duration of 0 and I can agree with you on that that is one way of looking at this situation and therefor can be a logical choice to not start the timeline if it doesn't have tweens or a duration of 0.

If the timeline didn't have a loop set!! So I'm afraid I have to respectfully dissagree on thisone.

 

Because on the other side, it also makes a lot of sense to me to start and loop a timeline if it has an endless repeat applied to it and also an onUpdate() attached. And there is actually a pretty handy usecase for that; we can let the onUpdate() of this endless timeline move the playhead of a Spine animation (or whatever other frame-based animation using delta), so now everything is in the gsap environment and we can now use all available gsap controls, like changing the speed, reversing the animation and so on. And it's also synced with all the rest of gsap animations in the project.

 

Your solution to add an empty tween to it works. Which is great and solves this problem in this project now. But isn't that conflicting the mindset of not starting a timeline when the duration is 0? So I'm not sure if I can trust this to keep on working this way in future gsap updates.

 

IMHO I would say a timeline with a repeat on it should at least repeat. Because we put that repeat there on purpose. Actually what we have than is a requestAnimationFrame loop, but with full control by greensock (and all its plugins), and that's exactly what I'm after here.

 

Being able to add an empty timeline to it is totally fine with me and works fine, but than I hope this capability will not be 'fixed' in a later gsap version, because at a later time Greensock might think this is wrong behaviour and needs to be fixed, in order to not let developers add empty timelines to it or don't run the timeline if the tweens on it have a zero duration.

[ZachSaucier]

If you just want something to fire every update, use GSAP's ticker:

See the Pen wvaoMJN?editors=0010 by GreenSock (@GreenSock) on CodePen

 

If someone has a TL with repeat: -1 but doesn't add tweens to it until later, should it run before it add tweens? If so, what should the playhead be at, the time since the start of the TL like you're suggesting or the moment at which the tween is added (as I bet most people would find more natural)? And how could the timeline possibly know that tweens were going to be added later?

[Friebel]

58 minutes ago, ZachSaucier said:

If you just want something to fire every update, use GSAP's ticker:

I appreciate your effort to help Zach. Yes, I know about the ticker and I use it to update graphics in canvas, threejs and so on if I use gsap in a project, but how would you like to control the speed and direction of the ticker in this case, where it would control a Spine-animation? In my opinion that's not possible with the ticker object. Even if we change the fps, which would affect everything else in the project I believe, which is obviously not what we want, then still it doesn't change the deltatime. But with a timeline we can play(), pause(), reverse() and so on and obviously yoyo was also working in v2. Also, when switching to a ticker, than we could as well just create a simple animationFrame loop, which fires at the same times normally.

 

Again, eventhough the example might look weird to you, and I understand that, it worked in version 2 without a problem.  I now solved it in this project by adding an empty timeline that's fine with me and I'm happy. Thanks for that tip. But I only hope it will keep on working in future updates than and not be 'fixed' so that with a later subversion it stopped working even with this extra empty tween.

[ZachSaucier]

2 minutes ago, Friebel said:

with a timeline we can play(), pause(), reverse() and so on and obviously yoyo was also working in v2

I see. I didn't realize you needed those.

 

1 minute ago, Friebel said:

Again, eventhough the example might look weird to you, and I understand that, it worked in version 2 without a problem.  If I can solve it in this project by adding an empty timeline that's fine with me and I'm happy. But I only hope it will keep on working in future updates than and not be 'fixed' so that with a later subversion it stopped working even with this extra empty tween.

It shouldn't be removed anytime in the future  Even it it were for some reason, you could just use something like this.tl.to({foo:0}, {foo:1});