Jump to content
Search Community

onComplete '-=0.5'

baptistebriel test
Moderator Tag

Go to solution Solved by Carl,

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

Link to comment
Share on other sites

  • Solution

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.

  • Like 1
Link to comment
Share on other sites

  • 1 month 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...