How to stop (to cancel) fabricjs animation

Question

I want to create the effect of tipping the mouse, as we used to see on flash sites, when the mouse rolls over an element that starts to come to life, but if the mouse rolls out in the middle of the animation, the animation stops back.

I would like to achieve the same effect with the fabric, but I can find a way to stop the animation. For instance:

rect.animate('top', '200', { duration: 1000, onChange: canvas.renderAll.bind(canvas), onComplete: function() { //callback code goes here } }); 

This will animate until the top rect value becomes 200 . Is there a way to stop the animation before this?

Answer 1

You need to specify the abort function.

 rect.animate('top', '200', { duration: 1000, onChange: canvas.renderAll.bind(canvas), onComplete: function() { //callback code goes here }, abort: function(){ return someConditionWhichAbortsAnimationWhenItsTrue; } }); 

The only problem is that abort not passed to the base fabric.util.animate that I just installed , so you need to use the latest version :)