GSAP Staggerの基本的な使い方

今回はGSAPの基本的な機能に備わっているStaggerを学んでいきましょう。Staggerは同じ要素（同じクラス名など）を連続で動かすことができる機能です。複数の例を通して使い方をご紹介していきます。

Staggerの使い方

Staggerの基本の形はこのようになります。

gsap.to(".circle", {
  y: 50,
  stagger: 0.5  //0.5秒遅れてそれぞれ再生
});

これだけで同じ要素が決められた時間差で再生されます。

このように鉤括弧で囲うことで、Staggerだけの設定を細かく変更することが出来ます。

gsap.to(".circle", {
　y: 50,
　stagger: { 
　　each: 1,
　　from: "end",　//最後の要素から再生
　}
});

fromを使うことで、同じ要素の中のどの位置から再生させるかを設定できます。

endの他にも様々な選択方法があります。

gridにも使える

Gridを使用していれば、指定した行と列から再生も可能です。

こちらにGSAP公式のCodepenのデモがあるので確認してみてください。

Staggerにもイージングやリピートが使えます。ですが、鉤括弧内に書くか外に書くかの違いでアニメーションにも違いが出てきます。

まずは、イージングを外に書いた場合。

power2.inOutは初めと終わりがゆっくりで、途中がその間の速さになるアニメーションになります。

gsap.to(".circle", {
y: 50,
ease: "power2.inOut",　//個々の初めと終わりがゆっくり
stagger: { 
  each: 0.5,
 }
});

イージングがそれぞれの要素に掛かっているのがわかると思います。

では次は、鉤括弧の内側に書いた場合です。

gsap.to(".circle", {
y: 50,
stagger: { 
　　each: 0.5,
　　ease: "power2.inOut", //全体の初めと終わりがゆっくり
　}
});

今回はstagger全体にイージングが掛かっていてので、全てのアニメーションの始まりから終わりに掛けてゆっくりになったり早くなったりしていますね。

次はリピートの場合です。

gsap.to(".circle", {
y: 50,
repeat: -1,  //無限にリピート
yoyo: true,　//yoyoあり
ease: "power2.inOut",
stagger: { 
  each: 0.2,
 }
});

repeatを鉤括弧の外に書いた場合このようなアニメーションになります。要素のアニメーションが最後まで連続で起きて完了したら、yoyoで戻るアニメーションになっています。

gsap.to(".circle", {
y: 50,
ease: "power2.inOut",
stagger: { 
  each: 0.2,
  repeat: -1,  //１つの要素がのアニメーションが終わり次第、作動
  yoyo: true,　//yoyoあり
 }
});

内側に書いた場合は、ひとつの要素のアニメーションが完了したと同時に次の要素のアニメーションが開始します。Staggerを使う場合には鉤括弧の内側か外側かを注意しながら使い分けましょう。

Staggerは結構シンプルですが、とても役に立つ機能だと思います。詳しく調べたい方は公式サイトでご確認ください。今回のコーディングをCodepenにまとめておきましたので、右上のロゴからご自身で試してください。

他にもGSAPの基本的な使い方をご紹介しているので、チェックしていってください。

ではまた！

おすすめ本

リンク