スクロールし画面内に入ったブロックをアニメーション表示する方法

完成イメージを例に、以下の手順で作成します。

1. 「3カラム」ブロックを配置します。
2. アニメーションするブロックの高度な設定→追加CSSクラスにtargetと入力します。
3. 各ブロックのアニメーション動作に応じて、高度な設定→追加CSSクラスにmy-left、my-center、my-rightを追加入力します。

以下のコードをjavascript.jsに追加します。
画面に表示されたブロック（target）に、CSSクラスis-activeが付加されます。

/**
 * IntersectionObserverを使用して要素の画面内交差を監視し、画面内に入った際にアクティブクラスを付与
 *
 * @param {string} targetSelector - 監視対象とする要素のCSSセレクタ
 * @param {string} activeClass - 要素が画面内に入った際に追加するクラス名
 * @param {IntersectionObserverInit} [options] - IntersectionObserverの設定オプション（省略可）
 */
const observeElements = (targetSelector, activeClass, options) => {
  // 監視対象となるすべての要素を取得
  const elms = document.querySelectorAll(targetSelector);

  // 要素の状態を監視
  const observer = new IntersectionObserver((entries) => {
    // 監視している要素を1つずつ処理
    entries.forEach((entry) => {
      // 要素が画面内に入った場合
      if (entry.isIntersecting) {
        entry.target.classList.add(activeClass);

        // 一度アニメーションした要素は監視対象から削除
        observer.unobserve(entry.target);
      }
    });
  }, options);

  // 取得した各要素に対して監視を開始
  elms.forEach((elm) => observer.observe(elm));
};

// DOMが完全に読み込まれたときに実行
document.addEventListener('DOMContentLoaded', function () {
  observeElements(
    '.target',
    'is-active',
    { threshold: 0.2 }
  );
});

アニメーション対象の要素をtarget以外にしたい場合は、複数のクラスをカンマ区切りで指定することも可能です。

// DOMが完全に読み込まれたときに実行
document.addEventListener('DOMContentLoaded', function () {
  observeElements(
    '.my-left, .my-center, .my-right', // 監視対象とする複数の要素のCSSセレクタ
    'is-active',                       // 画面内に入った際に追加するアクティブクラス名
    'is-finished',                     // アニメーション完了後に追加するクラス名
    { threshold: 0.2 }                 // 要素が20%見えたタイミングで発火させるためのオプション
  );
});

以下のコードをstyle.cssに追加します。

/* アニメーション対象 */
.my-left,
.my-center,
.my-right {
  opacity: 0;
  transform: translateY(100px);

  &.is-active {
    animation-duration: 1.8s;
    animation-fill-mode: forwards;
    animation-name: fadeInUp;
  }
}

.my-center {
  animation-delay: 500ms;
}

.my-right {
  animation-delay: 1000ms;
}

@keyframes fadeInUp {
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}