Async/await functionality

[FreddyFY]

Thanks for this simple plugin.

It would be cool when you can use it with async/await

async () => {
  await TweenLite.to(...);
  console.log('Animation done and image loaded');
}

[fregante]

Hello! I did notice that await doesn't work but I didn't have time to investigate. I'm doing something wrong with the promise but I don't see what it is.

Currently this executes in the correct order, but as you said it stops at await:

https://codepen.io/anon/pen/zJbYZO?editors=0010

If you can figure out how to make it work, please let me know.

[FreddyFY]

This should do the job, for TweenLite.fromTo that also supports .then() I'm not sure how to make the code most effective, for all methods

(function(fromTo) {
  window.com.greensock.TweenLite.fromTo = (
    element,
    duration,
    from,
    to,
    ...rest
  ) => {
    return new Promise(resolve => {
      fromTo(
        element,
        duration,
        from,
        {
          ...to,
          onComplete: () => {
            if (typeof to.onComplete === "function") {
              to.onComplete();
            }
            resolve();
          }
        },
        ...rest
      );
    });
  };
})(window.com.greensock.TweenLite.fromTo);

https://codepen.io/freddyfy/pen/OoqWgz

[fregante]

But then you can’t chain them because it only returns a promise. e.g.

tl.fromTo(...).from(...).then(...)
// fails here  ^

Plus it’s gonna have a lot of overhead if every single tween is a promise

[FreddyFY]

You're right, the whole thing makes likely to much effort for a add-on. Would be cool when gsap supports this.

[fregante]

I don't know what the problem was exactly, but when trying to fix it I realized that await tween resolves with tween, which has a .then property, so await tries to resolve that again, ad infinitum.

I fixed this in v3 by not returning the tween. That part is generally pretty useless because if you can await it or call .then on it, then you also already have access to the tween:

const tl = new TimelineLite();
await tl; // No need for tl = await tl;

// and
tl.then(() => console.log(tl)); // No need for tl.then(tl => console.log(tl))