Cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Stop an animation part-way through

ANSWERED

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?

Best Answer
0 Votes
1 BEST ANSWER

Accepted Solutions

@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/

View best answer in original post

Best Answer
0 Votes
5 REPLIES 5

Try using the end attribute:

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

and then triggering that animation

element.animate("disable")

 

 

 

Best Answer
0 Votes

@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?

Best Answer
0 Votes

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.

Best Answer
0 Votes

@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/

Best Answer
0 Votes

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

Best Answer
0 Votes