gsapのeasingとプロパティについて

gsapのeasingとプロパティについて紹介します。

デモ

See the Pen gsap easing demo by Sosak (@Sosak2021) on CodePen.

gsapのeasing

gsapのeaseは、ease: "power2.out" のように「種類.方向」の文字列で指定します。何も指定しないときの既定値は "power1.out" で、等速にしたいときは "none" を使います。
方向は in（だんだん速く）、out（だんだん遅く）、inOut（両方）の3つで、省略すると out になります。
easeの設定は、基本的には公式サイトの次のページで動きを確認しながら決めるのがおすすめです。
公式サイトのeaseのページ: https://gsap.com/docs/v3/Eases/

easeの種類

easeの種類には、次のようなものがあります。

• none(linear)
• power1
• power2
• power3
• power4
• back
• elastic
• bounce
• rough
• slow
• steps
• circ
• expo
• sine
• Custom

power0 と none はどちらも等速(linear)です。rough、slow、Custom(CustomEase)はプラグインとして提供されているので、本体とは別に読み込みます。
Customは自分でカスタマイズして決めます。

const img3 = document.querySelector('.img3');
gsap.from(img3, {
  autoAlpha: 0,
  y: -100,
  rotation: 90,
  duration: 2,
  // ease: "power4.out"
  // ease: "power4" = "power4.out"
  // ease: "power4.in"
  // ease: "power4.inOut"
  // ease: "elastic.out(1,0.3)"
  // ease: "back.out(1.8)"
  // ease: "back.out(4)" //数字が大きいほどより強くなる
  ease:"bounce",
});

上のように、powerなどは、その後にout, in, inOutからさらに選択できます。
power1のみの場合、デフォルトとしてoutが選択されます。
また、backのように数値を入れるものもあります。
これも上の公式サイトで簡単に試せるので、数字を入れ替えて実際の動きを見てから決めます。

よく使うeaseの目安

迷ったときは、次の3つから選ぶとだいたい収まります。

• "power2.out": 表示・移動の基本。最後にすっと止まる
• "power2.inOut": 位置Aから位置Bへ往復させる動き。始まりと終わりが滑らか
• "none": スクロール連動や無限ループのマーキーなど、速度を一定に保ちたい動き

同じeaseを何度も書く場合は、gsap.defaults({ ease: "power2.out" }) でサイト全体の既定値を変えられます。Timeline単位で揃えたい場合はgsapのTimelineでデフォルト値を設定する方法を参考にしてください。

gsapのプロパティについて

基本的には名前の通りですが、一部特殊なものもあります。

よく使われるものとして、次のプロパティがあります。

プロパティ	備考
autoAlpha	opacityとvisibility
y	translateY
x	translateX
xPercent: -50	transform: translateX(-50%)
yPercent: -50	transform: translateY(-50%)
scale	scale
rotation	rotate
skewX	skewX
duration	animation-duration
ease	animation-timing-function
repeat	animation-iteration-count
yoyo	animation-direction: alternate（往復させる）
backgroundColor	background-color
borderRadius	border-radius
boxShadow	box-shadow
delay	初回のアニメーションのdelay
repeatDelay	二回目以降のdelay

などがあります。
background-colorならbackgroundColorのように、CSSのハイフン区切りをキャメルケースにすれば、他のプロパティも直感的に指定できます。
詳しくは、公式サイトの次のページを参照してみてください。
公式サイトのdocs: https://gsap.com/docs/v3/GSAP/Tween/

実際に使用すると、次のようになります。

const img3 = document.querySelector('.img3');
gsap.from(img3, {
  autoAlpha: 0,
  y: -100,
  rotation: 90,
  duration: 2,
  ease:"bounce",
  delay: 0.5, //最初のアニメーションのdelay
  repeat: 3,
  // repeat: -1, //infinity
  yoyo: true, //変化後と変化前が交互に起こる
  repeatDelay: 0.1, //2回目以降のrepeatのdelay
});

ここで使っている gsap.from() と to()・fromTo() の使い分けはGSAP Tweenの使い方で、アニメーションの開始・終了・繰り返しのたびに処理を挟みたい場合はGSAPコールバックの使い方で解説しています。複数の動きを順番につなげたい場合はkeyframesの使い方も参考にしてください。