I have html <img> and want animately move it from one place to another. For example from 0;0 to 100;100 on webpage. I have function makeStep() that takes element.style.top and element.style.left properties and change them once by 0.1px.

And then i need to apply my function many times with some delay. First desicion is make setInterval, like:

var isDone = false;
function makeMove() {
    isDone = makeStep(); 
    if(isDone) {
        clearInterval(movingInterval);
    }
}
var movingInterval = setInterval(makeMove, 10);

I also have second variant with some habd-made sleep():

// function taken from internet
const sleep = (miliseconds) => {
  const waitUntil = new Date().getTime() + miliseconds
  while(new Date().getTime() < waitUntil) {
      // do nothing
  }
}

var isDone = false;
while(!isDone) {
    isDone = makeStep();
    sleep(10);
}

When my button calls only one command (0;0 -> 100;100), setInterval work perfect, but sleep don't redraw every step, so <img> disappears at 0;0 and appears only at 100;100, avoiding appearence at 0.1;0.1, 0.2;0.2 etc.

But when my button calls array of commands, like for (cmnd in cmndList) doMove(cmnd);, setInterval becomes broken. It calls all the commands at once so if i call moves 0;0->100;100->300;300, it will came to 200;200 (since 100;100 + 200;200 = 300;300 and it's the furtherst way in command queue).

Sleep also dont work correctly. When i tap button, after few seconds <img> disappears at start point and appears at very last point that is calculated correctly, but without rendering all way to it.

How can i make any of this functions work and show correctly? I know that now i'm inventing something like pixi.js, but point is that now i have to do it.