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 post Share on other sites
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 post Share on other sites
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 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 5 Link to post Share on other sites
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 post Share on other sites
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 post Share on other sites
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 post Share on other sites
Author Share Posted December 27, 2020 This is awesome. Thank you all 🙏 Link to post Share on other sites
