【GSAP】ScrollTrigger入門｜スクロールで表示するカードとstartの読み方

情報確認日：2026年10月15日。GSAP 3系の公式資料を確認して作成した、本サイト独自の実装例です。

スクロールでカードを表示する実装から、ScrollTriggerの基本を説明します。triggerとアニメーション対象の分離、start、once、refresh、動きを減らす設定を扱います。

スクロール位置で始める動きと、連動する動きは違う

ScrollTriggerは、スクロール位置とアニメーションを結び付けるプラグインです。この例は、カードが一定の位置へ来たら時間ベースのTweenを再生します。スクロールを止めても、始まった表示は完了します。スクロール量と進み具合を一対一に対応させるscrubは指定していません。

ページを下へ動かすたびに少しずつカードが現れる用途なら、まずこの構成から始めると挙動を把握しやすくなります。演出が不要な利用者には普通のカードを表示し、コンテンツの表示そのものをJavaScriptの成功へ依存させすぎないことも大切です。

コアとは別に読み込み、登録する

npm環境ではGSAP本体とScrollTriggerをそれぞれimportし、gsap.registerPlugin(ScrollTrigger)を実行します。読み込み方式を混在させ、HTMLのCDNとバンドルへ別々のGSAPを入れると、どちらを設定しているか分かりにくくなります。プロジェクト内で一つの方式に揃えてください。

「Invalid property scrollTrigger」のような警告が出る場合、設定値を増やす前に、プラグインの読み込みと登録を確認します。ビルド時の問題なら、開発サーバーだけでなく本番用ビルドでも確認します。コンソールの警告を消す設定で、読み込み失敗を隠さないようにしましょう。

start: "top 85%"を二つの基準へ分ける

左側のtopはtriggerとなる要素の上端です。右側の85%はスクローラーの表示領域上端から85%の位置です。今回なら、sectionの上端が画面の下寄りへ来たところで始まる、と読むことができます。85%はページ全体の85%を読み終えたという意味ではありません。

開発中はscrollTriggerの設定へmarkers: trueを追加し、開始と終了の位置を可視化すると切り分けやすくなります。本番では外します。固定ヘッダーがある場合は、ヘッダーの高さや実際に読める領域に合わせて開始位置を調整してください。

triggerと動かす要素を分ける

サンプルでは外側のsectionを測定基準にし、内側のreveal-cardを動かします。測定に使う要素そのものを大きく移動させると、元の文書内の位置と目で見える位置の関係が追いにくくなります。外側の位置を安定させると、開始条件の意図を説明しやすくなります。

overflow: hiddenを追加すると、影やフォーカスの枠まで切れる場合があります。下から出す演出を作るためだけにページ全体へoverflowを付けるのではなく、必要な部分に限定します。アニメーションの見切れと、UIの見切れは別々に確認してください。

onceは一度だけ表示したいときに使う

once: trueは、下へ読み進める記事や紹介ページで、毎回カードを消したくない場合の候補です。完了後に上へ戻っても、基本的には表示を巻き戻さない構成にできます。反対に、何度でも再生したい展示的なページでは、toggleActionsなど別の設定を検討します。

一度だけの表示と、画面から出るたび消す表示を混在させると、ページを戻したときの読みやすさが落ちる場合があります。先に「読み返すときにどう見せるか」を決めてから設定を選びます。ScrollTriggerのonceは、コンテンツを一度だけ取得するキャッシュ機能ではありません。

refreshが必要なのは、位置の前提が変わったとき

画像の読み込みやアコーディオンの開閉で上側の高さが変わると、測定済みの位置も変わります。ScrollTrigger.refresh()はそのようなレイアウト変更の後に再計算するために使います。スクロールのたび呼び出すような処理にはしません。

画像にはwidthとheightやaspect-ratioで領域を確保し、読み込みによる高さの飛びを減らします。非表示のタブ内部で初期化した場合は、タブを表示してレイアウトが確定した後に再計算が必要か確認します。refreshだけで不正なHTML配置やCSSの競合が直るわけではありません。

公開前に速い操作と動きを減らす設定を確認する

この例ではmatchMediaで、動きを許可する条件に合うときだけTweenを作ります。条件が変わると、その中のアニメーションとScrollTriggerが元へ戻されます。最初からreduceなら、通常のCSSでカードが読めます。

低速スクロールだけでなく、ページ末尾へのジャンプ、ブラウザーの戻る操作、途中位置での再読み込みも確認します。さらに、GSAPを読み込めない状態でも本文が残るか点検してください。演出の成否より、どの到達方法でも情報を読み取れることを優先します。

実装例：HTML・CSS・JavaScript

以下は独立したデモ用のコードです。既存のViteなど、npmパッケージを解決できる開発環境で npm install gsap を実行し、HTMLをbody内、CSSをスタイルシート、JavaScriptをmain.jsへ配置してください。main.jsはHTMLの末尾からtype="module"で読み込みます。WordPressの記事本文へそのまま実行用スクリプトを貼る例ではありません。

<header class="intro"><h1>下へスクロールしてください</h1></header>
<main class="reveals">
  <section class="reveal"><div class="reveal-card"><h2>設計を整理する</h2><p>内容は初期状態からHTMLにあります。</p></div></section>
  <section class="reveal"><div class="reveal-card"><h2>小さく実装する</h2><p>一つずつ表示の挙動を確認します。</p></div></section>
  <section class="reveal"><div class="reveal-card"><h2>実機で確認する</h2><p>高速スクロールでも内容が読めるか確認します。</p></div></section>
</main>

.intro { min-height:90vh; display:grid; place-items:center; }
.reveals { max-width:50rem; padding:1rem; margin:auto; }
.reveal { margin:0 0 40vh; }
.reveal-card { background:#fec5fb; padding:2rem; border-radius:1rem; }

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
const mm = gsap.matchMedia();
mm.add("(prefers-reduced-motion: no-preference)", () => {
  document.querySelectorAll(".reveal").forEach((section) => {
    gsap.from(section.querySelector(".reveal-card"), {
      y: 28, opacity: 0, duration: 0.6, ease: "power2.out",
      scrollTrigger: { trigger: section, start: "top 85%", once: true }
    });
  });
});
// SPAなどでこの画面を破棄するときは mm.revert() を呼びます。

サンプルを確認するときの条件

APIの使い方は公式資料と照合しています。掲載コードはGSAP 3.15.0とDOMを模した環境で読み込み・操作を確認しましたが、実ブラウザーでの見た目、タッチ操作、描画性能を保証するものではありません。採用前に対象ブラウザーと実機で確認してください。JavaScriptを無効にした状態でも、必要な内容と操作が残るかを確認します。

参考資料

• GSAP公式：ScrollTrigger
• GSAP公式：インストール
• GSAP公式：gsap.matchMedia()
• GSAP公式：アイキャッチに使用したブランドアセット