Sequence chidren in parent divs

[Melcarthus 1 Likes (Newbie)]

I'm new to greensock, and I realy like it sofar.

 

Here is my problem.

 

I have 2 div.product's and inside are 2 children, one needs to animate to the lef and one needs to animate to the right.

I want this to happen for every .product div , but in sequence. Right now the animation starts with both the .left divs, and after that the .right divs start to animate.

Is it possible to index the .product divs? and iterate over each one, no matter how many .products div there are? I would like to stagger them in sequence but I can't figure it out and I hope I'm explaining myself right...

See the Pen BwNbwp by anon (@anon) on CodePen

[PointC 14,465 Likes (Superhero)]

Hi @Melcarthus

 

Welcome to the forum. If I understand your question correctly, you want them to do this?

 

See the Pen veOPMK by PointC (@PointC) on CodePen

Does that help? Happy tweening.

[Melcarthus 1 Likes (Newbie)]

@PointC yes that is what I was aiming for. Thanks for the quick reply!

 

Is it also possible to start the second tween/timeline a little before the first one ends?

 

Again thanks!

[PointC 14,465 Likes (Superhero)]

Sure. You just need to change the stagger number. My demo has it set to 1, but you can drop it down as low as you like. Something like 0.25 maybe?

See the Pen KXpYgr by PointC (@PointC) on CodePen

 

Adjust to your liking. Happy tweening.

[Melcarthus 1 Likes (Newbie)]

So awesome,

 

Im starting to get the hang of of the simple stuff. forgetting sometimes to think in timelines and positions instead how I use to do things. Really great!

 

Thanks again. 

[PointC 14,465 Likes (Superhero)]

You're welcome. That's how we roll in the GreenSock neighborhood. 

 

Let us know if you have additional GSAP questions. Happy tweening.