Resolving a promise using onComplete or Tween.then

[mikehwagz]

Howdy 🤠 Massive fan of GSAP and absolutely loving 3 so far.

While migrating a project from 2 to 3, I discovered a bit of unexpected behavior that I think would be considered a bug.

I've created a codepen to demonstrate the issue. As you can see, when attempting to resolve a promise using onComplete, resolve can no longer be passed first-class to onComplete as it could in gsap 2:

function test() {
  return new Promise(resolve => {
    gsap.to(square, {
      duration: 1.5,
      x: 200,
      ease: 'power3.inOut',
      onComplete: resolve
    })
      // also doesn't resolve using Tween.then
      // .then(resolve)
  })
}

test().then(() => {
  // never resolves
})

With that said, wrapping resolve in an arrow function (i.e. onComplete: () => resolve()) works. Another workaround is passing an empty object to onCompleteParams, which I believe is related to this line in core, but that still doesn't work with Tween.then.

Sure, there are workarounds, but because this behavior is different than that of v2, I figured it would be worth bringing to your attention! I like the simplicity of passing functions first-class, so it would be great to be able to continue doing so with gsap 3.

Just in case there is curiosity regarding the use-case here, I am working with a 3rd party lib (highway.js) that passes a done callback to Transition.in and Transition.out. After inspecting the source, I realized that done is actually just resolve coming from a Promise, which led me to creating these isolated tests in codepen.

Thanks for your prolific work on GSAP! Cheers 🍻