Jump to content


MorphSVG animating on click

Moderator Tag
Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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! 🥳💚

  • Like 2
Link to comment
Share on other sites

🥳 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! :cool:

  • Like 1
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.