Jump to content
GreenSock

reworked

How to ensure the call() function adds length to your timeline

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

First of all, love GSAP. You guys have done an awesome job, it's a very enjoyable API to work with.
 
Now, my question: How can I ensure my timeline properly adds duration for a function added with call() so that it calls the function in sequence?
 
For example:
 

var mainTl = new TimelineMax();

mainTl.addLabel('start')
.to($('h1'), 0.5, { y: '-=30px', autoAlpha: 1, ease: Power2.easeOut }, 'textIn')
.to($('p'), 0.5, { y: '+=30px', autoAlpha: 1, ease: Power2.easeOut }, 'textIn')
.call(myFunction, ['param1', 'param2'])
.call(myOtherFunction, ['param1', 'param2']);

function myFunction(element, duration) {
    return TweenLite.to(element, duration, { scale: 1, ease: Back.easeOut })
}

function myOtherFunction(element, duration) {
    return TweenLite.to(element, duration, { scale: 5, ease: Back.easeOut })
}

My problem is that when I call myFunction myOtherFunction is called at the same time. It doesn't wait for myFunction to finish and then calls myOtherFunction. Perhaps I need a callback but I'm not sure where.

Link to comment
Share on other sites

Hi reworked :)

 

pls use .add() method instead of .call() , like this :

.add( myFunction( param1 , param2 ) )
  • Like 1
Link to comment
Share on other sites

Well shoot, that was easy. Thanks Diaco!

 

Add on question: will this account for nested onComplete functions within the function called?

 

For example, the function called tweens in a circle on a map and then that has an onComplete function that populates a bunch of dots on the map. Will using add account for the onComplete function as well?

return TweenLite.to(element, duration, { scale: scaleSize, ease: Back.easeOut, onComplete: populateDots });
  • Like 1
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.
×