Jump to content
Search Community

Infnite Marquee

TerraHQ test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

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!

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

  • 10 months later...

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

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.
×
×
  • Create New...