MorphSVG animating on click

[_Sorin_ 1 Likes (Newbie)]

Hi there,

 

I'm trying to animate the title of the selected section at onClick event. (when I'm at menu HOME and click on ABOUT, I want the text to morph from HOME to ABOUT; when I click on HOME I want the text to morph to HOME )

 

Not sure how to approach this (more precisely, I don't know what am I doing wrong in my example).

 

In this example there are only 2 menu items but I want to be able to use this code for websites with 5-6 menus; I considered the possibility of creating every combination possible (navigating from each menu to each menu, so basically having the morphSVG animations created beforehand) but I wanted to know if there is a way of creating the timeline dynamically.

See the Pen BaqYZgZ by sorin-tamas (@sorin-tamas) on CodePen

[GreenSock 18,885 Likes (Superhero)]

I assume you meant to do this(?): 

See the Pen RweQQeE?editors=1010 by GreenSock (@GreenSock) on CodePen

 

A few comments: 

1. You should be morphing the same <path> instance every time. In your original demo, you were changing the <path> (target of the tween) to be different each time. So you were morphing an invisible path sometimes. 
2. You don't need to have a whole new <svg> for every path. You can tuck them all into the same <svg> to reduce your markup. 
3. You don't need to reuse the same timeline every time. It's actually cleaner to just create a new tween on each click. 

Does that clear things up? 

 

Thanks for being a Club GreenSock member! 🥳💚

[_Sorin_ 1 Likes (Newbie)]

🥳 so clean and simple! 

 

It makes perfect sense to use the same <path> instance every time. Thanks for the clarifications.

 

Happy&excited to be part of the club! You guys are doing an amazing job!