JSFiddle - React, Tailwind, and code Playground
CSS
body {
background: grey;
}
JavaScript
var isArray = function (o) {
return Object.prototype.toString.call(o) === '[object Array]';
};
var cubicBezierWithPercent = (function () {
var ax, bx, cx, ay, by, cy, t, duration;
function _solve (x, epsilon) {
return _sCY(_solveCX(x,epsilon));
}
function _solveCX (x, epsilon) {
var t0,t1,t2,x2,d2,i;
for(t2 = x, i = 0; i < 8; i++) {
x2 = _sCX(t2)-x;
if(_fabs(x2)<epsilon) {
return t2;
}
d2 = _sCDX(t2);
if(_fabs(d2)<1e-6) {
break;
}
t2 = t2 - x2/d2;
}
t0 = 0.0;
t1 = 1.0;
t2 = x;
if (t2 < t0) {
return t0;
}
if (t2 > t1) {
return t1;
}
while (t0 < t1) {
x2 = _sCX(t2);
if (_fabs(x2-x) < epsilon) {
return t2;
}
if (x > x2) {
t0 = t2;
} else {
t1 = t2;
}
t2 = (t1 - t0) * 0.5 + t0;
}
return t2; // Failure.
}
function _sCX (t) {
return ((ax*t+bx)*t+cx)*t;
}
function _sCY (t) {
return ((ay*t+by)*t+cy)*t;
}
function _sCDX (t) {
return (3.0*ax*t+2.0*bx)*t+cx;
}
function _sE (duration) {
return 1.0/(200.0*duration);
}
function _fabs (n) {
if (n >= 0) {
return n;
} else {
return 0 - n;
}
}
return function (percent,p1x,p1y,p2x,p2y) {
ax = bx = cx = ay = by = cy = 0;
cx= 3.0 * p1x;
bx= 3.0 * (p2x - p1x) - cx;
ax= 1.0 - cx - bx;
cy= 3.0 * p1y;
by= 3.0 * (p2y - p1y) - cy;
ay= 1.0 - cy - by;
duration = 1;
t = percent;
return _solve(t, _sE(duration));
};
}());
/**
* initializes MAL.RawTween
*
* var rawTweens = new RawTween({fps: 60});
*
* @method constructor
* @param {Object} $config
*/
function RawTween ($config) {
$config = $config || {};
this.fps = $config.fps || 60;
this.timeout = null;
this.tweens = [];
}
RawTween.prototype = {
/**
* @cfg {Number} fps
* fps for all tweens
*/
initialize: function ($config) {
$config = $config || {};
this.fps = $config.fps || 60;
this.timeout = null;
this.tweens = [];
},
/**
* Starts the raw tween loop
*
*...