Home
GSAP
【GSAP】registerEffectでアニメーションをテンプレート化する方法

【GSAP】registerEffectでアニメーションをテンプレート化する方法

公開日
2022.09.24
更新日
2022.12.18
【GSAP】registerEffectでアニメーションをテンプレート化する方法

どうも!かけちまるです!

GSAPでは、アニメーションを作成しておき、使いまわすことができるregisterEffectというのがあります。

これを使えば、少ない記述で実装でき、アニメーション時間やイージングの管理も楽になります。

この記事では、

  • registerEffectでアニメーションを作成する方法
  • ・作成したアニメーションを使う方法
  • gsap.timeline()effectsを使う方法

がわかります。

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()で使えるようにする });

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【GSAP】タイムラインを使えば複雑なアニメーションを実装できる

【GSAP】タイムラインを使えば複雑なアニメーションを実装できる

【簡単】WebサイトにGoogleマップを埋め込む一番簡単な方法

【簡単】WebサイトにGoogleマップを埋め込む一番簡単な方法

【GSAP入門】使い方となにができるのか

【GSAP入門】使い方となにができるのか

【初心者向け】CodePenの使い方からサイト埋め込み方法

【初心者向け】CodePenの使い方からサイト埋め込み方法

【GSAP】擬似要素(before・after)をアニメーションさせる方法

【GSAP】擬似要素(before・after)をアニメーションさせる方法

floatで失った要素の高さを取り戻す2つの方法

floatで失った要素の高さを取り戻す2つの方法