Jump to content
Search Community

phann phearoen

Members
  • Posts

    2
  • Joined

  • Last visited

phann phearoen's Achievements

  1. @Cassie Thank you for your kind respond!! Yes, repeat: -1 works. Thanks again!
  2. 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.
×
×
  • Create New...