Issue with Morphing between Two Paths

[jellington]

Hello, I'm new to animating with GreenSock and have run into an issue I cannot seem to fully understand. I've attached the Codepen URL with the issue.

When I try and toggle between two paths, #start and #end, it seems to have no issue morphing #start to #end. However, when I toggle the state and morph #start from #end, it half morphs and stops. I don't understand what could be causing this, could anybody point me in the right direction?

Thank you!

See the Pen KEpOQB by jellington (@jellington) on CodePen

[GreenSock]

Welcome to the forums, @jellington. Thanks for putting together a demo - very helpful. 

 

There are a few problems:

1. There's a logic issue - you're initially tweening to #end which works fine. Then, you try animating from() #end...but it's already at the #end state! So you're basically saying "tween from #end to #end" (no change). If I understand your goal properly, you'd just change the from() tween to a to() and make it go to #start. Here's a forked codepen: 

   See the Pen 41aeb3ecae311f5c757f1326c9e09bdf by GreenSock (@GreenSock) on CodePen

2. You were removing an element and then trying to remove it again which was throwing an error (if you open your Dev Tools, you'll see it in the console). That's unrelated to GSAP, but it halts JS execution. 

Does that clear things up?

 

Happy tweening!

[jellington]

Yes, that clears it up so much! Thank you so much!

[jellington]

I have one more question! If I click between the two states quickly many times, the #start-line will fail to become hidden (as screenshot below). I'm not exactly sure how TweenMax and autoAlpha works under the hood, is there a way to prevent this from happening? I tried playing around with the delays but it still seems to exist.

Thank you so much for all the help!

 

[GreenSock]

Ah yes, that's just because I added a 1 second delay (because I thought it looked better) to that handle appearing, so if you click too fast, it's possible to have the fade-out tween start BEFORE the fade-in one starts. It's just a timing thing. But it's very easy to fix - you just add overwrite:true and that basically tells the engine to find any other tweens of that element and kill them. I adjusted the codepen accordingly. 

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

 

Better?

 

[jellington]

I see, I understand and thank you for providing the information on the overwrite field!