Jump to content


Nested command groups

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

I have a conceptual question that I hope I can ask well enough to make sense.  


My software will enable the user to create full presentations, for example a slide deck.  With a simple slide deck you have multiple slides, and each slide has things on it that might be animated.  To build up the whole structure of a presentation, I am using a root TimelineMax and a nested TimelineMax for each slide.  So, I create each child timeline, which might have lots of parallel activity (further nested timelines) and then I append the slide's timeline to the root timeline, and add a label so the user can move forward and back to the slides later.


However, it appears that TimelineMax starts playing as soon as set() and to() is called on it.  What I am really looking for is a way to build a timeline that doesn't play automatically, a group of commands per se.  


I know that I can call pause() right away but then I have a bunch of nested timelines that are individually paused, which don't play when the root (parent) reaches them.


This problem is causing weird timing issues in presentations created with my software.  I'm at the point where I think using nested timelines is not the correct solution, and that everything should be laid out in parallel on a single timeline, and calculate the start time and duration of all the commands manually for things that need to be sequenced.


Hopefully I've explained this well.  Thoughts? What do you recommend?

Link to comment
Share on other sites

Hello Gary, and Welcome to the GreenSock Forum!


You can try and add paused:true within the TimelineMax constructor. So your timeline will be paused when it is created.


For example:

See the Pen dbGEy by jonathan (@jonathan) on CodePen


// create new timeline and set initial pause state to true
var tl = new TimelineMax({paused:true});

TweenMax.set("#selector", {autoAlpha:0});
tl.to(element, 1, {autoAlpha:1});
// then just call play() to start your timeline


Taken from TimelineMax Docs parameters:

  • paused : Boolean - If true, the tween will pause itself immediately upon creation.

Does that help? :)

Link to comment
Share on other sites

Jonathan, I don't think that addresses his concern because he's pausing the nested timelines, and GSAP honors the paused state of nested timelines. Thus, when he plays his master timeline, the sub-timelines and sub-sub-timelines aren't playing. 


Gary, you could use getChildren() and loop through those, calling resume() on each. Or perhaps I'm misunderstanding the issue too. 


I'm pretty confident that using nested timelines is a very smart way for you to build your stuff - we just need to understand exactly what the hangup is in your scenario, and I bet there's a relatively easy way to address it.

  • Like 1
Link to comment
Share on other sites

Thanks for the responses, guys! 


Jack, I'll contact you directly because I want to describe some stuff that is not yet public, and I suspect there isn't much community benefit in it being posted here.




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.