Any advise from GSAP experts on how I would do this?

[glenhodges]

Hey everyone! Glen here, I'm a web developer and looking for advise on a button I have to animate. Basically when you hover over the button, the button will curve downward as well as the text within it. I have included a screenshot to help visualize what I am talking about. 

[Cassie]

Ooh fun.

Looks like a job for morphSVG and SVG's textPath! - https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath
 

 

[PointC]

Hi @glenhodges 

 

Welcome to the forum.

 

Yep - just like @Cassie mentioned, morphSVG would make this pretty easy. Here's a quick version to show you the basics.

 

See the Pen PoEGNjm by PointC (@PointC) on CodePen

 

MorphSVG is a Club GreenSock perk so you can check that out too. 

 

Happy tweening and welcome aboard.

 

[Cassie]

Champion! 🥳

[glenhodges]

Thank you so much @Cassie and @PointC you guys are amazing! I really appreciate it. 

 

Glen