Jump to content
GreenSock

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

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

×