JSFiddle - React, Tailwind, and code Playground

by ryanwfiorini

HTML

<html>
    <body>
        <div id="test" style="width:50px;height:50px;background:red"></div>
    </body>
</html>

JavaScript

function animate(el,params)
{
     var counter=0;
     var time=parseInt(params["time"]);
     var x=params["x"];
     var y=params["y"];
     var intervals=Math.ceil(time/10);
     var stepX=x>0?x/intervals:0;
     var stepY=y>0?y/intervals:0;
    var mov=function(el,x,y){
       el.style.msTransform="translate("+x+"px,"+y+"px)";
        console.log(x,y);
        counter++;
        if(counter<intervals)
         window.setTimeout(function(){
           mov(el,stepX+x,stepY+y);   
        },10);
    }
    
    mov(el,stepX,stepY);   
        
}
var obj={
    x:200,
    y:500,
    time:1000};
animate($("test"),obj)