カテゴリー
お問い合わせ

【GSAP】stagger で複数要素を順番にアニメーション！stagger の便利な使い方とデモ3選！

GSAP
目次

Webサイトでカードの一覧やリストを表示する際、すべての要素を同時にフェードインさせるのではなく、「順番に少しずつズラして」表示させると、とても心地よいアニメーションになります。

GSAPの stagger（スタガー） プロパティを使えば、そんな複雑な順番待ちアニメーションがたった1行で実装可能です！ 今回は、一番シンプルな stagger の使い方に加え、from プロパティを使って「中央から広げる」「ランダムに表示する」といった、少し工夫を凝らしたデモをご紹介します。

デモ動作

See the Pen GSAP staggerの使い方 by mikanbako (@mikanbako) on CodePen.

全画面でのデモ動作は以下のリンクからご確認下さい！（別タブで開かれます）

実装コード紹介

【HTML】

<div class="l-wrap">
  <h2>GSAP stagger 活用デモ</h2>
  
  <!-- 💡 1. 基本のstagger -->
  <section class="p-section">
    <h3>1. 基本のstagger（左から順番に）</h3>
    <div class="c-box-container js-stagger-basic">
      <div class="c-box">1</div>
      <div class="c-box">2</div>
      <div class="c-box">3</div>
      <div class="c-box">4</div>
      <div class="c-box">5</div>
    </div>
  </section>

  <!-- 💡 2. from: "center" -->
  <section class="p-section">
    <h3>2. from: "center"（中央から外側へ）</h3>
    <div class="c-box-container js-stagger-center">
      <div class="c-box c-box--pink">1</div>
      <div class="c-box c-box--pink">2</div>
      <div class="c-box c-box--pink">3</div>
      <div class="c-box c-box--pink">4</div>
      <div class="c-box c-box--pink">5</div>
    </div>
  </section>

  <!-- 💡 3. from: "random" -->
  <section class="p-section">
    <h3>3. from: "random"（ランダムにポップアップ）</h3>
    <div class="c-box-container js-stagger-random">
      <div class="c-box c-box--green">1</div>
      <div class="c-box c-box--green">2</div>
      <div class="c-box c-box--green">3</div>
      <div class="c-box c-box--green">4</div>
      <div class="c-box c-box--green">5</div>
    </div>
  </section>
</div>

【CSS】

/* ベース装飾 */
.l-wrap {
  padding: 40px 20px;
  max-width: 700px;
  margin: 0 auto;
  color: #3e3e3e;
}

h2 {
  margin-bottom: 30px;
  font-size: 16px;
  color: #1bb4d4;
  text-align: center;
}

.p-section {
  padding: 30px;
  margin-bottom: 30px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgb(0 0 0 / 5%);
}

h3 {
  padding-bottom: 10px;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 2px solid #eee;
}

/* ボックスのレイアウト */
.c-box-container {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.c-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  background: #1bb4d4;
  border-radius: 8px;
}

.c-box--pink {
  background: #e83e8c;
}

.c-box--green {
  background: #28a745;
}

【JavaScript】

/* =========================================
   💡 1. 基本のstagger（左から順番に）
========================================= */
gsap.from(".js-stagger-basic .c-box", {
  y: 30,             // 下から30px上に移動
  opacity: 0,        // 透明から開始
  duration: 0.8,
  repeat: -1,
  stagger: 0.2       // 0.2秒ごとに順番に発火
});

/* =========================================
   💡 2. from: "center"（中央から外側へ）
========================================= */
gsap.from(".js-stagger-center .c-box", {
  y: 30,
  opacity: 0,
  duration: 0.8,
  repeat: -1,
  // 複雑な設定をする時はオブジェクト {} で指定します
  stagger: {
    each: 0.2,       // 0.2秒間隔
    from: "center"   // 中央の要素からアニメーション開始！
  }
});

/* =========================================
   💡 3. from: "random"（毎回違うランダムで無限ループ）
========================================= */
function playRandom() {
  gsap.fromTo(".js-stagger-random .c-box", 
    { 
      scale: 0, 
      opacity: 0 
    }, // 開始の状態
    {
      scale: 1, 
      opacity: 1, // 終わりの状態
      duration: 0.6,
      ease: "back.out(1.7)",
      stagger: {
        each: 0.15,
        from: "random" // 呼び出されるたびに新しいランダム順が計算される！
      },
      // アニメーションがすべて完了したら発火
      onComplete: () => {
        // 0.5秒待ってから、もう一度この関数を実行！
        setTimeout(playRandom, 500);
      }
    }
  );
}

// 最初の1回目をスタート
playRandom();

コードの解説

stagger の基本的な書き方

/* =========================================
   💡 1. 基本のstagger（左から順番に）
========================================= */
gsap.from(".js-stagger-basic .c-box", {
  y: 30,             // 下から30px上に移動
  opacity: 0,        // 透明から開始
  duration: 0.8,
  repeat: -1,
  stagger: 0.2       // 0.2秒ごとに順番に発火
});

一番シンプルな使い方は、stagger: 0.2 のように直接数値を指定する方法です。こうするだけで、対象となる複数の要素が左から順番に 0.2秒間隔 でアニメーションを開始します。

※stagger: 0.2 と stagger: { each: 0.2 } は同じ動作になります！

from プロパティで開始位置をコントロール！

/* =========================================
   💡 2. from: "center"（中央から外側へ）
========================================= */
gsap.from(".js-stagger-center .c-box", {
  y: 30,
  opacity: 0,
  duration: 0.8,
  repeat: -1,
  // 複雑な設定をする時はオブジェクト {} で指定します
  stagger: {
    each: 0.2,       // 0.2秒間隔
    from: "center"   // 中央の要素からアニメーション開始！
  }
});

デモの2つ目や3つ目のように、開始位置を変えたい場合は {}（オブジェクト）を使って指定します。

each：要素ごとのアニメーション間隔（秒）を指定します。

from：どこからアニメーションを始めるかを指定します。
・"center"：中央の要素から外側に向かって発火します。
・"edges"：両端から中央に向かって発火します。
・"end"：最後（右端）の要素から逆順で発火します。
・"random"：完全にランダムな順番で発火します。

この from を活用するだけで、コードをほとんど変えずに多彩な表現ができるのがGSAPの強力なポイントです！

補足：公式ドキュメント

・GSAP: Staggers

まとめ

今回はGSAPの stagger を使ったアニメーションの実装方法をご紹介しました。

CSSだけでも transition-delay を個別に設定すれば順番に動かすことは可能ですが、要素の数が増えたり、ランダムな動きをつけたりしようとするとコードが非常に煩雑になってしまいます。 GSAPの stagger なら、HTML側の要素数が増減しても自動で計算してくれるため、保守性も高くなります。ぜひ色々なイージング（ease）と組み合わせて、気持ちの良いアニメーションを作ってみてください！

Prev
Next

関連記事