[Infinite carousel with autoplay]

@Cassie Thank you for your kind respond!!

Yes, repeat: -1  works.

Thanks again!

[Infinite carousel with autoplay]

Hi GSAP, I really appreciate the welcoming community here!

I have a question that is an extend of this topic.

The scenario is we have an infinite loop, but this time the image wrapper's width shrinks instead of sliding to the left.

I manage to do the width shrinking by stack those images in the same position like this.

html:

<div id="layer-4" class="image-wraps">
  <img class="images" src="...">
</div>
<div id="layer-3" class="image-wraps">
  <img class="images" src="...">
</div>
<div id="layer-2" class="image-wraps">
  <img class="images" src="...">
</div>
<div id="layer-1" class="image-wraps">
  <img class="images" src="...">
</div>

css:

.image-wraps{
  width: 100vw;
  position: absolute;
  left: 0;
  top: 0;
}

Then, I use gsap timeline to animate the them like:

const tl = gsap.timeline()
tl.to('#layer-1', {	width: 0, duration: 2, delay: 3, })
tl.to('#layer-2', {	width: 0, duration: 2, delay: 3, })
tl.to('#layer-3', {	width: 0, duration: 2, delay: 3, })
tl.to('#layer-4', {	width: 0, duration: 2, delay: 3, })

That being done, now I have no idea how to make it loop infinitely.

Please shine some lights!

Thanks in advance, and sorry I couldn't get a working sandbox.