make a circle out of text

[maxvia]

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! 

[mikel]

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

 

[akapowl]

 

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

 

[PointC]

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

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

 

Happy tweening.

 

[mikel]

Hey @akapowl,

 

I like it more with 'Hochpunkten'

 

See the Pen vYXerKB by mikeK (@mikeK) on CodePen

 

Happy marketing ...

Mikel

 

[akapowl]

@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  

[maxvia]

This is awesome. Thank you all 🙏