【GSAP】staggerのeachとamountはどう違う？カードを順に表示する実装例

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

一覧を少しずつ表示するstaggerを、カード数が変わる実装で考えます。eachとamountの違い、配列順と見た目の順、遅延を長くしすぎない設計を説明します。

staggerは要素を増やす設定ではない

staggerは、複数の対象の開始時刻をずらす設定です。カードごとにsetTimeoutを作らず、一つのTweenの記述から、段差のある表示を作れます。対象が存在しなければカードは生成されません。データ取得やDOMの追加は、別の処理として先に完了させます。

サンプルは六つの項目を、ボタンで順に表示します。最初から内容を読める状態をCSSの基本にし、クリックしたときだけfromToで演出します。読み込み直後から自動で表示する用途へ変える場合も、スクリプトが動かなければ永久に透明になるCSSを基準にしないでください。

eachは間隔、amountは開始時刻の広がり

stagger: 0.1という数値指定は、開始を順番にずらす簡潔な書き方です。細かく制御するならstaggerをオブジェクトにし、eachまたはamountを指定します。eachは一つずつの開始間隔を指定したい場合、amountは全体として開始が広がる時間を決めたい場合に向きます。

例えば、項目数が増える検索結果でeachを固定すると、最後の項目が始まるまでの時間も増えます。数件のカードでは快適でも、数十件では待ち時間が長くなります。今回のようにamountへ上限を設けると、件数によって演出の開始が延々と後ろへ伸びる問題を抑えられます。

amountは、各要素自身のdurationを含めた完了時間そのものではありません。最後の要素が始まった後にも、その要素のアニメーション時間が必要です。画面のローディング解除を厳密に合わせたいなら、感覚で足し算せず、返されたTweenの完了を確認する設計にします。

表示順には意味がある

from: "start"なら、基本的には渡した対象配列の先頭側から開始します。CSSのorderで見た目だけを入れ替えていると、読み上げ順やDOM順、アニメーション順が一致しない場合があります。重要な手順や順位のある一覧は、まずHTMLの順序を正しく保ちます。

from: "center"や"edges"は、装飾性の高いロゴ一覧などで有効です。ただし、読み始めたい見出しが遅れて現れるなど、情報の優先順位を逆転させないようにします。randomは見るたびに注目位置が変わりやすいため、説明の順番がある画面には慎重に使います。

grid: "auto"を足す前に、配置が確定しているか見る

格子状の波を作る場合は、staggerのgridとfromの組み合わせが候補になります。grid: "auto"は要素の位置から配置を判断するため、フォントや画像の読み込み、表示幅が変わるタイミングに注意が必要です。display: noneの内部など、位置が測れない状態で作成しないようにします。

このデモは視覚上の中心から広がる演出を要件にしていないため、gridを指定せず、HTMLの順に処理します。二列へ変わっても、処理の説明が簡単なままです。高度な設定をすべて入れるより、どの順序を保証したいかを先に決めましょう。

動的な一覧は、対象配列を取り直す

初期化時に取得したcardsへ、後から追加したDOMは自動で入ってきません。無限スクロールやフィルターで要素が増える画面では、新しい対象を取得してからTweenを生成します。ただし、既に読んでいるカードまで毎回透明に戻すと、操作中の人を待たせる場合があります。

追加した要素だけ動かす、一覧全体は動かさず状態表示だけ変えるなど、データ更新の意味に合わせて選びます。商品一覧の並べ替えを滑らかにつなぎたいなら、表示をやり直すstaggerではなく、配置変更を扱うFlipが適している場合もあります。

最後の項目まで待たされないことを確認する

reduced motionでは移動と時間だけでなく、staggerのamountもゼロにしています。durationだけゼロにしても、開始時刻の段差が残る構成では待ち時間が残ります。短いアニメーションだから配慮が不要と考えず、実際の設定で確かめてください。

確認項目は、一件しかない場合、想定最大件数、二列への切り替え、連打、重要なリンクのフォーカスです。演出の目的は一覧を理解しやすくすることであり、読める内容を長く保留することではありません。件数の上限に合わせてamountとdurationを別々に調整します。

実装例：HTML・CSS・JavaScript

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

<button type="button" id="show">表示を再生</button>
<ul class="cards">
  <li class="card">設計</li><li class="card">実装</li>
  <li class="card">検証</li><li class="card">公開</li>
  <li class="card">運用</li><li class="card">改善</li>
</ul>

.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem; padding:0; list-style:none; max-width:45rem; margin:2rem auto; }
.card { min-height:7rem; display:grid; place-items:center;
  background:#abff84; border-radius:1rem; font-size:1.2rem; }
@media (max-width: 36rem) { .cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }

import { gsap } from "gsap";
const cards = gsap.utils.toArray(".card");
let tween;
document.querySelector("#show").addEventListener("click", () => {
  tween?.kill();
  const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
  tween = gsap.fromTo(cards,
    { y: reduce ? 0 : 24, opacity: 0 },
    { y: 0, opacity: 1, duration: reduce ? 0 : 0.45,
      ease: "power2.out", stagger: { amount: reduce ? 0 : 0.5, from: "start" } }
  );
});

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

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

参考資料

• GSAP公式：Staggers
• GSAP公式：gsap.to()
• GSAP公式：Flip
• GSAP公式：アイキャッチに使用したブランドアセット