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?