Javascript – How to achieve smooth frame rate independent animations

function runAnimation() {
  const squareElement = document.getElementById('square');
  const fixedTimeStep = 1000 / 60;
  const steps = 25;
  const friction = 0.68;
  const target = 400; // Pixels
  const settleThreshold = 0.001;

  let position = 0;
  let previousPosition = 0;
  let velocity = 0;

  let lastTimeStamp = 0;
  let lag = 0;
  let animationFrame = 0;

  function animate(timeStamp) {
    if (!animationFrame) return;
    if (!lastTimeStamp) lastTimeStamp = timeStamp;

    const deltaTime = timeStamp - lastTimeStamp;
    lastTimeStamp = timeStamp;
    lag += deltaTime;

    while (lag >= fixedTimeStep) {
      update();
      lag -= fixedTimeStep;
    }

    const lagOffset = lag / fixedTimeStep;
    render(lagOffset);

    if (animationFrame) {
      animationFrame = requestAnimationFrame(animate);
    }
  }

  function update() {
    const displacement = target - position;
    previousPosition = position;

    velocity += displacement / steps;
    velocity *= friction;
    position += velocity;
  }

  function render(lagOffset) {
    const interpolatedPosition =
      position * lagOffset + previousPosition * (1 - lagOffset); // Linear interpolation

    squareElement.style.transform = `translate3d(${interpolatedPosition}px, 0px, 0px)`;

    const displacement = target - position;

    if (Math.abs(displacement) < settleThreshold) {
      cancelAnimationFrame(animationFrame);
    }
  }

  animationFrame = requestAnimationFrame(animate);
}

setTimeout(runAnimation, 500);

body {
  background-color: black;
}

#square {
  background-color: cyan;
  width: 100px;
  height: 100px;
}

<div id="square"></div>

function plotCharts() {
  function randomIntFromInterval(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }

  function simulate(hz, color) {
    const chartData = [];

    const target = 400; // Pixels
    const settleThreshold = 0.001;

    const steps = 25;
    const friction = 0.68;
    const fixedTimeStep = 1000 / 60;
    const deltaTime = 1000 / hz;

    let position = 0;
    let previousPosition = 0;
    let velocity = 0;

    let timeElapsed = 0;
    let lastTimeStamp = 0;
    let lag = 0;

    function update() {
      const displacement = target - position;
      previousPosition = position;

      velocity += displacement / steps;
      velocity *= friction;
      position += velocity;
    }

    function shouldSettle() {
      const displacement = target - position;
      return Math.abs(displacement) < settleThreshold;
    }

    while (!shouldSettle()) {
      const timeStamp = performance.now();

      if (!lastTimeStamp) {
        lastTimeStamp = timeStamp;
        update();
      }

      /* 
      Number between -1 to 1 including numbers with 3 decimal points
      The deltaTimeFluctuation variable simulates the fluctuations of deltaTime that real devices have. For example, if the device has a refresh rate of 60Hz, the time between frames will almost never be exactly 16,666666666666667 (1000 / 60).
      */
      const deltaTimeFluctuation =
        randomIntFromInterval(-1000, 1000) / 1000;
      const elapsed = deltaTime + deltaTimeFluctuation;

      lastTimeStamp = timeStamp;
      lag += elapsed;

      while (lag >= fixedTimeStep) {
        update();
        lag -= fixedTimeStep;
      }

      const lagOffset = lag / fixedTimeStep;

      const interpolatedPosition =
        position * lagOffset + previousPosition * (1 - lagOffset);

      timeElapsed += elapsed;

      chartData.push({
        time: parseFloat((timeElapsed / 1000).toFixed(2)),
        position: interpolatedPosition,
      });
    }

    const timeData = chartData.map((point) => point.time);
    const positionData = chartData.map((point) => point.position);

    const canvas = document.createElement("canvas");
    canvas.width = 600;
    canvas.height = 400;
    const ctx = canvas.getContext("2d");
    document.body.appendChild(canvas);

    const chart = new Chart(ctx, {
      type: "line",
      data: {
        labels: timeData,
        datasets: [{
          label: `${hz}Hz (with Interpolation)`,
          data: positionData,
          borderColor: color,
          fill: false,
        }, ],
      },
      options: {
        scales: {
          x: { title: { display: true, text: "Time (seconds)" } },
          y: { title: { display: true, text: "Position (px)" } },
        },
      },
    });
  }

  const simulations = [{
      hz: 30,
      color: "yellow"
    },
    {
      hz: 60,
      color: "blue"
    },
    {
      hz: 120,
      color: "red"
    },
    {
      hz: 240,
      color: "cyan"
    },
    {
      hz: 360,
      color: "purple"
    },
  ];

  simulations.forEach((simulation) => {
    simulate(simulation.hz, simulation.color);
  });
}

plotCharts()

body {
  background-color: black;
}

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>