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

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.

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

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.

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

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

[How to morph a path from where previous tween ended?]

I am not going to pretend I understand what the difference between the SVG path coordinates on page load and the same coordinates on function creation is. Aren't those the same values, which .to should animate to?

 

Regardless, the solution works perfectly in my case. Thanks a bunch @mvaneijgen!

[How to morph a path from where previous tween ended?]

I have 4 paths in an SVG. I want the 4th one to morph to any of the previous 3 on button click. Each tween works once - I understand that's because the tweens ended, but shouldn't this always animate "to"?

See the Pen oNddKdp by marekmarek (@marekmarek) on CodePen

[Adding a class to an object at a specific point in a timeline]

Thanks for this. Works flawlessly.

[Adding a class to an object at a specific point in a timeline]

Hi, I'm trying to have an object spin endlessly at the end of a timeline. Right now it's just a 360 rotation - I figured that it'd be best to add a class with a css animation at this point in the timeline, but I can't seem to get it to work. The only reference I found in the docs was className: '+=active', but it doesn't seem to be doing anything. 

 

Thanks in advance!

See the Pen QWpKoPJ by marekmarek (@marekmarek) on CodePen