Zenn
📝

【GSAP】複数のターゲットに同じアニメーションを設定する

2023/07/30に公開
GSAP
tech

はじめに

先日ScrollTriggerを使ったアニメーション実装において、「複数のターゲットに同じアニメーションを設定する」という記述をしました。

cssであれば「.class名： color:#fff;」と記述すれば、該当のclass名はすべて白文字にすることが可能です。

ただ、GSAPでも同じように
gsap.timeline({scrollTrigger: { ・・・
と記述するだけでは、最初のタイミングで複数のアニメーションが同時に実行されてしまい
思い通りに動かなかったため、記事にまとめます！

サンプルをスクロールしてみてください。

1.アニメーションを作る

まずは実行するアニメーション内容を記述します。
今回はサンプルとして、「同じboxが縦に3つ並んでいて、スクロールすると指定したタイミングで90度回転→色を変更する」というアニメーションを書きました。

サンプルコードの以下の部分ですね。

 gsap.timeline({
      scrollTrigger: {
      trigger: target,
      start: "top center",
      end: "bottom center",
      toggleActions: "play none none reverse",
      markers: true,
    }
  })
  .to(target,{
    rotate: 90,
  })
  .to(target,{
    background: "#c3c3c3",
  })

本来ならばscrollTriggerのtrigger部分、.to直後のclass名指定に「”.box”」を記述するところ、今回は「target」という変数を使用します。

2.gsap.utils.toArray()を使用する

サンプルコードの以下の部分が該当コードで、先程記述したアニメーション内容をこの記述で括ります。

gsap.utils.toArray(".box").forEach((target) => {
  // 〜アニメーション内容〜
});

GSAPには「gsap.utils」というオブジェクトがあり、配列を扱う「toArray()」というメソッドもありますので、こちらを利用します。

「target」にターゲットとしたいclass名「box」を配列として取得し、forEachを使って繰り返し「box」に対してアニメーションを実行させることができます。

ちなみにわかりやすく分解して書くと以下のようになります。

var target = gsap.utils.toArray(".box");

target.forEach(target => {
  // 〜アニメーション内容〜
});

おわりに

１つの記述を複数のターゲットに設定できれば、記述量が少なくて済みますし、よりメンテナンス性の高いコードになるかと思います！
GSAPを使う際のご参考になれば幸いです。

それでは！

参考サイト

公式ドキュメント 「Utility Methods」

Discussion