webコーダーのsaco @sacocco_sacoya です。

今日はregisterEffectでアニメーションのテンプレートを作成する方法を学びました。

registerEffectを使用することで、アニメーションを繰り返し呼び出したり、呼び出し時に値を変更して呼び出すことができます。

作り方から呼び出し方まで、詳しく説明していきたいと思います！

registerEffectの作り方

gsap.registerEffect({
  //Effectに名前をつける
  name:'testEffect',
  
 //デフォルト値
 //ここで指定した内容は、呼び出し時に変更（上書き）することができる
  defaults:{
    duration: 3,
    delay:.5,
    backgroundColor: 'green'
  },
  
  //アニメーションの指定
  effect: (targets, config) =>{
    return gsap.to(targets,{
      ease:'power2.out',
      
      //デフォルト値を紐付け
      duration: config.duration,
      delay: config.delay,
      backgroundColor: config.backgroundColor,      
    })
  },
  
  //timeline内で使用したい場合、必ず指定
  extendTimeline: true
})

//registerEffectを呼び出し
gsap.effects.testEffect('.box.red')

//timelineにregisterEffectを呼び出し
const timeLine = gsap.timeline()

timeLine.to('.box.blue',3,{
	x:50
	})
  .testEffect('.box.blue',{
  backgroundColor: 'pink'
})
  

上記が全体のコードです。以下、詳細を説明していきます。

1.エフェクトの名前を決める

name:'test',

まずはエフェクトに任意の名前をつけます。（呼び出し時に必要です。）

2.デフォルトの値を決める

 //デフォルト値
 //ここで指定した内容は、呼び出し時に変更（上書き）することができる
  defaults:{
    duration: 3,
    delay:.5,
    backgroundColor: 'green'
  },

自動で呼び出したいアニメーションの内容を、defaultの値として決めておくことができます。

また、default値で設定しておいた値は、呼び出し時に変更（上書きして呼び出し）することが可能です。
呼び出し時に変更する可能性があるアニメーション内容は、あらかじめこの中に設定しておきます。

3.effectの値を決める

effect: (targets, config) =>{
    return gsap.to(targets,{      
    //固定のアニメーションの内容を記述
    ease:'power2.out',
    
    //デフォルト値を紐付け
    duration: config.duration,
    delay: config.delay,
    backgroundColor: config.backgroundColor,
    })
  }

targetとconfigを引数に指定し、アニメーションさせたい内容をreturnします。
この中に固定で呼び出したいアニメーションを指定します。

targetsは、呼び出し時にアニメーションさせたい要素を指定するための引数です。
configは、アニメーションの構成（内容）が呼び出される部分です。

また、defaultsで指定したアニメーションと同じプロパティを、プロパティ名：config.プロパティ名という形で記述し、紐付けます。

ここでの紐付けが行われていないと、呼び出し時にdefaultで指定したプロパティを変更（上書きして呼び出し）することができませんので注意が必要です。

registerEffectの呼び出し方

gsap.effects.registerEffectの名前('アニメーションさせたい要素')

上記の形で呼び出します。

//registerEffectを呼び出し
gsap.effects.registerEffectの名前('アニメーションさせたい要素',{
//default値に指定したプロパティで変更して呼び出したいものがあれば記述
  backgroundColor: '#eee'
})

default値に指定したプロパティで、変更して呼び出したいものがある場合、上記の記述の仕方で、上書きする形で呼び出します。
default値に指定されていないものは追加できませんので、ご注意ください。

Timelineで使用したい時

registerEffectをTimeline内で使用したいときは、まず、registerEffectメソッドの指定内に下記の記述が必要です。

extendTimeline: true

この記述がないと、Timeline内でregisterEffectが使用できませんのでご注意ください。

Timelineでの呼び出し方

gsap.timeline().registerEffectの名前('アニメーションさせたい要素',{
  //default値に指定したプロパティで変更して呼び出したいものがあれば記述
  backgroundColor: '#eee'
})

timelineメソッドに、.registerEffectの名前(’アニメーションさせたい要素’)という形でメソッドを繋げます。
なお、timelineに連ねて呼び出す際は、.effectsという記述は不要です。

codepen実例

See the Pen GSAP Effects 練習 by saco (@sunacodesu) on CodePen.

左のboxは、背景色が灰色に変わるように呼び出してみました。

右のboxは、timelineに連ねてregisterEffectを呼び出しています。

また、右のboxではtimelineの呼び出しのあと、toメソッドでx軸に50px移動させたあと、registerEffectを呼び出し、という順番で再生されるよう指定してみました。
timelineを使用していても、好きなタイミングでeffectの呼び出しをすることが可能です。

このように、同じ内容のアニメーションを何度も呼び出したい時は、registerEffectとして作成しておくことで、何度も呼び出しができる上、コードの記述が省略できるので、大変便利なメソッドだと思います。

まとめ

• registerEffectはアニメーションのテンプレートが作成できるメソッド
• 呼び出し時に変更したい値があるプロパティは、default値として指定しておくことができる
• default値に指定されていないプロパティは呼び出すこと（追記）ができないので注意
• timelineに連ねて利用することができる
• default値で設定しておいた値は、呼び出し時に上書きして呼び出すことができる
• registerEffectでテンプレートを作成しておけば、コード量を減らすことができる

registerEffectは、スタンプ（はんこ）のようなもの、といった印象です。
土台を作っておいて、呼び出し時に変更する可能性のあるプロパティをdefaultとして決めておけるのも、柔軟性が高くて良いと思いました。

繰り返し同じ内容で呼び出したいときや、内容は共通で一部だけ変えて呼び出したいときなど、とても便利なメソッドだと思います。

以上、registerEffectについての解説でした！

この記事がGSAPでアニメーションを作成する際、お役に立てば嬉しいです！