JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

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

CSS

body{
  margin: 30px 0;
  background-color: #8a60a3;
}

#target{
  height: 10px;
  width: 0px;
  margin: 0 auto;
  background-color: #fff;
}

JavaScript

/**
 * Easing equations
 */

Math.linear = function(t, b, c, d){
	return c*t/d + b;
};

Math.easeIn = function(t, b, c, d){
	t /= d;
	return c*t*t*t + b;
};

Math.easeOut = function(t, b, c, d){
	t /= d;
	t--;
	return c*(t*t*t + 1) + b;
};

Math.easeInOut = function(t, b, c, d){
	t /= d/2;
	if (t < 1) return c/2*t*t*t + b;
	t -= 2;
	return c/2*(t*t*t + 2) + b;
};


setTimeout(function(){
	var duration = 2000,
  		start = 0,
      end = 400,
      currentTime = 0,
      diff = end - start,
      update,
      currentVal = 0,
      startTime = new Date().getTime(),
      targetElem = document.querySelector('#target');
  
  update = function(){
  	var elapsed = (new Date().getTime() - startTime);
    currentVal = Math.min(end, Math.easeInOut(elapsed, start, diff, duration));
    console.log(currentVal);
    targetElem.style.width = currentVal + 'px';
    if(currentVal >= end || elapsed > duration){
    	return false;
    }else{
    	requestAnimationFrame(update);
    }
  }
  update();
}, 500);