フェードインを使ったmain.jsのエラーについて

実現したいこと

フェードインで要素を表示させたい

前提

エラーが出ているのが原因なのか不明なのですが
ページを下にスクロールして青いボックスがブラウザで表示されたら
画面下からフェードインするようなアニメーションで表示し
かつアニメーションの開始を遅らせる設定を追加して、PCで見た場合に階段状で表示されるように
したいのですがうまくいきません

特に1366pxサイズではうまくいっているような気がするのですが
375pxでは画面をスクロールさせてもサンプルページのように綺麗にフェードアップされないです。

発生している問題・エラーメッセージ

該当のソースコード

https://jsfiddle.net/n48camth/

表示したいイメージ
サンプルページはこちらです
https://demo.techacademy.jp/website-self-study/third/?_ga=2.10113461.1079357447.1686536518-469731249.1684618225#