【GSAP】stagger(スタッガー)とは何か？使い方を実例で解説（使えるオプション｜each, from, grid, axis,ease, repeat ）

javascript-prograshi（プロぐらし）-kv JavaScript
記事内に広告が含まれていることがあります。

GSAPのコードの中で「stagger」という指定を見かけることがあるかと思います。staggerはとても便利な機能です。

ここでは、staggerとは何か？や具体的な使い方を実例を交えて解説しています。


staggerとは何か？

GSAPのstaggerは、複数の要素に対してアニメーションを適用する際に、それぞれの開始時間をずらすための機能です。

staggerを使用しない場合、複数の要素はすべて同時にアニメーションを開始します。

staggerを適用すると、指定した時間間隔（eachプロパティ）や合計時間（amountプロパティ）に基づいて、各要素のアニメーション開始が順番に遅延されます。

これにより、要素が流れるように、あるいは波打つように動く、より動的なアニメーション表現が可能になります。


staggerの由来

staggerは日本語で「スタッガー」と読みます。英単語の意味としては「よろめく」「千鳥足で歩く」「ずらす」です。

GSAPにおけるstaggerは、まさにこの「ずらす」という意味で使われています。



staggerの使い方

staggerの使い方は簡単です。プロパティでstagger: x を指定するだけです。xは次の要素がアニメーションを開始する秒数です。

例えば、以下のような記述だと、boxというクラスをもつ要素が0.1秒おきにy方向に100pxずつ移動します。

gsap.to('.box', {
	y: 100,
	stagger: 0.1
});


staggerの実例（あり/なしによる違い）

staggerの動きを見るために、以下にstaggerがある場合とない場合の実例を紹介します。

例として、以下のような複数の青いボックスを用意し、これをGSAPで動かします。

<style>
.gsap-container {
  display: flex;
  gap: 10px;
  padding: 20px;
}
.gsap-box {
  width: 50px;
  height: 50px;
  background-color: dodgerblue;
  border-radius: 8px;
}
</style>
  
<div class="gsap-container">
  <div class="gsap-box"></div>
  <div class="gsap-box"></div>
  <div class="gsap-box"></div>
  <div class="gsap-box"></div>
  <div class="gsap-box"></div>
</div>


staggerがない場合

staggerがない状態で、.gsap-boxをまとめて動かすと以下のようになります。

function animateWithoutStagger() {
  gsap.to(".gsap-box", {
    x: 200,
    duration: 1,
    ease: "power2.out"
  });
}

function resetElements() {
  gsap.to(".gsap-box", {
    x: 0,
    duration: 0.5,
    ease: "power2.inOut"
  });
}


staggerがある場合

上記にstaggerを設定すると、.gsap-boxが一つ一つ指定した秒数ずつずれて動きます。

  function animateWithStagger() {
    gsap.to(".gsap-box", {
      x: 200,
      duration: 1,
      ease: "power2.out",
      stagger: 0.2 // ここで時間差を設定
    });
  }

  function resetElements() {
    gsap.to(".gsap-box", {
      x: 0,
      duration: 0.5,
      ease: "power2.inOut"
    });
  }



staggerで指定できるオプション

利用できるオプションの一覧

staggerではオプションで様々な処理を追加することができます。

staggerで指定できるオプション
  • each
  • from
  • grid
  • ease
  • axsis
  • repeat

例えば、以下のように記述します。

gsap.to('.box', {
	y: 100,
	stagger: {
		each: 0.1,
		from: 'center',
		grid: 'auto',
		ease: 'power2.inOut',
		repeat: -1
	}
});


以下でそれぞれのオプションについて解説します。


each（各要素をズラす秒を指定）

staggerでオプションを利用したい場合は、基本構文のようなstagger: 0.2といった書き方ができません。

そこで、オプションを使う場合にそれぞれの要素をズラス時間指定を行うのがeachプロパティです。

つまり、stagger: 0.2 と stagger: { each: 0.2 } は同じ挙動になります。

stagger: x

  • 他のオプション（from, grid, ease, axis など）は指定できない


stagger: { each: x }

  • each に数値を指定することで stagger: x と同じ意味になる。
  • 他のオプションも同時に指定できるので、応用的なアニメーションが作れる。


from（どの位置からずらしを開始するか）

fromではどの位置からstaggerによるずらしを開始するかを指定することができます。デフォルトは０です。

fromの指定方法
  • 数値(インデックス)
  • "start"
  • "center"
  • "edges"
  • "random"
  • "end"


例えば、ずらしの開始を「from: “center”」とすると中央から両脇にアニメーションが実行されます。

「from: “random”」にするとランダムに実行します。

  function animateWithStagger3() {
    gsap.to(".gsap-box3", {
      y: 50,
      backgroundColor: "blue",
      duration: 1,
      ease: "power2.out",
      stagger: {
        each: 0.2,
        from: "center"
      }
    });
  }

  function resetElements3() {
    gsap.to(".gsap-box3", {
      y: 0,
      backgroundColor: "lightpink",
      duration: 1,
      ease: "power2.inOut",
      stagger: {
        each: 0.2,
        from: "random"
      }
    });
  }



gird（gridの要素の制御）

gridプロパティは、要素がグリッド状に配置されている場合に、アニメーションの開始順序をより細かく制御するための機能です。

単一の数値やeachプロパティだけでは、アニメーションは一列に流れるように動きますが、gridを使うと、放射状や対角線、ランダムなど、視覚的に面白い動きを作り出すことができます。

fromと組み合わせて使うことが多いです。

例えば以下のようにすると、５行5列のグリッドに対して中心からアニメーションを実行します。

  gsap.to(".gsap-box4", {
    opacity: 1,
    scale: 1,
    duration: 0.5,
    stagger: {
      grid: [5, 5], // グリッドのサイズを指定（5行, 5列）
      from: "center", // アニメーションの中心点を指定
      each: 0.1
    }
  });


　↓ 応用編

<style>
.gasp-grid-wrapper {
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 40px;
  padding: 10px;
  background-color: #f0f0f0;
}
.gasp-grid-wrapper .gsap-grid-container {
  display: grid;
  grid-template-columns: repeat(5, 50px);
  grid-template-rows: repeat(5, 50px);
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}
.gasp-grid-wrapper .gsap-box4 {
  width: 50px;
  height: 50px;
  background-color: dodgerblue;
  border-radius: 8px;
  opacity: 0; /* 初期状態は非表示 */
}
.gasp-grid-wrapper .controls {
  margin-top: 40px;
}
.gasp-grid-wrapper button {
  padding: 10px 20px;
  margin: 4px 10px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  background-color: #333;
  color: #fff;
}
</style>

<div class="gasp-grid-wrapper">

  <div class="controls">
    <button onclick="animateFromCenter()">中心から広がる</button>
    <button onclick="animateFromEdges()">端から中心へ</button>
    <button onclick="animateFromDiagonal()">対角線に広がる</button>
  </div>

  <div class="gsap-grid-container"></div>
</div>

<script>
// JavaScriptで5x5のボックスを作成
document.addEventListener("DOMContentLoaded", () => {
  const container = document.querySelector(".gsap-grid-container");
  for (let i = 0; i < 25; i++) {
    const box = document.createElement("div");
    box.classList.add("gsap-box4");
    container.appendChild(box);
  }
});

// アニメーションをリセットする関数
function resetElements4() {
  gsap.to(".gsap-box4", {
    opacity: 0,
    scale: 1,
    duration: 0.01
  });
}

// 例1: 中心から広がる動き
function animateFromCenter() {
  resetElements4();
  gsap.to(".gsap-box4", {
    opacity: 1,
    scale: 1,
    duration: 0.5,
    stagger: {
      grid: [5, 5], // グリッドのサイズを指定（5行, 5列）
      from: "center", // アニメーションの中心点を指定
      each: 0.1
    }
  });
}

// 例2: 端から中心に向かう動き
function animateFromEdges() {
  resetElements4();
  gsap.to(".gsap-box4", {
    opacity: 1,
    scale: 1,
    duration: 0.5,
    stagger: {
      grid: "auto", // GSAPが自動でグリッドを検出
      from: "edges", // アニメーションの開始点を端に指定
      each: 0.1
    }
  });
}

// 例3: 対角線に広がる動き
function animateFromDiagonal() {
  resetElements4();
  gsap.to(".gsap-box4", {
    opacity: 1,
    scale: 1,
    duration: 1,
    stagger: {
      grid: "auto",
      from: "top-left", // 開始点を左上に指定
      each: 0.1,
      axis: "x" // X軸（横方向）に沿ってアニメーションを遅延させる
    }
  });
}
</script>


ease（動きの緩急の指定）

easeはアニメーションの緩急（イージング）を指定するプロパティです。staggerの中で使うと、各ステップの遅延に対して「イージング」を適用することができます。

例えば、以下のように指定します。

gsap.to(".box", {
  x: 200,
  duration: 1,
  stagger: {
    each: 0.1,
    ease: "power2.inOut"
  }
});


GSAPには様々なイージングが用意されています。


axis（軸の固定）

axisはグリッドの要素にstaggerを適用するときに軸（水平方向や垂直方向）などを固定するためのものです。

axis（軸の固定）
  • axis: "x"　X軸（水平）方向で固定
  • axis: "y"　Y軸（垂直）方向で固定


以下のようにxとyでそれぞれ固定した場合を紹介します。

// 例1: y軸方向で固定
function animateFromCenterAxisY() {
  resetElements5();
  gsap.to(".gsap-box5", {
    opacity: 1,
    scale: 1,
    duration: 0.5,
    stagger: {
      grid: [5, 5], // グリッドのサイズを指定（5行, 5列）
      from: "center", // アニメーションの中心点を指定
      each: 0.1,
      axis: "y"
    }
  });
}
  


// 例2: x軸方向で固定
function animateFromCenterAxisX() {
  resetElements5();
  gsap.to(".gsap-box5", {
    opacity: 1,
    scale: 1,
    duration: 0.5,
    stagger: {
      grid: [5, 5], // グリッドのサイズを指定（5行, 5列）
      from: "center", // アニメーションの中心点を指定
      each: 0.1,
      axis: "x"
    }
  });
}



repeat（繰り返し回数の指定）

repeatを使うと、stagger自体を繰り返す回数を指定することができます。

無限ループさせたい場合は repeat: -1 とします。

gsap.to(".box", {
  x: 100,
  duration: 1,
  yoyo: true,
  stagger: {
    each: 0.2,
    repeat: -1,
  }
});
注意点

repeatをstaggerの中に書くか、外に書くかで挙動が変わります。

staggerの外
・アニメーション全体を繰り返す
・要素全体の動きをまとめてリピートするイメージ

staggerの中
・各要素の「staggerによるディレイ込みのアニメーション」が繰り返される
・要素ごとに個別にリピートするイメージ


    // 外：全体をまとめて繰り返す
    gsap.to(".repeat-container1 div", {
      y: 100,
      duration: 1,
      stagger: 0.3,
      repeat: -1,    // 全体を繰り返す
      yoyo: true
    });

    //内：各要素が個別に繰り返す
    gsap.to(".repeat-container2 div", {
      y: 100,
      duration: 1,
      stagger: {
        each: 0.3,
        repeat: -1,  // 各要素ごとに繰り返す
        yoyo: true
      }
    });

staggerの外にrepeatを記載

staggerの中にrepeatを記載



参考リンク

（GSAP公式）Staggers

タイトルとURLをコピーしました