Motion path marquee, staggering relative to element width

[ianatkins]

Hello.

 

Have got a scrolling marquee setup that animates along a SVG motion path. ( Thanks for the demos / references, got quite far! ) Reduced test page below:

 

The kerning all looks a bit off because i'm staggering the animations using 'each' ( so spreading each letter across the duration of the animation with an equal timing).

This looks bad for 'i' and other letters, and think ideally I need to stagger the animations relative to each letters width. Any pointers on how to achieve this, or maybe there is a simpler approach?!

 

Thanks.

Ian.

See the Pen jORbZbB by addedlovely (@addedlovely) on CodePen

[Rodrigo]

Hi,

 

I think this thread can help:

 

Especially the demos by @nico fonseca and @alig01.

 

Hopefully this helps.

Happy Tweening!

[ianatkins]

Hey Rodrigo,

 

Thanks for the links, didn't know you could do native text on the path in the SVG itself. Think the motion path is a bit nicer, as you get the rotation.

 

I've updated the original pen ( above ). 

 

Have found the function callback option on the stagger to define the delay from the start, which I think it what I needed:

https://gsap.com/resources/getting-started/Staggers/#function

 

I'm looping over the characters, take the total width of the current characters shown and normalise that to the screen width and total animation duration. Kinda of getting there.

 

Think there's two issues.

 

1. Not sure how / where i'd define the 'repeat: -1' I had on the stagger before, have moved it to the 'to' animation but it doesn't seem to loop seamlessly now.

 

2. Weirdly on this version the 'i' seems to be off the SVG path slightly, and be above or below it. 

 

 

Cheers!

 

[Rodrigo]

Maybe these demos by @Carl can help:

 

Also check the video he made on the subject as well:

 

Finally this about seamless loops with staggers:

 

Hopefully this helps.

Happy Tweening!