Jump to content


Start new animation when one is completed

Go to solution Solved by GreenSock,

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



The topic may sound easy to answer - dude! read documentation and use onComplete callback function. Unfortunately this is not anwer for me. Here's the deal.


I have and object, lets call it display, that holds multiple methods doing different things with buttons. If i run


it smoothly animates my #button0 within complex animation. However, i also have other methods like turnButtonOff and so on...


The problem is that many of my methods in the begining run turnButtonOn method, later some custom animation depending on its purpose, and at the and - turnButtonOff method.


So... i could create customAnimation method and:

1. copy/paste turnButtonOn code

2. code customanimation tweens

3. copy paste turnButtonOff code


And do something like this to every method within this object.

But it is not elegant, not readable and ugly, and not OOP so i am looking for different approach,


I also could do something like this:

display.turnButtonOn($('#button0'), display.customAnimation)

and on last tween onComplete call that parameter with eval (yack!) or something like that.


What i'd be glad to achieve is:

customAnimation: function () {
  // when it is done run custom animation code {...}
  // when it is done run display.TurnButtonOff($("#button0"))

What would be best way to solve my problem?


Thanks !




I also can start turnButtonOn, and knowing how long has its animation, run customAnimations within delay parameter or event setTimeout, but i dont like this approach because any change in animation needs to be also adjusted in delays..

Link to comment
Share on other sites

  • Solution

If I understand your question properly, you could just have your turnButtonOn() and turnButtonOff() methods return tween/timeline instances so that you can easily sequence things in your customAnimation() method. For example:

display = {
  turnButtonOn: function() {
    var tl = new TimelineLite(); 
    //...add animations to tl...
    return tl;
  turnButtonOff: function() {
    var tl = new TimelineLite(); 
    //...add animations to tl...
    return tl;
  customAnimation: function() {
    var tl = new TimelineLite(); 
      .to(...).to(...) //add custom stuff
    return tl;

Does that help?

Link to comment
Share on other sites

I have to check if it works, but i guess that's the best answer i could imagine. Clear, elegant, readable, usable. Thank you very much!

  • Like 1
Link to comment
Share on other sites

After checking i have to say that it works ALMOST as intended. The only problem i've found that while i add next animations to main one all tweens are calculated in moment od addition to main animation, not in the moment of playing. Maybe in most cases it is not a problem, but i need to check which div is on viewport  in moment of playing, not at the begining of animation. Can i achieve this in any way? 

Link to comment
Share on other sites

I'm not quite sure what you mean. The code I provided determines the position(s) the first time the timeline renders; it almost sounds like maybe you're calling the functions at the wrong time or something. It'd REALLY help if you created a reduced test case in codepen to demonstrate the issue so we can take a peek and understand better. Doable? 

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.