Staggered Animation - Jump between Last and first scene

[KwabenaOwusu]

Hey All,

It seems I am missing something basic.

In this staggerd animation ( FADE IN ANIMATION). There is a jump between first and the last scene.

I have three DIVs positioned absolutely. So I was expecting DIV 'THREE' to be the first scene because I didn't change z-Index.

But somehow the animation starts with DIV 'ONE'.

 

My goal: Fade in image within 3 seconds. Image then stays visible for 3 seconds, then fade out.

 

Thanks for your time.

 

/*CREATE ARRAY */
let fadeInImages = gsap.utils.toArray(".swapMe"),
  numOfFadeInImages = fadeInImages.length;

/*FADE-IN ANIMATION*/
let fadeAnim = gsap.timeline({ repeat: -1 }).from(fadeInImages, {
  autoAlpha: 0,
  duration: 3,
  stagger: { amount: 9 },
  ease: "none"
});

 

See the Pen NWevpKL by KwabenaOwusu (@KwabenaOwusu) on CodePen

[mvaneijgen]

Are you looking for a seamless loop in your stagger? 

 

Checkout our own @Carl's amazing tutorial! He can explain it better than I ever could in typing it out here. Hope it helps and happy tweening! 

 

 

[KwabenaOwusu]

@mvaneijgen: Thanks very much. I am already subscribed to his course. Seems I jumped over that part. I will have a look.