nesting chached timlelines

[Peppe]

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?

[Peppe]

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.

[Peppe]

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

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

[Carl]

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.

[Peppe]

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

[Carl]

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