JSFiddle - React, Tailwind, and code Playground

HTML

<div id="testDiv1"></div>
<div id="testDiv2"></div>
<div id="testDiv3"></div>
<div id="testDiv4"></div>

CSS

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

JavaScript

jQuery.extend( jQuery.easing,
              {
                  // t: current time, b: begInnIng value, c: change In value, d: duration
                    testEasing: function (x, t, b, c, d) {
						var extr = [[.4,.4],[.5,.3],[.6,.4],[.7,.3],[.8,.4],[.9,.3]];
						if (x < extr[0][0]) return b + c*x;
						if (x < extr[1][0]) return b + c*(extr[0][1] - (x - extr[0][0]));
						if (x < extr[2][0]) return b + c*(extr[1][1] + (x - extr[1][0]));
						if (x < extr[3][0]) return b + c*(extr[2][1] - (x - extr[2][0]));
						if (x < extr[4][0]) return b + c*(extr[3][1] + (x - extr[3][0]));
						if (x < extr[5][0]) return b + c*(extr[4][1] - (x - extr[4][0]));
						return b + extr[5][1] + jQuery.easing.easeInSine(x, (t - extr[5][0]*d), b, c, d - d * extr[5][0]);
					},
	              easeInSine: function (x, t, b, c, d) {
		              return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
	              }
              });

$(function() {
    $("#testDiv1").animate({
        width: 500},
        500, "testEasing");
    $("#testDiv2").animate({
        width: 500},
        750, "testEasing");
    $("#testDiv3").animate({
        width: 500},
        1000, "testEasing");
    $("#testDiv4").animate({
        width: 500},
        1250, "testEasing");
});