// Creates a HTML5 video tag
var canvas = new fabric.Canvas('canvas', {});

var square = new fabric.Rect({
 width: 100,
 height: 100,
 left: 100,
 top: 200,
 fill: 'red'
});

canvas.add(square);
canvas.renderAll();
canvas.setActiveObject(square);

$('#next-frame').click( function() {

    square.animate('left', 400, {
     duration: 1000,
     onChange: canvas.renderAll.bind(canvas),
    //  byValue: 100,
     onComplete: function() {
       console.log('animation completed');
     },
     easing: fabric.util.ease['easeInQuad'],
      abort: function(){
        // return false;
      }
   });

});