Refactor code to work with GSAP

[lueenavarro 1 Likes (Newbie)]

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.

[GreenSock 16,928 Likes (Superhero)]

Do you have a reduced test case in codepen? It sure looks like you could greatly simplify this by using a repeat in your timeline. Do you have an array of images/elements you're going through, animating each one 3 seconds apart? You may be able to use a stagger. But again, a reduced test case in codepen would be SUPER helpful in getting you a solid answer. And are you using the counter for anything else? 

[lueenavarro 1 Likes (Newbie)]

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!

 

[GreenSock 16,928 Likes (Superhero)]

Great, so you got everything figured out and it's working for you? Also, did you want to use GSAP 3 (the latest version)? The syntax is slightly different (though it's backward compatible with your code). I can help you translate it if that'd help.