Jump to content


stagger entire timeline to different elements and child

Recommended Posts

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

Link to comment
Share on other sites

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


  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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!



Link to comment
Share on other sites

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


  • Like 3
  • Thanks 1
Link to comment
Share on other sites

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?


Link to comment
Share on other sites

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). 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.