How to stop (in order to reverse) a fabricjs animation

Question

I want to create a mouse rollover effect, like we used to see in flash websites - when the mouse rolls over an element it begins to animate, but if in the middle of the anim the mouse rolls out the animation would stop and run back.

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

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

This will animate until the top value of the rect will become 200. Is there a way to stop animation before that?

Answer 1

You need to specify 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 was not passed in to the underlying fabric.util.animate, which I just fixed, so you'll need to use latest version :)