Performance of two timeline rather then one.

[rgfx 35 Likes (Newbie)]

I find it easier sometimes to create two timelines rather then one for complex animations. I know I can make one timeline out of it, but my head is spinning as it is. 

 

Wondering if there is a performance hit of any sort using two timeline instead of one. I will have two object moving at once regardless. 

 

Thanks

[PointC 8,599 Likes (Superhero)]

If your animations are getting complex and hard to manage, it sounds like the perfect time to start nesting your animations in a master timeline. You'll find it easier to work on small segments and move individual pieces around a master timeline. The code looks like this:

function part1() {
var tl = new TimelineMax();
tl.to( element, 1, {  } );
return tl;
}

function part2() {
var tl = new TimelineMax();
tl.to( element, 1, {  } );
return tl;
}

var masterTimeline = new TimelineMax();
 masterTimeline
 .add( part1() )
 .add( part2() );

Here's a simple CodePen with the basic mechanics and a position parameter added to the nested timelines.

 

See the Pen ZLxdXz by PointC (@PointC) on CodePen

 

Hopefully that helps.

 

Happy tweening.

[rgfx 35 Likes (Newbie)]

Right, so there is a performance difference between two timelines vs one?

[GreenSock 8,117 Likes (Superhero)]

Nah, performance-wise it's almost the same. I guess technically it's an extra function call if you nest it, but you'd never notice any real-world difference unless maybe you're nesting things hundreds of levels deep and there are thousands and thousands of simultaneous tweens. Actually, in some cases nesting can actually improve performance. 

 

Happy tweening!

[rgfx 35 Likes (Newbie)]

Thats what I thought. Thanks Jack.