Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Dipscom

Nested onComplete calls: Understanding their order

Go to solution Solved by PointC,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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")
 

:)

  • Like 2
Link to comment
Share on other sites

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 by Dipscom
  • Like 1
Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...

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

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×