【GSAP】イージング(ease/easing)｜power2.inOutやpower, in, outとは何か？

GSAP (GreenSock Animation Platform)はアニメーションを設定する非常に強力なツールです。

GASPのアニメーションの緩急（イージング）を指定するプロパティにeaseがあります。特にGSAPでは非常にたくさんの種類のeaseの指定方法が用意されています。

例えば、ease: 'power2.inOut'のようなあまり見慣れない値をめにすることもあるのではないでしょうか？

ここでは、power2.inOutのような、GSAPに用意されているイージングについて簡単にまとめています。

イージングの指定方法

GSAPでイージングを指定するときは以下の構文が基本となります。

ease: "イージング名.適用タイミング"

例えば以下のように記述します。

ease: "power1.in"

ease: "power4.inOut"

ease: "bounce.in"

ease: "bouce.out"

それぞれの詳細は以下で解説します。

イージング名

イージング名ではアニメーションの強度（カーブの形）を定義します。

powerは、二乗のカーブに基づいたイージングで、数字が大きくなるほど、イージングのカーブが強くなります。

シンプルなイージング

• "none": 緩急なし。常に一定の速度で動く（リニアな動き）。
• "power1"
• "power2"
• "power3"
• "power4"
• "expo": power4よりもさらに急激な動き。
• "circ": 円の動きを模倣したイージング。
• "steps": 階段のようなイージング。

例えば、ease: “none” にした場合、アニメーションはリニアな動きになります。

power4にすると、最初に強く動き、後半は緩やかになる動きになります。

stepsにすると段差を少しづつ上がるような動きになります。

特殊なイージング

行ったり戻ったりする特殊なイージングも用意されています。

• "back": わずかにオーバーシュート（行き過ぎてから戻る）する動き。
  • 例: "back.out", "back.inOut"
• "elastic": 弾力性のあるバウンド（跳ね返り）の動き。
  • 例: "elastic.out", "elastic.inOut"
• "bounce": 本物のボールが弾むような動き。
  • 例: "bounce.out"

例えば、bounceだと以下のようなカーブを描きます。

適用タイミング（in, out, inOut）

指定したイージングを開始や終了のどこに適用するかを次の３つで指定します。

イージングカーブで見る違い

例：power3

例えば、power3に対してそれぞれを適用すると以下のように変わります。

例：bounce

参考

上記で示したイージングカーブや使える値は公式ページで確認することができます。

＞（GSAP公式）Easeing