horizontalLoop marquee not looping correctly (jumps around)

[amitr95]

I fear I'm making a very simply mistake here, but I'm trying to use the horizontalLoop() helper function to create two marquees that go opposite directions.

 

From the demo, there are two issues:

1. If there's not enough logos present in the view width, it creates blank spaces until it jumps back to "slide 1". The loop should be indefinite, like it is in the demo below.
2. You can also see that the 1st and last cards in each marquee are joined together

See the Pen abmPjxz by mikeK (@mikeK) on CodePen

 

I've used the verticalLoop() helper before and didn't encounter the above issues, so I'm unsure if I need to do anything further or there's an issue in my implementation?

See the Pen dyLKwwr by amit_rai95 (@amit_rai95) on CodePen

[Rodrigo]

59 minutes ago, amitr95 said:

If there's not enough logos present in the view width, it creates blank spaces until it jumps back to "slide 1". The loop should be indefinite, like it is in the demo below.

That makes perfect sense, the Horizontal Loop helper is made to ensure a responsive animation that moves elements in one direction and when they reach the end of their particular animation they're added to the start.  Of course if there are no enough elements so the first one is out of view soto speak, the helper function doesn't know that and that is not baked into it. There are already a lot (and I mean a lot) of hours that have gone into the helper function to make it work the way it does but it predicates on the fact that your setup will accommodate to some specifications, like having enough elements to avoid those jumps, but that's on the users. Finally it seems odd to have so few elements with the intention of creating an endless loop.

1 hour ago, amitr95 said:

You can also see that the 1st and last cards in each marquee are joined together

The helper function has a paddingRight config option that allows you to adjust that:

const loop = horizontalLoop(elements, {
  paddingRight: 10 // value in pixels, can be what you want
  ...
});

Hopefully this clear things up.

Happy Tweening!

[GreenSock]

In case it wasn't already clear, that "jumping" that occurs when you don't have enough elements to "fill" the area horizontally is not a bug or anything - an element cannot exist in two places at once. Like you can't have half of the element showing on the left side of the screen while the other half of the element shows on the right side of the screen. It's in one place or the other.