registerEffectでアニメーションを作成する方法

registerEffectでアニメーションを作成するには次のように記述します。

JavaScript
gsap.registerEffect({
   name: 'fadeIn', // アニメーションの名前
 
   // 未指定の場合のデフォルト値を設定
   defaults: {
       duration: 1,
       y: 30,
       repeat: -1,
   },
 
   // アニメーションを設定
   effect: (targets, config) => {
       return gsap.fromTo(targets, config.duration, {
           autoAlpha: 0,
           y: config.y,
       },
       {
           autoAlpha: 1,
           y: 0,
           ease: 'Power4.Out',
           repeat: config.repeat,
       });
   },
 
   extendTimeline: true, // gsap.timeline()で使えるようにする
});

name:では、アニメーションの名前をきめます。（2行目）
defaults:では、アニメーションを使用するときに値が未指定だった場合のデフォルト値を設定します。（5行目）
effect:では、実行するアニメーションの指定を行います。（12行目）
引数のtargetsには、これから指定する要素が入り、configには指定がなければdefaultsが配列で入ります。

extendTimeline: trueを指定することでtimeline上でも使用することができます。（25行目）

作成したアニメーションを使う方法

一般的に使う

registerEffectで設定したdefaults値をカスタムする場合は、2行目のように設定します。

JavaScript
gsap.effects.fadeIn('.box', {
   y: 15,
});

実装サンプル

timelineで使う

timelineで使う場合は、一般的に使う場合と違いeffectsがいらなくなります。

JavaScript
gsap.timeline()
.fadeIn('.box', {
   duration: 3,
   repeat: 0
})
.to('.box', 1, {
   x: 100
})
.to('.box', 1, {
   y: 100
})
.to('.box', 1, {
   scale: 2
});

実装サンプル

gsap.timeline()でも使用したいとき

registerEffectで作成したアニメーションをgsap.timeline()で使用したい場合はextendTimeline: trueと加えるだけでOKです。

JavaScript
gsap.registerEffect({
   name: 'fadeIn', // アニメーションの名前
 
   // 未指定の場合のデフォルト値を設定
   defaults: {
       duration: 1,
       y: 30,
       repeat: -1,
   },
 
   // アニメーションを設定
   effect: (targets, config) => {
       return gsap.fromTo(targets, config.duration, {
           autoAlpha: 0,
           y: config.y,
       },
       {
           autoAlpha: 1,
           y: 0,
           ease: 'Power4.Out',
           repeat: config.repeat,
       });
   },
 
   extendTimeline: true, // gsap.timeline()で使えるようにする
});