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

2021年8月15日gsap

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

デモ

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

gsapのeasing

easeの設定は、基本的には、公式サイトの以下のページにて確認しながら決定するのがおすすめです。
公式サイトのeaseのページ: https://greensock.com/docs/v3/Eases

easeの種類

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

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

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のように数値を入れるものもあります。
これも上の公式サイトで簡単に試すことができるので数字を入れ替えて実際の動きをみてから決定します。

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-fill-mode
backgroundColor	background-color
borderRadius	border-radius
boxShadow	box-shadow
delay	初回のアニメーションのdelay
repeatDelay	二回目以降のdelay

などがあります。
background-colorならbackgroundColorで選択できますし、他のプロパティも直感的に指定することが可能です。
詳しくは、公式サイトの次のページを参照してみてください。
公式サイトのdocs: https://greensock.com/get-started/

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

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 
});