[FEATURE] Callback when animation is cancelled and/or completes

[aervxa]

Describe what the feature does

this callback should run when the animation is interrupted by another animation, like using animate() on a target that is already animating

Provide a code example of what the feature should look like

{
  onInterrupt: () => {
     // Animation is interrupted/cancelled (maybe cancel could be oncancel)
  }
}

Describe alternatives you've considered

right now the only way to know if an animation is interrupted is via onPause (that was unexpected for me)

{
  onPause: () => {
     // Animation is interrupted or paused
  }
}

Additional context

I have an element with transition: all (yup, css) that probably is not best practice, but i need it for my element, so i have a wrapper that disables transition, runs an animate function and enables back transition.. I have a count for how many animations are running so that one animation doesn't turn on transition while another is running, i want to decrement that count when the animation ends or gets interrupted by another (just for reference on why i needed an onInterrupt, I ended up using onPause for now)

I think GSAP has something like this

[juliangarnier]

i want to decrement that count when the animation ends or gets interrupted by another (just for reference on why i needed an onInterrupt, I ended up using onPause for now)

But it looks like what you want is a different callback than simply "when the animation gets interrupted" (what onPause() currently does).

I think a callback that combines both onPause and onComplete can be useful as I often end up doing things like that:

const myCallback = () => {};

animate(target, {
  x: 100,
  onPause: myCallback,
  onComplete: myCallback,
});

It would be nice to have a unified callback for this, maybe onStop?

Otherwise I agree that onPause might not be be the best name for its current behavior, onInterrupt might be better.

What do you think of the following?

Rename onPause in onInterrupt:

Triggers when:

• The .pause() method is called
• The .cancel() method is called
• The .revert() method is called
• The .complete() method is called
• All animation tweens are overlapped by another animation with composition: 'replace', forcing the animation to stop
• All animation targets have been removed, forcing the animation to stop

And add a new onStop callback:

All of the above and when the animation completes "naturally".

[aervxa]

I think a callback that combines both onPause and onComplete can be useful as I often end up doing things like that:

const myCallback = () => {};

animate(target, {
 x: 100,
 onPause: myCallback,
 onComplete: myCallback,
});

Yupp, exactly this..

Renaming a prop might be a bit harsh for some users, but I think onInterrupt is the right thing here. onStop sounds better for the unified "interruption"/completion.

Tiny changes, but very handy and much appreciated 🙌🏼 I wouldn't ever need to run the same function on both callbacks 😌😮‍💨