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

[AFoeee]

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]

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

 

[jonForum]

i also fall into this issue.
actualy this seem work !, i will need think on how to apply this globally to avoid add those events everywhere ?!

[Rodrigo]

Hi,

 

You can use gsap.defaults() for that and override on each individual instance where you don't want that specific behaviour:

gsap.defaults({
  onInterrupt () {
    console.log(this); // <- The GSAP Instance that was killed
  }
});

https://greensock.com/docs/v3/GSAP/gsap.defaults()

 

Hopefully this helps.

Happy Tweening!

[jonForum]

8 hours ago, Rodrigo said:

Hi,

 

You can use gsap.defaults() for that and override on each individual instance where you don't want that specific behaviour:

gsap.defaults({
  onInterrupt () {
    console.log(this); // <- The GSAP Instance that was killed
  }
});

https://greensock.com/docs/v3/GSAP/gsap.defaults()

 

Hopefully this helps.

Happy Tweening!

thanks 😄

Is there a know issue related to add this behavior to every instances ?
Am also trying understand in what kind of scenario where when we override a tween, we will dont want resolve promises.
If you have a example or time to make one where you can show issue related to add this globally ?:)
Did you think it can be a also a good idea to eventually add a optimized internal flag ?
To leave its Interrupt available for more interesting and specific situations?
Maybe?
`

gsap.config({ resolveOnOveride: true  });

`

[GreenSock]

On 5/11/2023 at 8:43 PM, jonForum said:

Am also trying understand in what kind of scenario where when we override a tween, we will dont want resolve promises.

People may write code assuming that .then() will only occur when an animation completes, thus if it doesn't (like if it gets interrupted/killed), the Promise shouldn't resolve. See what I mean?