JSFiddle - React, Tailwind, and code Playground

by soulwire

HTML

<span id="currframe"></span>
<script src="http://jsconsole.com/remote.js?1C35B7AC-3E1C-4F16-BDB7-8BFB82CE4FED"></script>

CSS

body {
    width: 100%;
    height: 100%;
}
#currframe {
    display: block;
    width: 10px;
    height: 10px;
    background: red;
    position: relative;
    -webkit-transform: translateZ(0);
}

JavaScript

requestAnimFrame = (function() {

    return  window.requestAnimationFrame       || 
            window.webkitRequestAnimationFrame || 
            window.mozRequestAnimationFrame    || 
            window.oRequestAnimationFrame      || 
            window.msRequestAnimationFrame     || 
            function (callback) {
                window.setTimeout(callback, 1000 / 60);
            };

})();

// Ease In Function
// Params: Time, Begin, Change (Finish - Begin), Duration
var easeIn = function(t, b, c, d) {
    
    return -c *(t/=d)*(t-2) + b;
    
};
const easeInOutQuad = (t, b, c, d) => {
      if ((t /= d / 2) < 1) return c / 2 * t * t + b;
      return -c / 2 * ((--t) * (t - 2) - 1) + b;
    };

// Red Block
var $currframe = $('#currframe');

// Starting time and duration.
var seconds = 0.5;
var time = 0;
var duration = 10 * seconds;

// Starting Target, Begin, Finish & Change
var target = {
    x: 0,
    y: 0
};

var begin = {
    x: 0,
    y: 0
};

var finish = {
    x: 0,
    y: 0
};

var change = {
    x: finish.x - begin.x,
    y: finish.y - begin.y
};

// Called on each frame.
var onEnterFrame = function () {
    
    begin.x = target.x;
    begin.y = target.y;

    change.x = finish.x - begin.x;
    change.y = finish.y - begin.y;

    
    // Easing into the target.
    target.x = easeInOutQuad(1, begin.x, change.x, duration);
    target.y = easeInOutQuad(1, begin.y, change.y, duration);

    // CSS Transform
    $currframe[0].style.webkitTransform = 'translate(' + target.x + 'px, ' +target.y + 'px)';
    
    // Increase time.
    time++;

};

// Initial animation loop.
// Checks to see if it's necessary
(function animationLoop () {
    requestAnimFrame(animationLoop);
    //if (time <= duration) { onEnterFrame(); }
    onEnterFrame();
})();

var touchMove = function (e) {
    e.preventDefault();
    finish.x = e.targetTouches[0].pageX;
    finish.y = e.targetTouches[0].pageY;

};

$(window)[0].addEventListener("touchmove", touchMove, false);

//...