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制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【WordPress】画像アップ時に自動生成されないようにする方法

【WordPress】画像アップ時に自動生成されないようにする方法

【Contact Form 7】自動で挿入されるpタグやbrタグを削除する方法

【Contact Form 7】自動で挿入されるpタグやbrタグを削除する方法

Contact Form 7の基本設定

Contact Form 7の基本設定

【JavaScript】ボタンを押した時の効果音を実装する方法

【JavaScript】ボタンを押した時の効果音を実装する方法

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

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

画像形式をWebPに変換するツール6選

画像形式をWebPに変換するツール6選