Staggerは、同一の要素に対して、指定した秒数遅らせてアニメーションさせることができる機能です。
ちなみにStaggerは「スタッガー」と読み、日本語で「ずれ」「よろめき」という意味です。

▼Staggerの基本的な書き方

gsap.to(".square", {
  y: 100,
  stagger: 0.5 // 各要素の開始時間を0.5秒ずつずらす
});

▼実際の動き

See the Pen
【GSAP】stagger_No1 by ishi (@qwwbetnz-the-typescripter)
on CodePen.

stagger: 0.5 と記述すると、各要素が0.5秒ずつ遅れてy軸方向に100px移動しているのがわかります。
このように、短い記述で要素の開始遅延時間を決めることができます。

簡単に設定できるStaggerですが、もっと詳細に設定したい時には、プロパティを使用します。

▼Staggerでよく使うプロパティ

▼コード例

  stagger: {
  each: 0.5,
  from: "center",
  },

このように、stagger:{}の中に使用するプロパティを記述します。

fromは「どの要素からアニメーションを開始させるか」を指定できます。

▼fromの値一覧

▼edgesを指定した例

See the Pen
【GSAP】stagger_No3 by ishi (@qwwbetnz-the-typescripter)
on CodePen.

edgesを指定した場合、両端から開始され、中央に向かって進んでいきます。

▼3を指定した例

See the Pen
【GSAP】stagger_No3 by ishi (@qwwbetnz-the-typescripter)
on CodePen.

3を指定した場合、最初から数えて4番目の要素から開始され、その両隣へと進んでいきます。

要素がグリッド状に並んでいる場合、gridを使用すれば綺麗にアニメーションさせることができます。

▼コード例

  stagger: {
    each: 0.4,
    grid: '[3,3]',
  }

効果については見た方が分かりやすいと思いますので、こちらをどうぞ。

▼gridを使用しない例

See the Pen
【GSAP】stagger_No5 by ishi (@qwwbetnz-the-typescripter)
on CodePen.

▼gridを使用した例

See the Pen
【GSAP】stagger_No6 by ishi (@qwwbetnz-the-typescripter)
on CodePen.

どちらも3番目の要素からアニメーションするよう指定しています。

• gridを使用しない例　：　3番目から始まり、不規則に広がっているように見えてしまいます
• gridを使用する例　　：　3番目から、綺麗に周りに広がっていくのが分かります

このように、グリッド状に並んでいる要素に対しては、gridを使用するのがおすすめです！

Staggerは要素を順番にアニメーションさせる便利な機能ですが、単純にstagger: 0.2のように数値を渡すだけだと、全ての要素が均等に順番に動きます。

そこで、関数を使うと、各要素のアニメーション開始タイミングを自由に設定できるようになります。

▼コード例

gsap.to(".square", {
  y: 50,
  opacity: 1,
  duration: 0.5,
  stagger: function(index, target, list) {
    // index番目の要素の開始遅延を計算
    return index * 0.1 + Math.random() * 0.9;
  },
  ease: "power1.out"
});

staggerに関数を渡しました。この関数は、各要素ごとに1回ずつ呼ばれ、開始遅延を返します。
関数にすることで、ランダム制の追加などが可能になります。

• index * 0.1 → 順番に0.1秒ずつ遅れてアニメーション開始

• Math.random() * 0.9 → ランダムで最大0.9秒の遅延を追加

▼実際の動き（再度見たい場合は、リロードしてください）

See the Pen
Untitled by ishi (@qwwbetnz-the-typescripter)
on CodePen.

Staggerを活用すれば、要素を順番に、指定時間分遅延させてアニメーションさせることができます。

ぜひ、この記事をもとにアニメーション制作に挑戦してみてください！

【関連記事】

▼GSAPの導入方法や、アニメーションの作り方を知りたい方はこちら
GSAP入門編｜アニメーションの作り方を解説

▼GSAPの基礎や特徴、事例を知りたい方はこちら
GSAPの基礎と特徴を徹底解説｜事例から学ぶ活用法