Infnite Marquee

[thunderfoot 3 Likes (Newbie)]

Hey!
I'm trying to get an infinite marquee.

It doesn't work as expected, at some point there is a small shift. Any idea how could I solve this?
I've seen this example, 

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

 but I dont want to have harcoded values, my elements could have different lengths,etc.

Any inmidiate feedback/suggestion is welcome

Thanks in advance

See the Pen jOpJJgv by andresclua (@andresclua) on CodePen

[Rodrigo 5,076 Likes (Superhero)]

Hi,

 

Use the Endless Horizontal loop helper function:

https://greensock.com/docs/v3/HelperFunctions#loop

 

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

 

Hopefully this helps. Let us know if you have more questions.

Happy Tweening!

[thunderfoot 3 Likes (Newbie)]

Took this example and tweak it.

See the Pen QWBREpd by andresclua (@andresclua) on CodePen

It works fine, but the moment I'm adding images inside of it, it gets funky.

See the Pen NWBVLYM by andresclua (@andresclua) on CodePen

Any tip how to avoid it?

[Rodrigo 5,076 Likes (Superhero)]

Hi,

 

Honestly I can't tell exactly what's the issue in your codepen. My best guess is that somehow your CSS is getting in the way (soto speak).

 

I created a fork of the link I provided yesterday with images and it seems to work as expected:

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

 

Hopefully this helps. Let us know if you have more questions.

Happy Tweening!

[GreenSock 18,254 Likes (Superhero)]

That's because you're creating your loop BEFORE your image loads, and then when your image loads it causes a document reflow and totally changes the sizes of stuff, throwing it all off. So just create your loop AFTER things finish loading. 

 

window.addEventListener("load", () => {
  const loop = horizontalLoop(boxes, {paused: false,repeat: -1,});
});