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.