どうも!かけちまるです!
GSAPでは、アニメーションを作成しておき、使いまわすことができるregisterEffect
というのがあります。
これを使えば、少ない記述で実装でき、アニメーション時間やイージングの管理も楽になります。
この記事では、
registerEffect
でアニメーションを作成する方法gsap.timeline()
でeffects
を使う方法がわかります。
registerEffectでアニメーションを作成するには次のように記述します。
JavaScriptgsap.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行目のように設定します。
JavaScriptgsap.effects.fadeIn('.box', { y: 15, });
timeline
で使う場合は、一般的に使う場合と違いeffects
がいらなくなります。
JavaScriptgsap.timeline() .fadeIn('.box', { duration: 3, repeat: 0 }) .to('.box', 1, { x: 100 }) .to('.box', 1, { y: 100 }) .to('.box', 1, { scale: 2 });
registerEffect
で作成したアニメーションをgsap.timeline()
で使用したい場合はextendTimeline: true
と加えるだけでOKです。
JavaScriptgsap.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()で使えるようにする });
おわり
フィードバックを送信
記事についてのフィードバックはTwitterかお問い合わせフォームから受け付けております。