Is it intended that .then() is not terminated, when the animation has been overwritten?

[AFoeee 0 Likes (Newbie)]

Hello!

Is it intended that the Promise object, which is returned by a Tween's .then() method, isn't terminated when the animation has been overwritten?

 

At first I planned on using it in combination with the async/await syntax, which sometimes resulted in a permanent halt of the respective function. (In my tests the status of the Promise remains "pending" after the animation has been overwritten.)

 

But even when I use it with a then-catch-structure, no clause is executed.

 

In the end I promisified the GSAP animations myself:

// for example
function hide(elmnt, duration = 0) {
  return new Promise((resolve, reject) => {
    gsap.to(elmnt, {
      duration: duration, 
      autoAlpha: 0, 
      overwrite: 'auto', 
      onComplete: resolve, 
      onInterrupt: reject
    });
  });
}

 

I feel like this undermines the usefulness of the .then() method (at least for some usecases).

 

Have a good one!

See the Pen GRyeZKV by AFoeee (@AFoeee) on CodePen

[OSUblake 18,476 Likes (Superhero)]

Welcome to the forums @AFoeee

 

You really don't have to call then, and using overwrite: "auto" only kills the property animations that are conflicting. Animations are set to resolve on complete, so it wouldn't make sense to resolve tween1 in the code below when the new animation starts as the x animation is still going to run its natural course.

 

let tween1 = gsap.to(".box", {
  x: 100,
  y: 100
});

setTimeout(() => {
  gsap.to(".box", {
    y: 200,
    overwrite: "auto"
  })
}, 100)

 

Maybe we can add in something to resolve if the entire animation is killed, but for now you would have to force it to complete, maybe like this.

 

See the Pen KKZEMYL by GreenSock (@GreenSock) on CodePen