[Refactor code to work with GSAP]

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!

 

[Refactor code to work with GSAP]

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.