_Sorin_ Posted May 7, 2023 Share Posted May 7, 2023 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 More sharing options...
Solution GreenSock Posted May 8, 2023 Solution Share Posted May 8, 2023 I assume you meant to do this(?): See the Pen RweQQeE?editors=1010 by GreenSock (@GreenSock) on CodePen A few comments: 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. 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. 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! 🥳💚 2 Link to comment Share on other sites More sharing options...
_Sorin_ Posted May 8, 2023 Author Share Posted May 8, 2023 🥳 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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now