JavaScriptで特定の位置までスクロールしたときにアニメーションを実行する
スクロールアニメーション を Intersection Observer API (交差監視 API) を使用して実装してみたいと思います。

Intersection Observer API - MDN Web Docs

Intersection Observer API とは

Intersection Observer API (交差監視 API) は、ターゲットとなる要素が、祖先要素もしくは文書の最上位のビューポートと交差する変更を非同期的に監視する方法を提供します

MDN公式から引用しています。要素が交差しているか監視してくれるAPIのことを指します。

scrollイベントでも実装は可能

scroll イベントでも実装することも可能ですが、以下のよう問題があります。

スクロール毎にイベントが発生するためブラウザに大きな負荷がかかりがち

間引き処理を加えればある程度抑制は可能ですが、コードの見通しが悪くなりがちです。

let timer = null;
let delay = 100;
window.addEventListener('scroll', () => {
   clearTimeout( timer );
   timer = setTimeout(function(){ 
    /* 処理内容 */
  }, delay );
});

ブラウザのリサイズが行われた場合に必要なスクロール量の再計算が必要

resize イベントも発生頻度が高いため、間引き処理が必要となります。

window.addEventListener("resize", () => { /* 再計算処理 */ });

Intersection Observer API では間引き処理やリサイズ時の再計算が不要なため、
効率的な実装が可能です。

外部ライブラリではだめなのか

ScrollTrigger などの外部ライブラリを使用しても問題ありませんが、
スクロールアニメーション実装のためだけに何十kbもあるライブラリを
読み込むのは少々オーバーです。

複雑な処理を行いたい場合は、機能の揃っている外部ライブラリを使用すべきでしょう。
実装する内容に応じて適切な判断を行うべきです。

対応ブラウザについて

モダンブラウザは概ね対応しているため使用しても問題無いと思われます。
Internet Explorer 11 には対応していないため、Polyfill や Babel を使用してください。

動作デモ

今回も CodeSandBox を利用して実装を行いました。

多少重いため、極端に低スペックなPCでは利用が難しいですが
VSCodeと操作感がほぼ同じであったり、npmパッケージが簡単にインストールできたりと
非常に使いやすいため重宝しています。

今回は Bootstrap5公式サイト のサンプルページをそのまま利用させていただきました。
要素のある位置までスクロールを行うと、フワッと表示されます。

解説

作成した動作デモの仕様について解説します。

初めに

ICS MEDIA 様 の記事にて紹介されていたコードをほぼそのまま利用させていただいております。画面内に複数の要素が交差していた場合に遅延処理がかかるよう、改変を行っています。
JSでのスクロール連動エフェクトにはIntersection Observerが便利

仕様について

特定の data属性 を持つ要素とビューポートが交差した場合、クラスを追加します。
今回は data-anime-trigger をターゲットとして設定します。
data属性 にアニメーション再生前、.-visible にアニメーション再生後のスタイルを定義しておきます。

<!--  交差前 -->
<div class="item" data-anime-trigger></div>

<!--  交差後 -->
<div class="item -visible" data-anime-trigger></div>

複数の要素と交差した場合の仕様

複数の要素と交差した場合は、HTMLの上から順番にクラスが追加されていきます。
クラスの追加される順番を制御する場合は別途処理の追加が必要です。

まとめ

スクロールアニメーションを手軽に実装したい場合はこの方法をお試しください。
お疲れ様でした。