Javascript-форум - плавная анимация

Этот код отлично отрабатывает анимацию

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Интерактивное программирование</title>
</head>

<body>
  <h1 id="heading">Привет, мир!</h1>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>
    var leftOffset = 0;
    var moveHeading = function() {
      $("#heading").offset({
        left: leftOffset
      });
      leftOffset++;
    };
    setInterval(moveHeading, 30);
  </script>
</body>

</html>

В этом коде анимации плавной нету

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Интерактивное программирование</title>
</head>

<body>
  <h1 id="heading">Привет, мир!</h1>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>
    var change = function () {
      for (var i = 0; i < 200; i++) {
       $("h1").offset({left: i});
     }
    };
    setInterval(change, 30);
  </script>
</body>

</html>

Я правильно понимаю что дело в цикле? Нельзя сделать с помощью цикла так чтобы offset работал плавно, а не с помощью "leftOffset++;" как в первом коде?