Jump to content
Search Community

Nested onComplete calls: Understanding their order

Dipscom test
Moderator Tag

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

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.





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...

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.
  • Create New...