JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <button class="start bt">Click, Show Effect!</button>
  クリックか、スクロールしてアニメ効果を見る！
</div>
<div class="all-div">
  <div class="obj">Hello word 01!</div>
  <div class="obj">Hello word 02!</div>
  <div class="obj">Hello word 03!</div>
  <div class="obj">Hello word 04!</div>
  <div class="obj">Hello word 05!</div>
  <div class="obj">Hello word 06!</div>
  <div class="obj">Hello word 07!</div>
  <div class="obj">Hello word 08!</div>
  <div class="obj">Hello word 09!</div>
  <div class="obj">Hello word 10!</div>
  <div class="obj">Hello word 11!</div>
  <div class="obj">Hello word 12!</div>
  <div class="obj">Hello word 13!</div>
  <div class="obj">Hello word 14!</div>
  <div class="obj">Hello word 15!</div>
  <div class="obj">Hello word 16!</div>
  <div class="obj">Hello word 17!</div>
  <div class="obj">Hello word 18!</div>
  <div class="obj">Hello word 19!</div>
  <div class="obj">Hello word 20!</div>
  <div class="obj">Hello word 21!</div>
  <div class="obj">Hello word 22!</div>
  <div class="obj">Hello word 23!</div>
  <div class="obj">Hello word 24!</div>
  <div class="obj">Hello word 25!</div>
  <div class="obj">Hello word 26!</div>
  <div class="obj">Hello word 27!</div>
  <div class="obj">Hello word 28!</div>
  <div class="obj">Hello word 29!</div>
  <div class="obj">Hello word 30!</div>
  <div class="obj">Hello word 31!</div>
  <div class="obj">Hello word 32!</div>
  <div class="obj">Hello word 33!</div>
  <div class="obj">Hello word 34!</div>
  <div class="obj">Hello word 35!</div>
</div>

CSS

.bt {
  margin: 10px;
  padding: 10px;
  font-size: 18px;
}

.obj {
  font-size: 48px;
  opacity: 0;
  background-color: rgba(231, 222, 222, 1);
  margin: 10px;
  padding: 10px;
}

.ts {
  opacity: 1;
  transform: translateY(-20px);
  transition: transform 0.8s ease-out 0s, opacity 0.8s ease-out 0s;
}

JavaScript

$(".start.bt").click(function() {
  $(".obj").each(function(){
    $(this).removeClass("ts");
    $(this).removeAttr('style');
  });
  display();
});

function display() {
  var counter = 0; // スクロールより、露出した要素のみのカウンター
  $(".obj").each(function() {

    var obj_bottom = $(this).offset().top + $(this)[0].offsetHeight;
    var scroll_bottom = $(window).scrollTop() + $(window).height();
    // 下の要素＋上の要素がブラウザに露出した際に
    if (obj_bottom < scroll_bottom && $(this).offset().top > $(window).scrollTop()) {
      // 露出した要素のみ
      if (!$(this).hasClass("ts")) {
        // アニメ効果cssクラスの追加＋遅延時間を各要素に追加
        $(this).addClass("ts");
        $(this).css("transition-delay", counter * 150 + "ms");
        counter++;
      }
    } else {
      // 上の要素＋下の要素が不可視になったら、アニメ効果css＋遅延cssの除去
      $(this).removeClass("ts");
      $(this).removeAttr('style');
    }
  });
}

// スクロールされた時に、要素露出のチェック
$(window).on("scroll", function() {
  display();
});

display()