Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

make a circle out of text

Recommended Posts

Hi guys, 


I am trying to make the following animation. https://rino-pelle.com/contact/ (round text moving)


The first question I have in mind is, is there any way with gsap to make a circle out of a text? 


Also, as you can see, when scrolling down the speed of the rotation rises. Do we have any similar codepen that I could use to get inspiration from ? I tried to search within the forum but didnt find.


Any help is appreciated.


Thank you very much! 

Link to comment
Share on other sites

Hey @maxvia,


To render text along the shape of a <path>, enclose the text in a <textPath> element

that has an href attribute with a reference to the <path> element (see here).


With GSAP you can animate the text:


See the Pen 6fa7024ac0283e5e5715777155c9d554?editors=1010 by mikeK (@mikeK) on CodePen


With the help of GSAP ScrollTrigger and timeScale() you can then change the speed of the animation.


Happy tweening ...



  • Like 4
Link to comment
Share on other sites


Hey @maxvia


You could achieve the round-text party by curving svg text along a circle path, something like explained here




...and then rotate the SVG using GSAP.


Since they don't have an example with a circle on there, here is an example of what that could look like (without animation)


See the Pen 6aca59898326e199f690ed886e825ded by akapowl (@akapowl) on CodePen




For the speed increase on scroll, I would recommend this thread here.




These both helped me achieve that effect for myself, and I am sure they will help you too.





  • Like 5
Link to comment
Share on other sites

Wheee! Around and around it goes. Just my 2 cent demo.

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


Happy tweening.



  • Like 3
Link to comment
Share on other sites

@mikel - I · initially · had · it · with · centered · dots · but · I · like · it · most · with · the · normal · ones :)


And I left the part of setting the rotation for the nice balanced visuals of the text out on purpose for my demo ;) 

  • Like 1
  • Haha 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   1 member