イージングの公式を使って要素をなめらかに動かす

イージングって何？

開始とか終了地点に近づくにつれて速度が変わるアレのこと。
今更感満載なので詳しくはググってね。

実装

See the Pen Untitled by m1y474 (@m1y474) on CodePen.

const div = document.querySelector("div");
const span = document.querySelector("span");
let left = 0;

move();

function move() {
  // 求める値 += (目標値 - 現在の値) * 0.02
  left += ((500 - 16) - left) * 0.02; // 目標値に到達した時点でspanが見切れるため横幅の16を減算
  span.style.left = `${left}px`;

  requestAnimationFrame(move);
}