stagger entire timeline to different elements and child

[pileoni]

Hi all, I'm very new to GSAP, so here is my question:

let's say i've a page with different post or project elements, each one made by a container and all his childrena.

I've a timeline that define the animation i want to use to "unfold" this kind of containers, but since each one have the same sub-elements with the same classes, everything happen at the same time.

The staggerTo method would create a sequence just within the same element of each class in all the container at the same time.

 

Instead, i would like that each of those container unfold indipendently, or actually with a minimal delay between they all, each one fallowing the same timeline.

 

Is there a way to do that? Was my explication clear enough?

Thank you all!

 

See the Pen KybXGV by pileoni (@pileoni) on CodePen

[Sahil]

Here is the demo, I am using TweenMax.delayedCall() to call a function that will animate each block with delay.

 

See the Pen VrqNgP?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[pileoni]

Not entirely sure about how it works but but by changing some parameters i got the effect i wanted from your code, so thank you!

I'll check the methods i'm not familiar with. If you could add some comment would be great!

Thank you again!

 

 

[Carl]

With the right stagger amount and position parameter you should be able to achieve pretty much anything

 

Each container staggers in with a little overlap of previous container

 

See the Pen GOPamG?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Each container staggers in after the previous one fully builds

 

See the Pen pdqmro?editors=0010 by GreenSock (@GreenSock) on CodePen

 

[pileoni]

Very cool and clean. Thanks

[pileoni]

Ok, so, sorry for being so demanding, but what if i would like to have a random time between the activation of all of boxes? Or to have an ease effect, in the way that the first appear in a rapid sequence that slow down?

 

[Carl]

You can tween the progress() of a timeline and apply and ease for some pretty cool effects.

In the demo below it will appear that the entire timeline slows down at the end although the same stagger settings are used for each element

 

See the Pen ooVwBq?editors=0010 by GreenSock (@GreenSock) on CodePen

 

If you want to randomize the time between each animation you would do better to create separate timelines for each container (using a loop).