Jump to content
Search Community

GSAP 3 and Promises

multivac test
Moderator Tag

Recommended Posts

Hello GSAP team,

 

I build complex animations and sometime need to use Promises. Just decided to migrate to GSAP 3.

 

GSAP 2 work perfectly fine with promises. GSAP 3 doesn't.

 

I've made 2 codepens:

GSAP 2 and Promises:

 

GSAP 3 and Promises:

See the Pen xxbqEXQ by multivac (@multivac) on CodePen

 

Any solutions ? Ideas ?

 

Thank you very much,

Stan

 

 

 

See the Pen zYxZKLM by multivac (@multivac) on CodePen

Link to comment
Share on other sites

I don't know why you would even use setTimeout to begin with. You should resolve a promise with an animation's onComplete callback. setTimeout is NOT synced to anything animation related. If you're using setTimeout/setInterval for animations, you're doing it wrong.

 

But gsap animations are already promisable in v3. Have at it. Be sure to update to the latest version (3.0.4) as there have been a lot of bug fixes related to promises.

 

gsap.to(obj, {}).then(result => console.log(result));

Promise.all([
  gsap.timeline().to(obj, {}),
  gsap.to(obj, {}),
  gsap.to(obj, {})
]).then(result => console.log(result));

async function init() {
  
  await gsap.timeline().to(obj, {});
  await gsap.to(obj, {});
}

 

 

  • Like 6
Link to comment
Share on other sites

Hi OSUblake,

 

Thank you for the help.

 

I'm using setTimeout just as an example.

 

The web is an asynchrone world, and there are many cases where I need to include my timeline creation code in a function that returns a promise. For example when animating a video element.

 

It's great to see that GSAP timelines are promisable. But I dont really need to wait for a timeline to be completed. I need GSAP timelines to work in vanilla javascript promises. Ex: Promise.resolve( timeline ) never resolves. It was working perfectly fine in GSAP2.

 

Is this a bug or is it by design ? Is there a work around ?

Thank you,
Stan

Link to comment
Share on other sites

The animations are promisable, so you can't pass a timeline like that into resolve because the timeline hasn't been resolved. It will go into an infinite loop waiting for the timeline to resolve.

 

To get around that, you can pass in an object or array with the timeline to resolve like this.

 

See the Pen 4c1ea85a70347ba60cee3d9e8e55905b by osublake (@osublake) on CodePen

 

 

  • Like 2
Link to comment
Share on other sites

Thank you for the link, and the workaround. The problem comes from: timeline.then() ?

 

Hopefully there will eventually be a cleaner way than always returning: { timeline: tl }

 

Maybe a configuration parameter ?

 

Thank you very much for your precious support and help,

Stan

 

 

Link to comment
Share on other sites

2 hours ago, multivac said:

The problem comes from: timeline.then() ?

 

It's only a problem in you try to pass in an animation to resolve that hasn't completed.

 

2 hours ago, multivac said:

You probably already know it, but this GSAP 3 behavior makes it impossible to mix promises and timelines.

 

Yes you can. 

 

See the Pen 2504af1cc0b6c6a7cc6219b07e698776 by osublake (@osublake) on CodePen

 

 

6 hours ago, multivac said:

Ex: Promise.resolve( timeline ) never resolves.

 

Same here. Everything works as expected.

 

See the Pen 4302c3d070c282d9488d0ed20cde131c by osublake (@osublake) on CodePen

 

 

 

 

  • Like 2
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.
×
×
  • Create New...