gsapのregisterEffectを使ってアニメーションを使い回す方法

2021年8月20日gsap

gsapのregisterEffectを使ってアニメーションを使い回す方法を紹介します。
複数の要素に対して別のアニメーションを簡単にかつ簡潔に適用することができるようになります。

デモ

See the Pen
gsap keyframes by Sosak (@Sosak2021)
on CodePen.

gsapのregisterEffectを使ってアニメーションを使い回す方法

gsap.registerEffect({
  name: 'imgAnimation',
  effect: (targets, config) => {
    return gsap.to(targets, { ここにeffects });
  },
  defaults: { ここにデフォルトのeffects }
});

上のコードがおおまかな雛形となります。
まずregisterEffect()メソッドはオブジェクトをとります。
nameを決める必要があるのと、effectで2つ引数をとって、gsapのtoやfromなどのメソッドをreturnすることで使えるようになります。
targetsはアニメーションさせたい要素が入ります。
effectsの部分にアニメーションの詳細が入ります。
また、デフォルトを設定することで、毎回書かなくて良くなるというメリットが生まれます。

const img1 = document.querySelector('.img1');

gsap.registerEffect({
  name: 'imgAnimation',
  effect: (targets, config) => {
    return gsap.to(targets, {
      duration: config.duration,
      y: 200,
      scale: 1.5,
      rotation: config.rotation,
      delay: config.delay
    });
  },
  defaults: {duration: 2, rotation: 180, delay: 0.2}
});

gsap.effects.imgAnimation(img1, {duration: 10});
gsap.effects.imgAnimation('.img2', {duration: 5, rotation: 360, delay: 0.5});
gsap.effects.imgAnimation('.img3', {duration: 3, rotation: 45, delay: 0.8});

こうすることで、img1からimg3にそれぞれ別のアニメーションを簡単にかつ簡潔に適用することができるようになります。