How to animate child elements after their respective parent elements had been staggered and NOT after all parent elements had been staggered

[bignose]

I'm pretty new with GSAP, and currently in a bit of a pickle. I would really appreciate any help. I'm trying to staggerFrom 10 image containers, however each container has a child image. I need to autoAlpha each image AS SOON as its respective parent has been animated and NOT after all 10 image containers had been animated. 

 

.staggerFrom("grid-item", 1, { y:-10, ease: Back.easeIn }, 0.3)

.from("grid-item img", 1, {autoAlpha:0, ease: Back.easeIn }, 0.3)

 

Thank you!

[PointC]

Hi @bignose 

 

Welcome to the forum and thanks for joining Club GreenSock. 

 

If I understand your question correctly, you'd want to use the position parameter on the autoAlpha stagger tween. Your first stagger duration is 1 second so you can set a position parameter of 1 second on the autoAlpha stagger and it will start when the first element in the first stagger tween completes.

 

tl.staggerFrom("grid-item", 1, { y:-10 }, 0.3);
tl.from("grid-item img", 1, {autoAlpha:0 }, 0.3, 1);

 

More info about the position parameter:

https://greensock.com/position-parameter

 

Hopefully that helps. Happy tweening and welcome aboard.

 

[bignose]

Thanks Craig! Although, I was able to read  and watch tutorials about positioning parameters before, it turns out that my animation offsets were a bit off.  I'm still getting the hang of it. Thanks again, and GSAP is fantastic.