【GSAP】Staggerで時間差を作り順番にアニメーションさせる方法

GSAPで順番にアニメーションさせるにはどうしたらいいの？

連続した同じ要素を一度にアニメーションさせるのではなく、GSAPのStaggerというプロパティで時間差を作り、0.2秒ごとなど順番にアニメーションさせる方法を解説していきます。

GSAPを使ったことがないという人は、まず以下の記事を参照下さい。

じゅんぺいブログは、Web制作（コーディング・WordPress制作）の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください！

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適です。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
（有料になっていたらすいません🙇‍♂️）

＼ 完全無料 ／

ZeroPlus Gate公式サイト

毎日先着制！

GSAPのStaggerで時間差を作り順番にアニメーションさせる方法

まずはStaggerを使わずに同じ要素を並べた状態でアニメーションさせてみます。

HTMLはこちら。

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

同じclass名の要素を5つにしています。

JavaScriptはこちら。

gsap.to(".box", {
  y: 100, // 下に100px移動
  backgroundColor: "#ffb6c1", // 背景色
  borderRadius: "50%", // 正円
  rotate: 360, // 360°回転
  duration: 2, // 2秒間アニメーション
  repeat: -1, // リピート無限
  yoyo: true, // リピートで順方向と逆方向を繰り返す
  ease: "none", // イージングなし(等速)
});

色々書いていますが、とりあえず気にしなくてOKです。

サンプルはこちら。

See the Pen
GSAP（Staggerなし） by junpei (@junpei-sugiyama)
on CodePen.

全て同じタイミングで動いていますね。

これをStaggerを使って動くタイミングをズラしたいと思います。

Staggerの基本的な書き方

Staggerの書き方は非常に簡単で、最後の一行を追記するだけです。

gsap.to(".box", {
  y: 100, // 下に100px移動
  backgroundColor: "#ffb6c1", // 背景色
  borderRadius: "50%", // 正円
  rotate: 360, // 360°回転
  duration: 2, // 2秒間アニメーション
  repeat: -1, // リピート無限
  yoyo: true, // リピートで順方向と逆方向を繰り返す
  ease: "none", // イージングなし(等速)
  stagger: 0.5, // 0.5秒遅れて順番に再生
});

そしてサンプルがこちらです。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

1つずつ順番にアニメーションしています。

ちなみにHTMLとCSSは変わっていません。

Staggerオブジェクトの書き方

先ほどは時間だけを指定するシンプルな書き方でしたが、オブジェクトを使うと細かい設定が可能です。

例えば以下のようなコードがあったとします。

gsap.to(".box", {
  y: 100, // 下に100px移動
  stagger: 0.5, // 0.5秒遅れて順番に再生
});

これをオブジェクトを使うとこのような書き方になります。

gsap.to(".box", {
  y: 100, // 下に100px移動
  stagger: {
    each: 0.5, // 0.5秒遅れて順番に再生
  },
});

こうすることでStaggerだけのプロパティ(オプション)を設定することが出来ます。

Staggerオブジェクトで使えるプロパティ(オプション)

Staggerオブジェクトで使えるプロパティはこちらです。

1つずつサンプルを見ていきます。

each：アニメーション開始時間の間隔

これはオブジェクトの書き方で書いた通り、通常のstagger: 数値,と同じです。

gsap.to(".box", {
  y: 100, // 下に100px移動
  stagger: 0.5, // 0.5秒遅れて順番に再生
});
// ↓同じ結果↓
gsap.to(".box", {
  y: 100, // 下に100px移動
  stagger: {
    each: 0.5, // 0.5秒遅れて順番に再生
  },
});

通常の書き方と全く同じですが、一応こちらがオブジェクトで書いたサンプルです。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

amount：アニメーション開始時間の間隔の合計時間

eachはアニメーション開始時間の間隔でしたが、amountはアニメーション開始時間の間隔の合計時間になります。

例えばこれまでの例では要素が5つで4分割されているので、each: 0.5,とamount: 2,は同じ結果になります。

gsap.to(".box", {
  y: 100, // 下に100px移動
  stagger: {
    each: 0.5, // 0.5秒遅れて順番に再生
  },
});
// ↓同じ結果↓
gsap.to(".box", {
  y: 100, // 下に100px移動
  stagger: {
    amount: 2, // アニメーション間隔の合計時間
  },
});

これはamount: 2,を4で割ったら0.5になるからですね。

これが要素の数が5つでamount: 4,なら、要素間の時間間隔は以下のように1秒になります。

See the Pen
GSAP（Stagger・amount） by junpei (@junpei-sugiyama)
on CodePen.

例えば要素の数が違うグループでも、アニメーションの開始と終了を同じタイミングにしたい場合に使えます。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

from：アニメーション開始位置を指定

fromはアニメーションの開始位置を指定します。

書き方はこちらです。

gsap.to(".box", {
  y: 100, // 下に100px移動
  stagger: {
    each: 0.5, // 0.5秒遅れて順番に再生
    from: "start",　// 最初の要素から開始
  },
});

それでは1つずつサンプルをご紹介しますが、無限リピートすると分かりにくいのでリピートは無効にしています。

なので最初から再生させたい場合は右下の『Rerun』をクリックして下さい。

from：startのサンプル

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

from：endのサンプル

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

from：centerのサンプル

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

from：edgesのサンプル

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

from：randomのサンプル

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

これは何度もRerunをクリックすると毎回アニメーションを開始する要素が違うのが分かります。

from：数値のサンプル

数値は0だと1番目の要素から開始、1だと2番目の要素から開始という感じになります。

例えばfrom: 1だと2番目の要素からアニメーションが開始します。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

grid：fromで指定した位置から広がるようにアニメーション

これは要素がグリッド状に表示されている場合に、fromで指定した位置から広がるようにアニメーションするプロパティです。

放射線状とも言えますね。

グリッド状で無くても効きますが、効果的には使えないかと思います。

書き方はこちらになります（stagger以外は省略）

gsap.to(".box", {
  stagger: {
    each: 0.1, // 0.1秒遅れて順番に再生
    from: "center", // 中央の要素から開始
    grid: "auto", // 放射線状にアニメーション
  },
});

数値でも指定できますが、数値にすると放射線状にはなりません。

今回は放射線状になるgrid: "auto"のサンプルを見てみます。

fromの値によって広がり方が違うので、1つずつ見てみます（display: grid;ではなくdisplay: flex;を使っています）

from: "start"のサンプル

これは設定しなくても同じです。

See the Pen
GSAP（Stagger・grid） by junpei (@junpei-sugiyama)
on CodePen.

from: "end"のサンプル

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

from: "center"のサンプル

See the Pen
GSAP（Stagger・grid・center） by junpei (@junpei-sugiyama)
on CodePen.

ちなみにgrid: "auto"がないとこうなります。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

中央から開始していますが、放射線状ではなく1つずつアニメーションしています。

from: "edges"のサンプル

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

from: "random"のサンプル

See the Pen
GSAP（Stagger・grid・random） by junpei (@junpei-sugiyama)
on CodePen.

ランダムはgrid: "auto"が無くても変わらないように思えますが、無いとこうなります。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

先ほどのcenterを見ても分かりますが、gridを使うと複数の要素が同時にアニメーションを開始していきます。

axis：grid有効時にアニメーションの方向軸を指定

これはgridが有効時に使えるプロパティですが、これを設定しないとX軸とY軸両方に向かってアニメーションが広がります。

つまり放射線状に広がりますが、axis: "x"にするとX軸方向のみ、axis: "y"にするとY軸方向のみアニメーションします。

from: "center"で見てみたいと思います。

axis未設定

axisを設定しないと中心から放射線状に広がります。

See the Pen
GSAP（Stagger・grid・center） by junpei (@junpei-sugiyama)
on CodePen.

axis: "x"

これはX軸、つまり横方向にアニメーションします。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

axis: "y"

これはY軸、つまり縦方向にアニメーションします。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

Staggerオブジェクト(括弧)の外と中に書く違い

Staggerではイージングを指定できるeaseとリピートを指定できるrepeatを指定できますが、Staggerオブジェクトの外に書くか中に書くかで動きが変わります。

これは実際に見た方が分かると思うので、サンプルをご覧下さい。

ease(イージング)の場合

まずはStaggerオブジェクトの外に書いた場合がこちら。

gsap.to(".box", {
  ease: "back.out(5)", // イージング
  stagger: {
    each: 0.5, // 0.5秒遅れて順番に再生
  },
});

これは少し先までアニメーションして少し戻るイージングです。

サンプルはこちらです。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

これは要素ごとにイージングが適用されていて、予想通りかと思います。

次はStaggerオブジェクトの中に書いた場合がこちら。

gsap.to(".box", {
  stagger: {
    each: 0.5, // 0.5秒遅れて順番に再生
    ease: "back.out(5)", // イージング
  },
});

サンプルはこちらです。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

今度はイージングが効いていない上にバラバラになってしまいました。

Staggerオブジェクトの中に書いた場合は要素ごとではなく全体にイージングがかかると解説している記事もありますが、色々試してみた結果『イージングは効かない上に変な動きになる』かと思います。

他には時計の秒針のように動くease: "steps(12)"だとこうなります。

まずはStaggerオブジェクトの外に書いた場合。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

これはちゃんとイージングが効いていますね。

次は問題のStaggerオブジェクトの中に書いた場合がこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

どう見てもイージングは効いていませんね。

なのでeaseを書く場合はStaggerオブジェクトの外に書きましょう。

repeatの場合

repeatはeaseと違い、ちゃんと効きます。

まずはStaggerオブジェクトの外に書いた場合がこちら。

gsap.to(".box", {
  repeat: -1, // リピート無限
  yoyo: true, // リピートで順方向と逆方向を繰り返す
  stagger: {
    each: 0.5, // 0.5秒遅れて順番に再生
  },
});

これまでのリピートはずっとこの書き方をしています。

そしてサンプルはこちらです。

See the Pen
GSAP（Stagger・ease・repeat・外） by junpei (@junpei-sugiyama)
on CodePen.

全ての要素のアニメーションが終わってからリピートを開始しています。

次はStaggerオブジェクトの中に書いた場合がこちら。

gsap.to(".box", {
  stagger: {
    each: 0.5, // 0.5秒遅れて順番に再生
    repeat: -1, // リピート無限
    yoyo: true, // リピートで順方向と逆方向を繰り返すå
  },
});

yoyoも中に書いていますが、これを外に書くと変な動きをするので、yoyoも中に書きます。

サンプルはこちらです。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

今度は全ての要素のアニメーションが終わるのを待たずにリピートを開始しています。

違いは以下になります。

このような違いがあるので、用途に応じて使い分けるといいと思います。

まとめ

今回はGSAPのプロパティ『Stagger』を使って時間差で順番にアニメーションさせる方法について解説しました。

時間差で順番にアニメーションと言ってもかなり色々な調整ができるのが分かったと思います。

ぜひご自身でも色々試してみて下さい。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！