bytrangle Posted August 16, 2021 Share Posted August 16, 2021 Hi Greensockers, Sorry that I don't have a Codepen to show, as I don't even know where to start. I was intrigued by this custom loader that features letters of a word moving on a curve. Here is the link I notice that in addition to moving letters to make them line up on a curve, they are also slightly rotated (probably randomly), which makes it more whimsical than classic curved text animation. The source code was bundled so it was quite hard to read. I'm just looking for some pointers on what direction I should take to achieve this type of animation. My only thought right now is `MotionPath` plugin? The picture below is the earliest screenshot that I can capture. Anything would be helpful. bandicam 2021-08-16 15-48-53-015.mp4 Link to comment Share on other sites More sharing options...
nico fonseca Posted August 16, 2021 Share Posted August 16, 2021 Hey @bytrangle, i love the animation 💚 ! You can check this thread, i think it will be very helpful for you. 5 Link to comment Share on other sites More sharing options...
bytrangle Posted August 16, 2021 Author Share Posted August 16, 2021 Hey @nicofonseca I've read that thread (I often excavate the whole internet for implementation idea whenever I get intrigued by a cool design beyond my skill 🙂). The demo inside used an older version of GSAP. For example, it calls ``` tl.from("#masterTextPath", { duration: dur, attr: { textLength: 12500 } }, 0) ``` But I can't find an `attr` property for `tween.from()`. But thanks for the reply anyway. Guess I need to learn to use those plugins properly first before I can dream of fancy effects. 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 16, 2021 Share Posted August 16, 2021 Ah! Yes, that is a confusing one to stumble upon! That's a throwback to the older GSAP2 which had an attribute plugin. GSAP 3 actually includes that is it's core, along with CSS Plugin, Snap Plugin and Modifiers Plugin. So you can just do... tl.from("#masterTextPath", { duration: dur, textLength: 12500 }) Hope this helps! Thanks for linking to that useful thread @nicofonseca 3 Link to comment Share on other sites More sharing options...
bytrangle Posted August 16, 2021 Author Share Posted August 16, 2021 @Cassie Thanks for the help. I've noticed that before the letters rotate around a circle, they move like a wave (each letter moves slightly higher than the one on the left) until all of them reach the arc base (I think, it goes by so fast 😅). I don't think there's any property in the MotionPathPlugin that allows controlling how an element travels from its initial state to a path, is it? Link to comment Share on other sites More sharing options...
Cassie Posted August 16, 2021 Share Posted August 16, 2021 Not really - You could achieve all of tis with clever use of transforms though too. I'd recommend slowly scrubbing through the video, writing down a 'guess' of how to achieve it in pseudo code and then giving it a shot. I *never* get animations right on the first go - you'll learn as you go along. 4 Link to comment Share on other sites More sharing options...
mikel Posted August 16, 2021 Share Posted August 16, 2021 Hey @bytrangle, There are so many ways and means. Give it a try. At the end of the day you will see ... See the Pen rNmNjWB?editors=1010 by mikeK (@mikeK) on CodePen See the Pen PobOwjN by mikeK (@mikeK) on CodePen See the Pen yLgOMbm by mikeK (@mikeK) on CodePen Happy learning ... Mikel 4 Link to comment Share on other sites More sharing options...
PointC Posted August 16, 2021 Share Posted August 16, 2021 Hi @bytrangle Welcome to the forum. It's not exactly the same thing, but I have a tutorial for jumping wavy numbers. You might find some of it helpful. https://www.motiontricks.com/wavy-gauge-numbers/ See the Pen zYrjoLq by PointC (@PointC) on CodePen Happy tweening and welcome aboard. 5 Link to comment Share on other sites More sharing options...
bytrangle Posted August 28, 2021 Author Share Posted August 28, 2021 Hello, thanks for all of your encouragement @PointC, @mikel and @Cassie. Thanks to your kind words and encouragement, I was able to get the animation up to this point: See the Pen bGWyNbQ?editors=0110 by trangthule (@trangthule) on CodePen The text is rotating around the circle as I want but I don' get why the text sway from the horizontal line to a circular path only works once. I've been getting stuck at this part for days. I would be very appreciative if someone can give me some hints, or pointers. By the way, thanks Craig' for the heads up about the wavy number animation. That looks awesome. Happy tweening. Link to comment Share on other sites More sharing options...
GreenSock Posted August 29, 2021 Share Posted August 29, 2021 Look like logic issues in your code. I don't have time to dig into all the custom stuff you're attempting, but I noticed that you've got a "defaults" set on your timeline with repeat: 1 which will make EVERY child repeat once. I assume maybe you meant repeat: 0? If so, you can omit that altogether because 0 is the default anyway. Also, you're inserting some tweens at 4 seconds, some at 0. So they'll end at different times. That may be what you want, but just keep in mind that repeat: 1 would make each one repeat immediately (it doesn't wait for the others to finish). 1 Link to comment Share on other sites More sharing options...
bytrangle Posted August 30, 2021 Author Share Posted August 30, 2021 @GreenSock Thanks for your help. I meant to make the loader repeat infinitely until the main content is loaded and I'll stop the timeline. But I'm still figuring things out so I set `repeat: 1`, hopefully to make it a little bit easier to troubleshoot. Didn't know that `repeat: 1` would make tweens repeat immediately. Link to comment Share on other sites More sharing options...
GreenSock Posted August 30, 2021 Share Posted August 30, 2021 Just to be clear, you can easily repeat the entire timeline infinitely by setting repeat: -1. let tl = gsap.timeline({ repeat: -1, // <-- repeats entire timeline infinitely defaults: { repeat: 1 // <-- sets a default for any CHILD tweens to repeat once (immediately) } }); 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