Horizontal Loop function: the first and last element overlap and ignore padding

[Ninuz]

Hey guys, how you doing? Nub here trying to understand something...
I m new to this so don't go too hard on me

I m trying to create a text marquee animation and apparently it works ( not sure is the right approach but works. )

Now I have the same exact code on this astro website https://ninuz-astro.vercel.app/   am working on and the last clone overlap with the first element.
I tried various approach but cant figure it out.
The code I am using in the website is the same used in the codepen
 

See the Pen qBgboaR by NinuzIBZ (@NinuzIBZ) on CodePen

Edited November 4, 2023 by Ninuz

[GreenSock]

Welcome to the forums, @Ninuz

 

We can't really troubleshoot live web sites, but I assume you just need to change the paddingRight number in that helper function call. Tweak it to whatever you need. There must be some kind of CSS difference on your live site or something. If you still need help, please make sure you provide a minimal demo that clearly illustrates the problem and we'd be happy to take a look. 

[Ninuz]

Sorry didn’t me anyone to debug a live site, was more of a reference.

the codepen I provided is the same exact code am using in the site and it works pretty much so I assume the logic I used is correct.

 

I tried adjusting the padding with some other approach but in prod the last element it always overlap with the first.

 

I’ll see if I can use an invisible spacer instead of padding to kinda hack it I guess!

 

Thanks!

[GreenSock]

No, there must be something different on your live site that's affecting things. If you'd like our help troubleshooting, just make sure you provide a minimal demo in CodePen or Stackblitz that illustrates the problem. 

 

And are you saying that there is literally no number you could put into the paddingRight that'd keep it from overlapping? That sounds super strange to me. 

[Ninuz]

https://stackblitz.com/edit/github-nlsffx?file=src%2Fpages%2Findex.astro

This is a demo I created but I am unable to reproduce the issue.
If you run this StackBlitz works.
So I am thinking the cause must be somewhere else in my project.
Maybe the font? Is there a way to start the animation only after the font is loaded? ( I ll probably figure this out later today )

Edited November 5, 2023 by Ninuz

[GreenSock]

Yeah, that'd make sense. You should be able to use the document.fonts.ready feature: 

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

 

document.fonts.ready.then(() => {
  // do stuff...
});

Does that resolve things? 

[Ninuz]

16 hours ago, GreenSock said:

Yeah, that'd make sense. You should be able to use the document.fonts.ready feature: 

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

 

document.fonts.ready.then(() => {
  // do stuff...
});

Does that resolve things? 

I wasn't aware of this. Thank you so much.
This fixed the issue.