onComplete '-=0.5'

[baptistebriel]

Hello!

I am using a lot of `onComplete` callbacks as it's really useful to launch something when the animation is completed.

Unfortunately sometimes when using a `easeOut`, the callback will be fired at the end of the animation - which is definitely what `onComplete` should do - but then the user has to wait for the whole animation to be completed.

 

Sometimes it will add a 'fake' delay between the end of the animation (as the user perceive it) and the `onComplete` callback.

A basic example would be to add a 'fake' scrolling at the end of the animation.

TweenLite.to(this.page, 1, {autoAlpha: 0, ease: Expo.easeOut, onComplete: done});

`done` will be called a the end of the animation, when `this.page`'s opacity is at 0.

 

Sometimes, I just do this:

TweenLite.to(this.page, 1, {autoAlpha: 0, ease: Expo.easeOut});
TweenMax.delayedCall(0.9, done);

So the callback is actually called 0.1 seconds before the animation stops; the user will not perceive any delays.

But technically, the animation is not yet completed...

 

What do you think about using `onComplete` like this: ?

TweenLite.to(this.page, 1, {autoAlpha: 0, ease: Expo.easeOut, onComplete: {done, '-=0.1'}});

So we could add/remove time just like we do with multiple tweens inside a timeline.

Let me know what you think!

Thanks for building GSAP

[Carl]

Thanks for the suggestion, its an interesting idea but it probably won't happen.

 

We really strive to keep TweenLite as light and tuned for high performance as possible. A tween's sole responsibility is changing values over time.

it just wouldn't work if we forced TweenLite on every update to see whether or not some other event was scheduled that needed to be fired. 

 

Your delayedCall() approach is fine. 

For sequenced animations and function calls, TimelineLite/Max are best:

tl.to(object, 1, {x:200)
  .add(done, "-=0.1");

We appreciate the ideas, its just that in this scenario it wouldn't work with the current API design.

[baptistebriel]

Thanks for the quick answer, Carl!

Actually, I use a lot `TimelineMax`, as `TweenLite` was used here for the example.

I guess the `add` method is what I was looking for!

 

Thanks a lot