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

Share this post


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

Share this post


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

Share this post


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

Share this post


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/

Share this post


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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×