Animate a colored rectangle

by Andrea Bogazzi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/662/index.min.js"></script>
<div>
<select id="easing"><option>easeInQuad</option><option>easeOutQuad</option><option>easeInOutQuad</option><option>easeInCubic</option><option>easeOutCubic</option><option>easeInOutCubic</option><option>easeInQuart</option><option>easeOutQuart</option><option>easeInOutQuart</option><option>easeInQuint</option><option>easeOutQuint</option><option>easeInOutQuint</option><option>easeInSine</option><option>easeOutSine</option><option>easeInOutSine</option><option>easeInExpo</option><option>easeOutExpo</option><option>easeInOutExpo</option><option>easeInCirc</option><option>easeOutCirc</option><option>easeInOutCirc</option><option>easeInElastic</option><option>easeOutElastic</option><option>easeInOutElastic</option><option>easeInBack</option><option>easeOutBack</option><option>easeInOutBack</option><option>easeInBounce</option><option>easeOutBounce</option><option>easeInOutBounce</option></select>
    <button id="animate">Animate</button>
</div>


<canvas id="canvas"></canvas>

JavaScript

const canvas = new fabric.Canvas('canvas', {
    evented: false,
    selectable: false,
    selection: false,
    width: 800,
    height: 600,
    backgroundColor: '#fff',
});

const rect = new fabric.Rect({
  width: 50,
  height: 50,
  left: 100,
  top: 100,
  stroke: '#aaf',
  strokeWidth: 5,
  fill: '#faa',
  selectable: false,
});
canvas.add(rect);

const animateBtn = document.getElementById('animate');
animateBtn.onclick = function () {
  animateBtn.disabled = true;
  rect.animate(
    { 
      left: rect.left === 100 ? 400 : 100,
      fill: rect.left === 100 ? '#ffa' : '#aaa',
    },
    {
      duration: 1000,
      onChange: () => { rect.dirty = true; canvas.requestRenderAll(); },
      onComplete: function () {
        animateBtn.disabled = false;
      },
      easing: fabric.util.ease[document.getElementById('easing').value],
    }
  );
};