Infnite Marquee

[TerraHQ]

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]

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!

[TerraHQ]

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]

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]

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,});
});

 

[Joel Brewer]

Hello,
I'm trying to reverse the direction of the Endless Loop. I changed the tl.to to tl.fromTo to achieve the Right to left direction. The first part of the animation works properly, but the  followup animation timing is not quite right (line 80). 

Any tips to adjust the math on the timing or is there a better way to reverse this animation? 

See the Pen NWJNgKQ?editors=1010 by vyeltman (@vyeltman) on CodePen.

[GreenSock]

I think you overcomplicated things - all you need to do is set reversed: true ?

 

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

 

Is that what you wanted? 

[jingran]

On 2/9/2023 at 9:11 AM, GreenSock said:

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,});
});

 

Hi, is there a typescript version of this helper?

[GreenSock]

6 minutes ago, jingran said:

Hi, is there a typescript version of this helper?

No, sorry.