run multiple animations on first item before going to next item

[Joshua721]

Hi, I've been trying to create a card fading animation that has two parts before animating the next card.
First the card should fade in, then after a delay of one second then the red box should fade in. After both of these animations have ran, it should repeat the animation for the next card.

What i currently have is all of the cards load and then the red box fades in after all of the cards are faded in. I'm not sure on how to finish one card fully before moving onto the next card.

See the Pen LYgzpmb by JAParker443 (@JAParker443) on CodePen

[Cassie]

Hey there!

So, currently you are creating an array with gsap.utils.toArray() to select all elements on the page with the class name "wrapper", then looping around them - there's only one wrapper though so this is only being called once.
 

After that you're making a timeline and adding a couple of tweens to it, but you're targeting elements with class names which are global, so that one timeline is animating all the cards and all the red boxes at the same time.

Maybe you were after something like this?

See the Pen MWPEKya?editors=1010 by GreenSock (@GreenSock) on CodePen

(Let me know if I misunderstood and you were aiming to loop through multiple wrappers)

 

[Joshua721]

Yes! This is what I was after!! 
So was I working at a level too high? as i was looping through the wrapper, or was it because I was using classes instead of using a querySelector? As looping through items still confuses me a little.