Animated Text Circle with Next js

[Sabz]

How can I create this same animation with gsap and next js?

See the Pen gOeqqEb by pedroo_andre (@pedroo_andre) on CodePen

[mvaneijgen]

What have you tried already? We love to what you can come up with, that way we can see your thought process and thus better help you understand the tools!

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

 

Check out our Stackblitz starter templates for React or Next (please read this article if you're using a React based framework!)

[Sabz]

Hi @mvaneijgen, I gave it a shot, and on my localhost, the text splits and forms a circle using the map function. But on CodePen, it's not working well. I think my approach might be off, and the animation isn't working correctly. Can you help me out?

 

See the Pen MWxWxNg by sabbirzzaman (@sabbirzzaman) on CodePen

[Rodrigo]

Hi,

 

Maybe the resources in this thread can help:

 

Happy Tweening!

[Sabz]

Here is the solution

See the Pen dyrMvYx by sabbirzzaman (@sabbirzzaman) on CodePen

[Rodrigo]

Great job! looks really nice and smooth!

 

Thanks for sharing the solution with the community, I'm sure this will come very useful for a lot of users! 💚

 

Happy Tweening!