React timeline kill issue - timeline slows down with each time it's recreated.

[ZORGOBORGO]

I have an issue with how the timelines act

 

They run fine at the initial start, but when I want to start another timeline and then start the first one again, it slows down. I can see that this is because I'm not killing the existing timelines(?), but I'm too dumb to figure out why.

 

https://stackblitz.com/edit/stackblitz-starters-rzarxd?file=app%2Fpage.tsx

[ZORGOBORGO]

After some testing, the timelines don't slow down if before killing them, I reset them: blueTimeline.current.pause(0).kill()

 

I have no idea what's happening.

[GreenSock]

No no, you don't need to kill the other timelines if you don't want to. The core problem is just a logic one in your code - you're animating to an absolute rotation value of 360 on click, over the course of 3 seconds. Obviously the rotation starts at 0, so the first time you click it'll start animating to 360 over the course of 3 seconds, which means 120 degrees per second (speed). But then let's say you click again when the rotation is at 180 degrees (halfway). Well now you're setting up a timeline to go from whatever it currently is (180 degrees) to 360 degrees over the course of 3 seconds! So now it only has to travel half that distance (180 -> 360) but using the same duration, thus it's traveling at half the speed (60 degrees per second). 

 

There are quite a few things that seem awkward in your demo code. Why not just create 1 animation for each, and pause() them initially. Then, resume()/pause() them on click? Your click event handlers are unconventional for React too. And if you're going to handle them that way where you're creating new animations inside the click event handler, you should use the contextSafe() method to ensure that they're properly added into the useGSAP() context and get cleaned up properly in React. And if you're doing the same kind of animation for all the elements, you could probably use Arrays and loops so that you're not repeating so much in your code. 

 

Thanks for being a Club GSAP member! 💚

[ZORGOBORGO]

Hi Jack, thank you for your detailed response! I understand the first part - It did cross my mind, but I thought that when I kill the timeline its progress resets and should start from 0.

 

I'm completely new to react, so I might be very wrong, but I thought GSAP stores the the object values on page (component) load. The demo linked is simplified to illustrate the particular issue I encountered. The actual component is based on animating the same set of objects between 3 end states (each has an entrance tween, a looped (repeat:-1) timeline and an exit tween.  

 

I figured the best way to get current object starting values is to create a timeline inside the event handler so that the B or C timelines can animate from where the object is on the A timeline.

 

Am I making any sense, or am I just deranged? Been sitting on this for way too long.

[GreenSock]

You're completely deranged. 🤣

 

Kidding. 

 

8 minutes ago, ZORGOBORGO said:

I thought that when I kill the timeline its progress resets and should start from 0.

killing an animation just stops its changes immediately - it doesn't revert the state back to what it was before the animation started. That's what revert() is for. 

 

I'd strongly recommend watching this video if you haven't already: 

 

10 minutes ago, ZORGOBORGO said:

I thought GSAP stores the the object values on page (component) load.

I'm not sure what you mean. What "object values"? 

 

When an animation renders for the first time, it records the start/end values internally so that it can very quickly interpolate between them. You can flush those values by calling invalidate() on an animation/timeline and then the next time it renders, it'll record them at that point again. 

 

It sounds like your minimal demo doesn't actually show the heart of what you're trying to do (multiple states?) - if you still need help, I'd encourage you to provide a minimal demo that very clearly shows the problem you're trying to solve (in as minimal a way as you can). 

 

We're not React experts, but I can tell you for sure that the way React does things makes it a little tricky to get used to. GSAP works exactly the same no matter where you use it, and it's totally compatible with React. It's just that as a developer, you need to kinda understand what React does to avoid some of the gotchas (unrelated to GSAP).