Jump to content

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

timeline events following a function call

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 trying to integrate calls to functions into a timeline.

Thanks to  @Carl   I got how to make a call that follows preceding tweens.

(see discussion here: https://greensock.com/forums/topic/18464-multiple-timeline-event-calls-but-only-one-action ). 

The conclusion was that you need to pass this as a parameter, for example:

var tl = new TimelineLite()

tl.call(myFunction, [])
tl.call(myFunction, [], this, "+=1")
tl.call(myFunction, [], this, "+=1")


Now I am putting more tween calls behind a function call.

I find the timeline doesn't wait for the function call to end before starting with the next call.

In the codepen, the last lines of the javascript are as follows:

tl.call(drawLineErase,  [pencil="#pencil", path="#squigglyPath", pencilStartPoint={x:9, y:115}, reverse=true, duration=4], this, "+=2");
 tl.to("#pencil",1,{y: "-=100", opacity:0}, "+=4") ;  

I had to add the "+=4" for the second line to follow the first one.

Now that was easy, as I had a duration parameter to set the duration of the timeline inside the function.

But that may not always be the case. How can I ensure that the main timeline picks up where the local timeline in the function ends? Is there some way of synchronizing the two?

See the Pen rKMzXg by fvila (@fvila) on CodePen

Link to comment
Share on other sites

It looks like your function calls are creating a nested timeline so I'd recommend returning that nested timeline to the master. Here's an excellent post by Professor @Carl that talks about this process.







Hopefully that helps. Happy tweening.



  • Like 4
Link to comment
Share on other sites

Yup, Craig is exactly right. The techniques illustrated in that article will definitely help with this.


When you call a function from a timeline its important to note that the timeline has no idea what is happening in that external function call. The function it calls could be injecting DOM nodes into the page, popping up alert()s, opening a modal, submitting data, retrieving data, or creating 5 hours worth of tweens. The timeline only tells the function to run and continues playing as it was. In some cases you may want to pause the timeline after a call() and then use the function to tell the timeline to play() again when its done "doing its stuff".


Again, in your case as Craig pointed out, you can actually put the animations that your function creates into the timeline.


I provided the demo below in a similar discussion. Note that there are functions that create animations and those animations are returned to (placed into) the timeline via add(). The article referenced above explains this in great detail.


See the Pen pVQJEK by GreenSock (@GreenSock) on CodePen






  • Like 5
Link to comment
Share on other sites

Thank you guys for your patience and reactivity!

Also the function call is  more elegant

    pencilStartPoint={x:9, y:115},

rather than

         pencilStartPoint={x:9, y:115}, 
         duration=4], this, "-=1"); 

I redid the codepen:

See the Pen JZEyRZ by fvila (@fvila) on CodePen


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.