Jump to content
GreenSock

ZORGOBORGO

How to morph a path from where previous tween ended?

Go to solution Solved by mvaneijgen,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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

  • Like 2
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×