const lerp = (a, b, t) => a + (b - a) * t;

console.log(lerp(0, 100, 0.5));

console.log(lerp(0, 100, 0.1));

console.log(lerp(50, 100, 0.5));

console.log(lerp(100, 50, 0.5));

const c = document.body.appendChild(document.createElement`canvas`)

  .getContext`2d`;

c.canvas.width = c.canvas.height = 100;

c.fillStyle = 'black';

c.fillRect(0, 0, 100, 100);

let time = 0;

const loop = () => {

  c.fillStyle = 'rgba(255, 255, 255, .5)';

  time += 0.01;

  if (time < 1) {

    c.fillRect(lerp(10, 55, time), lerp(10, 90, time), 5, 5);

  }

  window.requestAnimationFrame(loop);

};

loop();