【GSAP】expoScaleのカスタマイズ方法

今日は「expoScale」について詳しく説明していきたいと思います。

基本の使い方

このイージングを使用するためには、「EasePack」というファイルが必要です。
公式サイトにインストールの方法が書かれているので、こちらを参考にファイルを取り込んでください。

「expoScale」では、縮小/拡大する始めの値と終わりの値を設定します。

1から5へ拡大するのであれば「expoScale(1, 5)」、逆に5から1へ縮小する場合は「expoScale(5, 1)」などと記述します。

以下のコードをご覧ください。

gsap.to(
  ".sample01",
  { duration: 3, scale: 3, ease: "expoScale(1, 3)" }
);

scaleのデフォルトは「1」ですので、終わりの値である「3」とともに、「expoScale(1, 3)」のように記述します。

開始位置と終了位置を指定する「fromTo」を使う場合は、以下のように記述します。

gsap.fromTo(
  ".sample01",
  { scale: 0.5 },
  { duration: 1, scale: 3, ease: "expoScale(0.5, 3)" }
);

基本的にはexpoScaleの値には、scaleに設定した値をそのまま入れます。
それによってアニメーションの始まりから終わりまで、一定の速度で拡大/縮小されるようになります。

ちなみに、expoScaleを使わずに拡大すると、初めは早く、最後はゆっくりとしたアニメーションになります。
なぜそうなるのかは数学的な話になるので、興味のある方は公式サイトの動画をご覧ください。

もちろん、expoScaleを使って自由にイージングをつけることもできます。

方法は簡単です。

gsap.fromTo(
  ".sample01",
  { scale: 0.5 },
  { duration: 1, scale: 3, ease: "expoScale(0.5, 3, power4.in)" }
);

このように、３つ目のパラメーターとしてお好みのイージングを設定することができます。
デフォルトは「none」
何もイージングが設定されていない状態になっています。

今日は「expoScale」のカスタマイズ方法を説明しました。

expoScaleを使うことで、画像の拡大縮小のアニメーションも自分の思い通りに、しかも簡単に行うことができます。楽しいなあ！

参考サイト