infiniteloop Horizontal Infinite Text Loop without empty spaces

[hadiqa]

Hi everyone,

I’m working on a simple infinite text loop animation for an assignment due tomorrow. My goal is for it to scroll continuously without any empty spaces between loops. I’ve tried creating it with this but currently, each item is set to flex: 0 0 33%. While it works, I’d like to reduce the space between items, but when I adjust the flex value, it breaks the animation. Can anyone  tell me what I am doing wrong and help me tweak this to get a seamless scroll without gaps?

Thanks in advance!

See the Pen NWQOQNo by Hadiqaa (@Hadiqaa) on CodePen.

[Rodrigo]

Hi,

 

You're definitely looking for the Horizontal Loop helper function:

https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop

 

Check these demos:

See the Pen zYaxEKV by GreenSock (@GreenSock) on CodePen.

 

See the Pen GRwePYw by GreenSock (@GreenSock) on CodePen.

 

Hopefully this gets you on the right direction

Happy Tweening!

[Thomas James Thorstensson]

Hi,

 

Late to this fine post. I just implemented a text scroller in Nuxt 3 build here, on my landing page, https://www.thomasjt.com. The onNuxtReady hook proved useful too! 

Anyone landing here later than me: If it helps, check out UITextScroller on my repo here: https://github.com/thorstensson/landing-page-nuxt-three

 

Peace, T 😎