02-08-2020 16:52 - edited 02-08-2020 16:54
02-08-2020 16:52 - edited 02-08-2020 16:54
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?
Answered! Go to the Best Answer.
02-12-2020 13:59 - edited 02-12-2020 13:59
02-12-2020 13:59 - edited 02-12-2020 13:59
@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/
02-11-2020 10:11
02-11-2020 10:11
Try using the end attribute:
<animate begin="enable" end="disable" ... />
and then triggering that animation
element.animate("disable")
02-12-2020 07:14 - edited 02-12-2020 07:15
02-12-2020 07:14 - edited 02-12-2020 07:15
@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?
02-12-2020 07:25 - edited 02-12-2020 07:25
02-12-2020 07:25 - edited 02-12-2020 07:25
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.
02-12-2020 13:59 - edited 02-12-2020 13:59
02-12-2020 13:59 - edited 02-12-2020 13:59
@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/
02-12-2020 16:14
02-12-2020 16:14
final="freeze" didn't work for me, but final="keep" did. Thanks, @JonFitbit, for pointing me in the right direction!