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.