Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Nested Timeline Stagger

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey all! 


I'm trying to be as efficient as possible on my animation and trying to re-use tweens wherever possible. I ran into a problem where I wanted to stagger in a number of parent elements, but upon each stagger, I want to stagger in child elements within the parent.


So this presented the issue of if the number of child elements are different, my parent stagger value would need to dynamic, based on when it's children finished staggering in.


I'd also like this to be a part of 1 master timeline because I'm using a progress meter. So pausing and resuming the master while waiting for the child stagger would not be ideal.


Please let me know if I'm going about this all wrong, or if there is a better way to do this.


Thanks so much!!


See the Pen mPWzWx by johnheiner (@johnheiner) on CodePen

Link to comment
Share on other sites

I'm not sure I understand what you're asking. Your readme for the parent sounds more like a sequence than a stagger. Do the parent boxes fading in overlap with each other? If so where does that overlap occur. I'm reading it like fade in parent box -> stagger in children -> fade in next parent box -> stagger in children -> etc.

Link to comment
Share on other sites

Hey Blake!


Thanks for responding! Sorry for the confusion, but you're right. I think this is more of a sequencing issue than a stagger.


Ideally this is what it would end up like:

fade in parent box -> stagger in children -> fade out parent box -> fade in next parent box -> stagger in children -> etc.


Just didn't know if it was possible with stagger or what would be the best method to accomplish something like this.



Link to comment
Share on other sites

  • Solution

Gotcha. Just making sure I was understanding you correctly. Either way, sequenced or staggered, you could create that timeline in few lines of code by using some type of loop. 


See the Pen KzWrQW?editors=0010 by osublake (@osublake) on CodePen

  • Like 3
Link to comment
Share on other sites



Glad I posted before I went off the deep end. Thanks so much Blake! You guys rocks!

Link to comment
Share on other sites

No problem. A lot of people don't think about using loops to build timelines, but that is what GSAP is doing behind the scenes for doing stuff like staggering tweens. That's why I said it really didn't matter if it was sequenced or staggered. Here's my example again with an overlap of the parent containers fading in and out. The only thing I added was label.

See the Pen ZWeVVZ?editors=0010 by osublake (@osublake) on CodePen

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

  • 5 years later...

Hi! How to make the same thing work in GSAP 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.