lueenavarro

I am animating only the container of the photos, not the photos themselves. So I cannot use stagger. I was able to do it like this: bannerPhotos = [ 'assets/img/carousel1.png', 'assets/img/carousel2.jpg', 'assets/img/carousel3.jpg' ]; tlm = new TimelineLite({ paused: true, repeat: -1, onRepeat: () => (this.counter = 0) }); animateBanner() { for (let i of this.bannerPhotos) { this.tlm.to(this.banner.nativeElement, 1, { x: '-=100vw', delay: 3, ease: Power1.easeInOut, onComplete: () => (this.counter += 1) }); } this.tlm.play(); } } Thanks for the help!

animateBanner() { let counter = 0; const intervalTime = 3000; const tlm = new TimelineMax({ paused: true }); setInterval(() => { if (counter === this.bannerPhotos.length) { tlm.to(this.banner.nativeElement, 0, { x: '-100vw' }); counter = 0; } tlm.to(this.banner.nativeElement, 1, { x: '-=100vw', ease: Sine.easeOut }); tlm.play(); counter++; }, intervalTime); } I am creating an infinite loop carousel with GSAP, I'm having issues with setInterval where the animation goes really fast when I switch to other tabs then I go back. How can I refactor the code above using the GSAP way.