JSFiddle - React, Tailwind, and code Playground

by phil_mcc

HTML

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

CSS

#box {
    background-color:black;
    width:10px;
    height:10px;
    position:absolute;
       
}

JavaScript

function moveTo(el, x, y, duration) {
    var startTime = new Date().getTime();
    var originalOffset = el.offset();
    var animate = function() {
        var time = new Date().getTime();
        var dt = time - startTime;
        if (dt < duration) {
            setTimeout(animate , 50);
            var percent = (dt/duration);
            var dx = (x - originalOffset.left)*percent;
            var dy = (y - originalOffset.top)*percent;
                
            el.offset({left:originalOffset.left + dx, top:originalOffset.top+dy});

        }else  {
            el.offset({left:x, top: y});
        }
       
    }
    setTimeout(animate , 50);
}
moveTo($("#box"), 100,100, 400);