JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.2/fabric.min.js"></script>
<canvas id="can" width="500" height="500"></canvas>
<script>
  var src1 = 'https://unsplash.it/200/200?image=0';
  var src2 = 'https://unsplash.it/200/200?image=1';
  window.onload = function() {
    canvas = new fabric.Canvas('can');
    fabric.Image.fromURL(src1, function(img) {
      _image = img;
      canvas.add(img);
      startInterval();
    })
  }

  function startInterval() {
    setInterval(function() {
      _image.animate('opacity', 0, {
        duration: 500,
        onChange: canvas.renderAll.bind(canvas),
        onComplete: function() {
          _image.setSrc(_image.getSrc() == src1 ? src2 : src1);
          _image.animate('opacity', 1, {
            duration: 500,
            onChange: canvas.renderAll.bind(canvas),
            onComplete: function() {}
          })
        }
      })
    }, 2000);
  }

</script>