Infinite text

[De Internetarchitect]

How do I make an infinite text marquee with GSAP that:

• Does not have a gap in between
• Works with smaller font 
• Works on a ultrawide screen
  
  Something like this but then without a gap: 

See the Pen MWRaGGJ by deinternetarchitect (@deinternetarchitect) on CodePen

[Rodrigo]

Hi,

 

The horizontal Seamless Loop helper function:

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

 

Hopefully this helps getting started.

Happy Tweening!

[De Internetarchitect]

I have this pen:

See the Pen LYvpqgw by deinternetarchitect (@deinternetarchitect) on CodePen

When its at the end of the loop there is no gap between the words or it sometimes overlaps (words run trough each other). What I am doing wrong / how to prevent this?

 

[Rodrigo]

Hi,

 

The Horizontal Loop helper has a paddingRight config option to create that separation between the last and first items:

const loop = horizontalLoop(elements, {
  ...
  paddingRight: 100,
});

Is worth noticing that since you're using tailwind the gap between items is set with rem, while there is no issue with it, that could lead to different values so is better to set that in your stylesheet as a fixed value in pixels.

 

As for the overlapping if you're using a custom font better wait for the font to be loaded and rendered before creating the loop instance:

https://developer.mozilla.org/en-US/docs/Web/API/Document/fonts

 

Here is a fork of your demo, I added a 1 before the first element and an uppercase L at the end of the last in order to identify those:

See the Pen wvZMwez by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!