Feature Request: Pausing an ongoing animation with easing/not abruptly?

[tmladek]

Is your feature request related to a problem? Please describe. I have a looping animation that should only run given a certain condition. (Think a loading spinner, or just a simple animation loop on mouseover). If I pause() it, it just abruptly stops, which doesn't look nice.

Describe the solution you'd like I'd like to stop the animation over a certain duration - something like pause({duration: 300}) so that the animation comes to a halt over the duration of 300ms.

Describe alternatives you've considered Technically, it could work by "animating" the speed parameter of the animation (from 1.0 to 0.0 over 300ms), and then pause it - however, this parameter doesn't seem to be exposed. Similarly, changing the duration requires creating a whole new animation object.

I also thought of dynamically creating a new animation for the "slowing down" part, but it would need to take into account current speed, current phase, interpolating the right keyframes (etc.) in order not to look janky (at which point I might as well code the entire animation from scratch).

Are there any other approaches I've missed? Would this be possible to add? Thanks!

[different55]

Check out this example and the one before it. Set your up your pause event handling so that it pauses the timeline of the original animation, then fires off a new animation that calculates the new time offset and uses timeline.seek() in an update callback to smoothly bring that to a stop. One thing you'd have to be mindful of: if your animation is looping and alternating directions, you'd have to calculate set multiple keyframes so it bounces properly off the end.

So it's not as easy as setting a property, but it is possible, the tools are all here. Was able to get a a super janky, hacky test working pretty quick to confirm.