First element of horizontal loop looses margin.

[fewture]

Hi Guys!

Basically, we have used the helper function for horizontal loops:

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

But we have an issue with margin applied. If we apply 50px of margin-right to the '.box' class for example, it breaks after the first loop, as the first element then sticks to the last element of the loop.

How can we tackle this issue?

Thank you for your help!

[Rodrigo]

Hi @fewture and welcome to the GreenSock forums!

 

The horizontal loop helper has a paddingRight configuration option to set that particular value:

 

const loop = horizontalLoop(boxes, {
  paddingRight: 50
});

 

Hopefully this helps.

Happy Tweening!

[fewture]

Hi Rodrigo,

thank you for your reply!

Unfortunately, that did not resolve my issue...

The last element of a loop, which gets added to the front again, appears without the appropriate margin/padding and sometimes flashes. 
It sticks to the next element and breaks the whole loop. We need to add double the margin set on the other elements as 'paddingRight', so that it does not stick to the last element of the loop. But still, the distances are not adding up, causing the last slide and the first having different spacing between them, than the rest of the slides...

I created a codepen which illustrates the issue. As soon as the last element is added as the first again it breaks the whole loop and breaks the margin specified. 

See the Pen OJaoRgm by Fewture-Webdesign (@Fewture-Webdesign) on CodePen

 

Best regards,
Walid

[Rodrigo]

Hi,

 

The issue is the justify-content: center property you have there:

.project-loop {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #64b5e7;
  overflow: hidden;
  height: 100%;
  position: relative;
}

Just change that to flex-start and the padding right to the same value of your margin (150):

CSS

.project-loop {
  display: flex;
  justify-content: start;
  align-items: center;
  background: #64b5e7;
  overflow: hidden;
  height: 100%;
  position: relative;
}

HJS

window.addEventListener("load", () => {
  horizontalloop(tiles, {
    paused: false,
    speed: 2,
    draggable: true,
    center: true,
    repeat: -1,
    paddingRight: 150,
    onChange: (element, index) => {
      // when the active element changes, this function gets called.
      activeElement && activeElement.classList.remove("active");
      element.classList.add("active");
      activeElement = element;
    }
  });
});

Here is a fork of your codepen:

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

 

Hopefully this helps.

Happy Tweening!