Jump to content


Infnite Marquee

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites



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!

Link to comment
Share on other sites

  • Solution

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


  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.