Animate text on an arc

[bytrangle]

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.

 

[nico fonseca]

Hey @bytrangle, i love the animation 💚 !
 

You can check this thread, i think it will be very helpful for you.

 

[bytrangle]

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.

[Cassie]

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

[bytrangle]

@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?

 

[Cassie]

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.

[mikel]

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

[PointC]

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.

 

[bytrangle]

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.

[GreenSock]

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). 

[bytrangle]

@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.

[GreenSock]

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) 
  }
});