GSAP 3 and Promises

[multivac]

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

[OSUblake]

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, {});
}

 

 

[multivac]

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

[OSUblake]

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

 

 

[OSUblake]

41 minutes ago, multivac said:

Is this a bug or is it by design ?

 

So yes, that's by design. Here's a long discussion about it. 

https://github.com/greensock/GSAP/issues/322

 

[multivac]

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

 

 

[OSUblake]

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

 

 

 

 

[OSUblake]

2 hours ago, multivac said:

Maybe a configuration parameter ?

 

That's what I was suggesting with having a promisify method here. You would have to explicitly opt in, but it didn't make the final cut.

https://github.com/greensock/GSAP/issues/322#issuecomment-553763556