Nested onComplete calls: Understanding their order

[Dipscom]

Here's a question:

 

Why does the parent timeline fires its "onComplete" before the children?

 

 

Am I missing something here?

See the Pen qNqzzX?editors=1011 by dipscom (@dipscom) on CodePen.

[PointC]

Hey Dipscom 

 

You just need a slight change to get the expected behavior:

// switch this
tl.add("Start")
.add(tl1, "Start")
.add(tl2, "Start")

//to this
tl.add("Start")
.add(tl1(), "Start")
.add(tl2(), "Start")
 

[Dipscom]

I'm sure Carl said not to do that. As I'll be invoking the function, not adding it to the timeline.

 

But, saying that, the behaviour I am seeing is compliant with as if I were just calling the function, not adding it to the timeline.

 

----

 

It does work. BUT MAKES NO SENSE IN MY HEAAAAADD!

Edited June 23, 2016 by Dipscom

[Carl]

This might be a little tricky, but you do want to invoke those functions because when they are invoked they RETURN a timeline which then gets add()-ed to the parent timeline.

 

Craig is exactly right, but I give you a point for remembering my line about recommending that people don't invoke functions immediately. I think I usually do that when people do

 

TweenLite.to(element, 1, {x:200, onComplete:someFunction()}); //BAD will call someFunction() when tween is created

 

However the difference in your case:

 

//calls a function called tl1 at Start label
tl.add(tl1, "Start");


//adds the timeline that the tl() function returns at Start label
tl.add(tl1(), "Start");

 

Make sense? Let me know if you need more help. Glad you asked.

[Dipscom]

It does make sense (in a way...). I mean, I know this by now. 

 

I guess what threw me off was the docs. There the example is like this:

//add a callback at 1.5 seconds
tl.add(func, 1.5);

And I know why it should be like that and not:

//add a callback at 1.5 seconds
tl.add(func(), 1.5);

For the exact reason you have just explained.

 

I wonder if there should be another example there illustrating when you are using a function to return a timeline, where you do want it to be invoked.

//add a callback at 1.5 seconds that is returning a timeline
tl.add(func(), 1.5); 

function func() {
 var tl1 = new TimelineLite();

 tl1.to(foo, 1, {...});

 return tl1;
}

I ended up going down that way because I was not being able to create a Timeline on the fly and place it inside the master timeline without it playing.

 

Oh well. I'll try again later and see what I was doing wrong. Then, I shall come back and report on my mistakes.

[Dipscom]

Even though Carl answered WHY, PointC gets the tick because Carl already has a ton of likes anyway...