Interpolate

by Artem

HTML

<div id="div"></div>

CSS

div {
  background-color: red;
  width: 100px;
  height: 0;
}

JavaScript

'use strict';

var i = 0;
var mStart = 1200;
var start = Date.now();
var end = 500;
var cur = 0;
var curved;

var r = 213;
var g = 91;
var b = 140;

var cR;
var cG;
var cB;

function animate() {
  var elapsed = Date.now() - start;
  // cur = Math.floor(elapsed * end / mStart);

  cur = elapsed / mStart;
  curved = Math.pow(cur, 10);
  div.style.height = curved * end + 'px';

  cR = Math.floor(curved * r);
  cG = Math.floor(curved * g);
  cB = Math.floor(curved * b);

  console.log(cB);

  div.style.backgroundColor = `rgb(${cR}, ${cG}, ${cB})`;

  if (elapsed < mStart) setTimeout(animate, 10, Date.now());
}

animate();