HTML

HTMLは簡単な構造でbox達をbox_wrapで囲んでいるだけです。

HTML
コピー
<div class="box_wrap">
  <div class="box">サンプルボックス</div>
  <div class="box">サンプルボックス</div>
  <div class="box">サンプルボックス</div>
  <div class="box">サンプルボックス</div>
  <div class="box">サンプルボックス</div>
  <div class="box">サンプルボックス</div>
  <div class="box">サンプルボックス</div>
  <div class="box">サンプルボックス</div>
  <div class="box">サンプルボックス</div>
  <div class="box">サンプルボックス</div>
</div>

CSS

CSSも軽く見栄えを整える程度です。
.boxに.readyを追加することでアニメーションさせたいので最初は.boxが見えないようにopacity: 0;にしています。

CSS
コピー
.box_wrap{
  margin-left: auto;
  margin-right: auto;
  width: 70%;
}

.box{
  background: #e6e6e6;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  width: 100%;
  height: 50px;
  
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s cubic-bezier(0,1.2,1.0,1.0);
}
.box.ready{
  opacity: 1;
  transform: translateY(0px);
}

jQuery

コードの後に何をしているか説明しています。

jQuery
コピー
$(window).on('scroll', function(){
  let scrollTop = $(window).scrollTop();
  let winH = $(window).height();

  if($('.box_wrap').offset().top - winH * 0.5 < scrollTop){

    $('.box_wrap').find('.box').each(function(index){
      $(this).delay(index * 300).queue(function(){
        $(this).addClass('ready');
      });
    }); 
  }
});

スクロールアニメーションについては理解しているとして割愛させていただきます。
スクロールアニメーションについてはこちらの記事が参考になるかも知れません。

【NOプラグイン】jQueryで表示領域に入ったら開始するスクロールアニメーションの実装

プラグインに頼らずに表示領域に入ったら開始するスクロールアニメーションの実装をしていきます。 割とコピペしてどこでも使えるので便利なのではと思います。

7行目
each()メソッドで.box_wrap内の.boxの数だけ処理をします。
functionの引数であるindexには、.boxのindex番号が入ります。
index番号は0からは始まります。

8行目
セレクタにはthisを設定します。
ここではthisはひとつひとつの.boxを指します。

delay()メソッドでアニメーションを遅らせます。
index * 300によって1番最初の.boxはindexが0なので遅延は発生しません。
2番目の.boxからは300msずつ遅延する仕組みです。

queue()メソッドで前に実行したアニメーションが終わってから次のアニメーションを実行します。

9行目
セレクタにはthisを設定します。
ここでもthisはひとつひとつの.boxを指します。

addClass()メソッドで.boxに.readyクラスを追加します。