maxvia Posted December 23, 2020 Share Posted December 23, 2020 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 More sharing options...
mikel Posted December 23, 2020 Share Posted December 23, 2020 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 4 Link to comment Share on other sites More sharing options...
akapowl Posted December 23, 2020 Share Posted December 23, 2020 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 5 Link to comment Share on other sites More sharing options...
PointC Posted December 23, 2020 Share Posted December 23, 2020 Wheee! Around and around it goes. Just my 2 cent demo. See the Pen VwjJaqw by PointC (@PointC) on CodePen Happy tweening. 3 Link to comment Share on other sites More sharing options...
mikel Posted December 23, 2020 Share Posted December 23, 2020 Hey @akapowl, I like it more with 'Hochpunkten' See the Pen vYXerKB by mikeK (@mikeK) on CodePen Happy marketing ... Mikel 2 Link to comment Share on other sites More sharing options...
akapowl Posted December 23, 2020 Share Posted December 23, 2020 @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 1 1 Link to comment Share on other sites More sharing options...
maxvia Posted December 27, 2020 Author Share Posted December 27, 2020 This is awesome. Thank you all 🙏 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now