Stop an animation part-way through

[ted-tanner]

How can I stop an animation? Say I have an element with an animation defined by the <animate /> tag with a duration of 5 seconds. Once a specific event happens, it needs to stop.

Once I kick off the animation using something like element.animate("enable"), how can I stop it without waiting for the entire 5-second animation to finish?

[JonFitbit]

Try using the end attribute:

<animate begin="enable" end="disable" ... />

and then triggering that animation

element.animate("disable")

[ted-tanner]

@JonFitbitI want to stop the animation such that the element stays where it is. When I use end="disable" and element.animate("disable");, the element immediately resets to its original position. Reseting the element is a terrible side-effect of disabling the animation. I need it to stay where it has been moved to by the animation. How do I stop the animation without reseting it?

[ted-tanner]

I tried creating a second, identical but hidden element. I would hide the one being animated and show the other one, moving it to the position of the previous element using something like element0.x1 = element1.x1. The problem is, I cannot get the x1, y1, x2, y2 coordinates of the line that is being animated. element1.x1 always returns 0.

I have tried using the bounded rectangle (element.getBBox()) and calculating position from that, but the problem is that I need to know whether x1 is greater than x2 and whether y1 is greater than y2 in order for that to be helpful at all.

[JonFitbit · Accepted solution]

---

@ted-tanner wrote:

@JonFitbitI want to stop the animation such that the element stays where it is. When I use end="disable" and element.animate("disable");, the element immediately resets to its original position. Reseting the element is a terrible side-effect of disabling the animation. I need it to stay where it has been moved to by the animation. How do I stop the animation without reseting it?

---

Checkout the `final=freeze` attribute https://dev.fitbit.com/build/guides/user-interface/animations/

[ted-tanner]

final="freeze" didn't work for me, but final="keep" did. Thanks, @JonFitbit, for pointing me in the right direction!