JSFiddle - React, Tailwind, and code Playground

by Jeremy Gillick

HTML

<form>
  <p>
    <label>From</label>
    <input type="text" id="from-color" value="#ff0000" />
  </p>
  <p>
    <label>To</label>
    <input type="text" id="to-color" value="#00ff00" />
  </p>
  <p>
    <label>Frames</label>
    <input type="number" id="frame-num" value="40" />
  </p>
  <p>
    <label>Time</label>
    <input type="number" id="time" value="1500" />
  </p>
  <p>
    <button type="button">
      Go
    </button>
  </p>
</form>
<div id="preview">
</div>
<ul id="frames">
</ul>

CSS

body {
  font-family: helvetica neue;
}
label {
  display: inline-block;
  min-width: 3em;
  text-align: right;
}
#preview {
  height: 100px;
  width: 100px;
  border: 1px solid #000;
  margin: 15px auto;
}
#frames {
  list-style-type: none;
  margin: 15px;
  padding: 0;
}
#frames li {
  height: 10px;
  width: 10px;
  display: inline-block;
  border: 1px solid #000;
}

JavaScript

/**
	Fading a color using canvas to create a list of "frames"
  https://coderwall.com/p/cmslya/javascript-color-smooth-transition
*/

(function(){
	var animateTimer = null;

  function pixel(arr) {
      var _pixel = Object.create(null);
      _pixel.r = arr[0];
      _pixel.g = arr[1];
      _pixel.b = arr[2];
      _pixel.a = arr[3];
      _pixel.toString = function () {
          return "RGBA(" + _pixel.r + "," + _pixel.g + "," + _pixel.b + "," + _pixel.a + ")";
      };
      return _pixel;
  };

  function colors(color1, color2, steps) {
      var canvas = document.createElement('canvas'),
          c = canvas.getContext('2d');
      canvas.width = parseInt(steps, 10);
      canvas.height = 1;
      var grd = c.createLinearGradient(0, 0, canvas.width, 0);
      grd.addColorStop(0, color1);
      grd.addColorStop(1, color2);
      c.fillStyle = grd;
      c.fillRect(0, 0, canvas.width, 1);
      var imgd = c.getImageData(0, 0, canvas.width, 1);
      var pix = [].slice.call(imgd.data);
      var pixels = [];
      while (pix.length) {
          pixels.push(Object.create(pixel(pix.splice(0, 4))));
      }
      return pixels;
  };

  function animate(frames) {
    var preview = $('#preview'),
    		duration = parseInt($('#time').val()),
        speed = Math.round(duration / frames.length),
        colorIndex = 0,
        direction = 1;
    
    clearTimeout(animateTimer);
    
    function run(){
    	preview.css('backgroundColor', frames[colorIndex]);
      
      colorIndex += direction;
      if (colorIndex < 0) {
      	direction = 1;
        colorIndex = 1;
      }
      else if (colorIndex >= frames.length) {
      	direction = -1;
        colorIndex = frames.length - 2;
      }
      
			animateTimer = setTimeout(run, speed);
    }
    run();
  }

  $('button').click(function(){
    var from = $('#from-color').val(),
        to = $('#to-color').val(),
        frameNum = parseInt($('#frame-num').val()),
        preview = $('#preview'),
        frameList...