Child TimelineMax within a Parent TimelineMax

[fiatuno]

Hi 

 

Wishing you all a Happy 2019.  

 

I have an animation requirement where I have a TimelineMax instance and number of TweenMax instances added to it and some of these TweenMax instances (not all) need to be repeated for number of times. So my question is can I create TimelineMax instances and add repeating instances to it and add these repeating TimelineMax  instances to the main TimelineMax instance will it work.

 

 

Example:

 

// somewhere globally create main 

var mainTimeline = new TimelineMax({repeat: false, paused: false});

 

//later on we loop through an array of objects 

 

If (obj.repeat){

     var tlr = new TimelineMax({repat:99, yoyo:true, paused: false});

     tlr.add(TweenMax.to(obj, duration, { x:x, 

                                                                y:y,

                                                               ease:Quint.easeOut,

                                                               onUpdate:updateDraw,         

                                                               overwrite: "none" }));
}else{

   //add TweenMax instances to mainTimeline

   mainTimeline.add(TweenMax.to(obj, duration, { x:x, 

                                                                y:y,

                                                               ease:Quint.easeOut,

                                                               onUpdate:updateDraw,         

                                                               overwrite: "none" }));

}
mainTimeline.add(tlr, self.getDelay();

 

//end code

 

 

 

Thanks in advance

 

[fiatuno]

I just found an interesting behavior as per the above code if I set repeat to the mainTimeline then it will repeat.  But if the main timeline is not repeating and if add another timeline (with repeat:99) to the mainTimeline then this second timeline will not repeat.   

[GreenSock]

You can certainly add repeating timelines (or tweens) to any timeline. No problem at all. Nest things as deeply as you want. 

 

I had a hard time understanding what you were describing with the "interesting behavior" - can you post a codepen demo? 

 

Your sample code had several mistakes. Like you were adding tlr to mainTimeline regardless, but you were only populating that variable inside on condition, so that code would break in the other condition. And I'm not sure what "self" refers to, but there's no getDelay() method in any GSAP stuff. 

 

Keep in mind that if you've got a child animation that repeats 99 times, its parent will wait for ALL of those to finish before it repeats. See what I mean? 

 

If you still need some help, just post a codepen demo and we'd be happy to take a peek. 

 

Happy tweening!

[fiatuno]

Thanks I have worked it out by creating two separate timelines repeating and non repeating all good.