Как запустить анимацию на КАЖДОМ div, когда они прокручиваются в поле зрения, против запуска всех анимаций, когда один div находится в поле зрения

Question

Я немного новичок здесь, и хотя у меня этот код работает так, как я хочу, я уверен, что должен быть лучший способ написать это.

КАК ЭТО РАБОТАЕТ

Поскольку первые 3 абзаца уже видны, я запускаю их вне функции прокрутки. Остальные 5 абзацев запускают ту же анимацию, что и первые три, когда они отображаются. Хотя я признаю, что считаю, что они просто запускаются, как только ударил div2, когда я предпочел бы, чтобы они запускались, когда их ударил. (это примечание, если у вас есть идеи, как сделать это лучше).

ЦЕЛЬ

Я чувствую, что есть НАМНОГО лучший способ написать это, не такой длинный. Если у вас есть понимание того, кто может написать лучший код в этой ситуации, я, безусловно, был бы признателен за это! Я также хотел бы знать, есть ли способ запустить анимацию (постепенное увеличение и скольжение вправо) на каждом элементе div, когда он появляется на экране, против текущей функциональности, где он запускает все элементы div (4-8), как только он достигает элемента div 2. (Надеюсь, это имеет смысл).

ЗДЕСЬ ДЕМО-САЙТ

(на тот случай, если вы хотите увидеть, где он живет)

https://stable.stable -demos.com / кто-мы-в /

Заранее спасибо !!

jQuery(function($) {
  // WHAT WE DO - ANIMATE PARAGRAPHS With FADE IN FROM LEFT
  var done = false;

  $(window).scroll(function() {

    if (!done) {
      var y = $(window).scrollTop(),
        x = $('.div2').offset().top - 10;
      if (y > x) {
        done = true;
        $('.div4')
          .delay(0)
          .animate({
            opacity: 1,
            marginLeft: '+=50'
          });
      }
      if (y > x) {
        done = true;
        $('.div5')
          .delay(1000)
          .animate({
            opacity: 1,
            marginLeft: '+=50'
          });
      }
      if (y > x) {
        done = true;
        $('.div6')
          .delay(2000)
          .animate({
            opacity: 1,
            marginLeft: '+=50'
          });
      }
      if (y > x) {
        done = true;
        $('.div7')
          .delay(3000)
          .animate({
            opacity: 1,
            marginLeft: '+=50'
          });
      }
      if (y > x) {
        done = true;
        $('.div8')
          .delay(4000)
          .animate({
            opacity: 1,
            marginLeft: '+=50'
          });
      }
    }

  });


  // THESE RUN RIGHT AWAY BECAUSE THEY"RE IN VEIW
  $('.div1').delay(300).animate({
    opacity: 1,
    "margin-left": '+=50'
  }, 900);
  $('.div2').delay(1200).animate({
    opacity: 1,
    "margin-left": '+=50'
  }, 900);
  $('.div3').delay(1900).animate({
    opacity: 1,
    "margin-left": '+=50'
  }, 900);


}); // End jQuery

.div1,
.div2,
.div3,
.div4,
.div5,
.div6,
.div7,
.div8 {
  opacity: 0;
  font-size: 48px;
  margin-left: -50px;
  font-size: 12px!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="min-height: 2000px">
  <div class="div1">
    <h2 class="space_groteskmedium large-font uppercase">We come in, put our heads down, work hard, and have a hell of a time doing it. we’ve built and are continuing to build a team of great people who do great work.</h2>
  </div>
  <div class="div2">
    <h2 class="space_groteskmedium large-font uppercase">We come in, put our heads down, work hard, and have a hell of a time doing it. we’ve built and are continuing to build a team of great people who do great work.</h2>
  </div>
  <div class="div3">
    <h2 class="space_groteskmedium large-font uppercase">We come in, put our heads down, work hard, and have a hell of a time doing it. we’ve built and are continuing to build a team of great people who do great work.</h2>
  </div>
  <div class="div4">
    <h2 class="space_groteskmedium large-font uppercase">We come in, put our heads down, work hard, and have a hell of a time doing it. we’ve built and are continuing to build a team of great people who do great work.</h2>
  </div>
  <div class="div5">
    <h2 class="space_groteskmedium large-font uppercase">We come in, put our heads down, work hard, and have a hell of a time doing it. we’ve built and are continuing to build a team of great people who do great work.</h2>
  </div>
  <div class="div6">
    <h2 class="space_groteskmedium large-font uppercase">We come in, put our heads down, work hard, and have a hell of a time doing it. we’ve built and are continuing to build a team of great people who do great work.</h2>
  </div>
  <div class="div7">
    <h2 class="space_groteskmedium large-font uppercase">We come in, put our heads down, work hard, and have a hell of a time doing it. we’ve built and are continuing to build a team of great people who do great work.</h2>
  </div>
  <div class="div8">
    <h2 class="space_groteskmedium large-font uppercase">We come in, put our heads down, work hard, and have a hell of a time doing it. we’ve built and are continuing to build a team of great people who do great work.</h2>
  </div>
</div>