How to morph a path from where previous tween ended?

[ZORGOBORGO]

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

[mvaneijgen]

GSAP tries to optimize as much as it can, so it will on page load get all the values it needs to preform the animations, so when you click it again it will animated to the values it found on page load and thus it does nothing.

 

I've add your tweens to the click handlers and then it will just create a tween on each click and will always transform to any state from any state. 

 

 You could maybe also to something fancy with .invalidate() , but this seemed simpler 

 

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

[ZORGOBORGO]

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!

[Rodrigo]

Hi,

 

6 hours ago, mvaneijgen said:

GSAP tries to optimize as much as it can, so it will on page load get all the values it needs to preform the animations, so when you click it again it will animated to the values it found on page load and thus it does nothing.

What @mvaneijgen is referring here is that GSAP stores the start and end values when it creates an instance in order to run all that logic and do all that processing up front. Then when a GSAP instance runs it only applies the updates between those states.

 

The approach that He proposes is to run that logic on every click event, so GSAP will use the current values when creating a brand new instance and not the values it had stored previously, that's why He also suggested the invalidate method:

https://greensock.com/docs/v3/GSAP/Tween/invalidate()

 

Hopefully this makes things more clear.

 

Happy Tweening!