JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://yourjavascript.com/11595440419/index.js"></script>
<body>
  <canvas id="viewport" width=1000 height=400></canvas>
</body>

CSS

body { text-align: center }

JavaScript

var canvas = document.getElementById("viewport"), ctx = canvas.getContext("2d");

setInterval(function(){
  animate(moveRectangle, 2000, BezierEasing(0.25, 0.1, 0.0, 1.0));
}, 2000);

function moveRectangle (p) { // p move from 0 to 1
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "hsl("+Math.round(255*p)+",80%,50%)";
  var w = 50;
  var h = 50 + p * (canvas.height - 50);
  ctx.fillRect((canvas.width-w) * p, (canvas.height-h)*0.5, w, h);
}

function animate (render, duration, easing) {
  var start = Date.now();
  (function loop () {
    var p = (Date.now()-start)/duration;
    if (p > 1) {
      render(1);
    }
    else {
      requestAnimationFrame(loop);
      render(easing(p));
    }
  }());
}

/*--------------Library code----------------*/
/**
 * BezierEasing - use bezier curve for transition easing function
 * by Gaëtan Renaudeau 2014 – MIT License
 *
 * Credits: is based on Firefox's nsSMILKeySpline.cpp
 * Usage:
 * var spline = BezierEasing(0.25, 0.1, 0.25, 1.0)
 * spline(x) => returns the easing value | x must be in [0, 1] range
 *
 */
(function (definition) {
  if (typeof exports === "object") {
    module.exports = definition();
  } else if (typeof define === 'function' && define.amd) {
    define([], definition);
  } else {
    window.BezierEasing = definition();
  }
}(function () {
  var global = this;

  // These values are established by empiricism with tests (tradeoff: performance VS precision)
  var NEWTON_ITERATIONS = 4;
  var NEWTON_MIN_SLOPE = 0.001;
  var SUBDIVISION_PRECISION = 0.0000001;
  var SUBDIVISION_MAX_ITERATIONS = 10;

  var kSplineTableSize = 11;
  var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);

  var float32ArraySupported = 'Float32Array' in global;

  function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
  function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
  function C (aA1)      { return 3.0 * aA1; }

  // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
  function...