Jump to content
Search Community

make a circle out of text

maxvia test
Moderator Tag

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 ...

Mikel

 

  • 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

 

https://css-tricks.com/snippets/svg/curved-text-along-path/

 

...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.

 

Cheers,

Paul

 

  • Like 5
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.
×
×
  • Create New...