Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
t.marty

GSAP 3 - Promise and add()?

Recommended Posts

Hi Everyone

 

I am testing GSAP 3 and don't understand how promises work.

The Pen in attached shows my implemention but as you can see both animations run on the same time.

 

Maybe it has something to do with how I chain the timelines using add()?

 

See the Pen pooBEKg by Dollique (@Dollique) on CodePen

Link to post
Share on other sites

First, there have been updates to how promises work with gsap, so you should this file until the next version is released.

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js

 

Is there a reason you are trying to use promises? If you don't have a good reason for using promises, I would recommend staying away from them. It's much easier to use callbacks, add(), or call().

 

One thing to keep in mind when using a promise is that it can only run once. You can't run a promise again.

 

The reason your functions run at the same time is because your baseAnimation function doesn't return anything, so the timeline is empty, and you are calling your repeat function immediately.

 

It would need to be like this.

 

See the Pen 119c690411532f8831631ede2c54c4d7 by osublake (@osublake) on CodePen

 

 

  • Like 4
Link to post
Share on other sites

Thank you @OSUblake

 

I am just trying out different possibilities to work with timelines and promises sounded 'promising' ;)

For now I will try to use add(), call() and also onComplete to achieve what I need.

 

The reason I tried out promises was that it looked easier to use than onComplete.

 

One last question:

You said it will only run once, does this mean it also doesn't run on 'repeat'?

Link to post
Share on other sites
3 minutes ago, t.marty said:

I am just trying out different possibilities to work with timelines and promises sounded 'promising' ;)

 

Haha. Don't get me wrong, promises are useful in certain situations, but you usually don't need to worry about them for most gsap related tasks.

 

6 minutes ago, t.marty said:

You said it will only run once, does this mean it also doesn't run on 'repeat'?

 

In this situation, the promise will only run after the timeline repeats 10 times. It won't run on every repeat.

var master = gsap.timeline({ repeat: 10 })
  .add(baseAnimation())
  .then(() => repeat());

 

In this situation, if you try to restart the timeline, it will cause an error because master is actually a promise object, and not a timeline object.

 

var master = gsap.timeline({ onComplete: restartAnimation })
  .add(baseAnimation())
  .then(() => repeat());

function restartAnimation() {
  master.restart(); // error
}

 

  • Like 2
Link to post
Share on other sites

Okay thanks a lot for the explanation.

 

Now you talked about using add() or call() instead, but I see onComplete as the only other option to call a function when another function is finished.

I tested using add() and it always starts the animation immediatly. Is this the correct behavior or am I just doing it wrong?

 

EDIT: I am just re-reading the article you sent and it seems like there is a solution. I will try :)

https://css-tricks.com/writing-smarter-animation-code/

Link to post
Share on other sites
30 minutes ago, t.marty said:

I tested using add() and it always starts the animation immediatly. Is this the correct behavior or am I just doing it wrong?

 

Remember to return the animation. It will run immediately if you don't.

  • Like 2
Link to post
Share on other sites

Off-topic: by reading this i realized i could this:


- constructor.js file 

const animations = {
  caseOut: function(content, background){
    let tl = new TimelineMax();
    tl.to(content, 0.4, {y: -20, autoAlpha: 0, stagger: 0.05})
    tl.to(background, 0.4, {width: '100%', height: '100vh'})
    return tl;
  },
  // Other animation functions here...
};

module.exports = animations;

- elsewhere.js file 

let done = this.async();
let tlControl = animations.caseOut();

tlControl.play().call(done);

or if you want: 

tlControl.play().call(this.async());

I tried to async() with .then(), but that didn't work.
Thanks @OSUblake i saw you posted an article somewhere about Promises, will find and read it :)

Edited by Robbert89
edit: add let to call timeline once, then use let to control playhead
Link to post
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.

×