JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<div class="box" id="box"></div>

CSS

.box {
  width: 50px;
  height: 50px;
  background-color: blue;
  border-radius: 2px;
  transform: translate(200px, 0);
}

JavaScript

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

var $box = $('#box');
var b = 200;
var duration = 2000;
function anime(current) {
console.log('current time: ', current);
	console.log($box.css('transform'));
  var c = 0 - b;
  var result = easeInOutExpo(current, b, c, 2000);
  console.log(result);
  b = result;
  if(current < duration) {
  	requestAnimationFrame(anime);
  }
}
requestAnimationFrame(anime);