Jump to content
GreenSock

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

nesting chached timlelines

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

hi, I have objects with different timelines, I create them dinamically from DOM animation containers id and cache the timelines so that I can use them later:

var subBlock=function(blockId){  
    this.blockId=blockId;  
    this.showTl=new TimelineMax({paused:true,smoothChildTiming:true, onComplete:thisInstance.shownCallback,onCompleteScope:thisInstance});
     
    this.hideTl=new TimelineMax({paused:true,smoothChildTiming:true ,onComplete:thisInstance.hiddenCallback,onCompleteScope:thisInstance});

switch (blockId)
    {

//each element has it's own in and out  animations
        case "block_0_0":
             this.showTl.set('#'+blockId,{display:"block"});  
            this.showTl.fromTo('#e_0_0_display',1,{opacity:0},{opacity:1});        
            
            this.hideTl.to('#e_0_0_display',1,{ opacity:0});

          this.hideTl.set('#'+blockId,{display:"none"});
   break;

  }

};

Then I want to switch from a content to the other chaining the hide animation of the first  and show animation of the new one. I do this creating a TimelineMax and appending the cached timelines to it, but there is something not working, it plays just once. If I call the single timelines play() they work.

changeSubBlock:function(subIndex){
      //object with show timeline
        var subBlock=appDisplay.subBlocks[appDisplay.selectedIndex][subIndex];  

  //object with hide timeline
        var oldSubBlock=appDisplay.subBlocks[appDisplay.selectedIndex][appDisplay.selectedSubIndex];
        //update status       
        appDisplay.selectedSubIndex=subIndex;

//this works

/*
        oldSubBlock.hideTl.play(0);
        subBlock.showTl.play(0);

*/

//this doesn not work
       var ntl=new TimelineMax({paused:true});
        ntl.append(oldSubBlock.hideTl);
       ntl.append(subBlock.showTl);
        ntl.play();       
    }

what can be wrong?

Link to comment
Share on other sites

oldSubBlock.hideTl.play();
subBlock.showTl.play();

play() instead of play(0) has the same effect of nesting timelines, but seek(0) or even progress(0) seem to have not the same effect.

Link to comment
Share on other sites

In the above code I used append() instead of add() :oops:.

Using add() only the first item animation (block_0_0) seems to work, but it's a different problem I suppose

Link to comment
Share on other sites

I think the problem has to do with the fact that you are adding paused timelines to a parent timeline. 

 

A paused child will not advance when the parent plays.

 

I think this simulates what you are trying to accomplish.

http://codepen.io/GreenSock/pen/mAnEy

 

Feel free to fork it and change it to better replicate your scenario. The simpler the code the better.

  • Like 2
Link to comment
Share on other sites

thanks.

 

using 

var ntl=new TimelineMax({paused:true});
ntl.add(oldSubBlock.hideTl.play(0));
ntl.add(subBlock.showTl.play(0));
ntl.play(); 

It sounds strange to me, but it works as expected.

 

Now I think I should learn more about nested timelines

Link to comment
Share on other sites

Yes, the behavior can seem strange, but it actually happened for a reason.

 

In GSAP there is something called a root timeline which you can think of as a single, master timeline for everything that happens in the engine. The root timeline allows every animation to be perfectly synchronized.

 

When you create a timeline, it automatically gets dropped into the root timeline and starts playing. So visualize the root playhead cruising along, and we drop our new timeline onto it at a root time of 1 second. That’s the startTime(). Great. But there’s nothing in the timeline, so it immediately finishes. Cool. Then, 5 seconds later, we add() some tweens to our timeline such that those tweens are at the beginning of the timeline. No problem. But remember, the root timeline is at a time of 6 now. So if our timeline’s startTime() is at 1 second, and we drop some 2-second tweens into it, those tweens would technically already be finished according to the global/root time. See what I mean?

 

Even, if that doesn't make total sense, don't worry about it. I have good news. 

We made some adjustments to make things a bit more intuitive. Now if a timeline has not yet completed and you try to add tweens (or timelines) to it, it will have its startTime() aligned with the playhead of its parent timeline. Which in plain English means, it should just work the way you were initially expecting it to:)

 

Here is my same demo with the latest version:

http://codepen.io/GreenSock/pen/heDFp

 

Please note the following:

 

main no longer needs to be paused inititally

main no longer needs to be told to play() or play(0) once you add the child timelines.

 

You simply add the child timelines up-paused

main.add(redOut.play())
        .add(blueIn.play()); 

and main will start playing 

 

 
The code above is the same as but shorter than:
redOut.paused(false);
blueIn.paused(false);
main.add(redOut)
       .add(blueIn)

I have attached a preview version of TweenMax 1.11.5. 

Give it a test with your files and let us know if you have any trouble.

 

 

TweenMax.min.js.zip

  • Like 1
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.
×