Marquee Endless Loop Not Working

[Deallie_Digital 0 Likes (Newbie)]

Hello All

I'm trying to make and endless loop with two rows going in opposite directions. The first row works fine, but the second row has a bug where there is a gap of unrendered elements after Infatuation. Any ideas on what's going on?

 

Code is Below (Apologies, but I have issues making react Code Pens):

https://codesandbox.io/s/test-carousel-forked-s5wtub

See the Pen bGLpKwX by bubbajaydee (@bubbajaydee) on CodePen

[GreenSock 16,668 Likes (Superhero)]

Your demo seems to be totally non-functional (errors are being thrown that are unrelated to GSAP, so nothing is even showing). That makes it almost impossible to troubleshoot. 

 

I'd recommend just stripping everything out including React if you can - just get the basic concepts going with some colored <div> elements and post back here with any GSAP-related questions. Just please keep in mind the forum guidelines - we're happy to answer GSAP-specific questions but we can't provide free general consulting about logic issues, 3rd party libraries, etc. 

 

Also, there's a helper function in the docs that may prove useful for endlessly looping things on the x-axis. https://greensock.com/docs/v3/HelperFunctions#loop

[Deallie_Digital 0 Likes (Newbie)]

Thanks for the quick reply. Apologies, my CodeSandBox has been acting super buggy lately, so below is a scaled down example in Codepen. To clarify, I have a Carousel infinite loop component that can go left or right based on the props passed. The carousel going right works fine, but for some reason the carousel going left has a gap of unrendered divs after the last div.

 

updated code:

See the Pen bGLpKwX by bubbajaydee (@bubbajaydee) on CodePen

[OSUblake 18,369 Likes (Superhero)]

Have you tried the helper function that Jack mentioned?

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

 

You can pass normal timeline vars to the function.

 

horizontalLoop(boxes);
horizontalLoop(moreBoxes, { reversed: true });

 

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