gsapのTweenメソッドの使い方

2021年8月22日gsap

gsapのTweenメソッドの使い方を紹介します。

gsapのTweenメソッドの使い方

gsap.to()メソッド、from()メソッド、fromTo()メソッドなどTweenインスタンスを返すメソッドをtweenという変数に格納して使用します。
Tweenについての公式サイト: https://greensock.com/docs/v3/GSAP/Tween

pauseとresume

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

// pauseとresume
const img1 = document.querySelector('.img1');

const tween = gsap.to(img1, {x: 100, paused: true});

setTimeout(() => {
  tween.resume();
}, 2000);

pausedをtrueにすることでアニメーションがストップした状態になります。
それを再開させるのがresume()です。
上の例では、setTimeout()で2秒後にアニメーションがスタートします。

kill、 delay、 duration

See the Pen
gsap kill delay duration by Sosak (@Sosak2021)
on CodePen.

// kill、 delay、 duration
const img1 = document.querySelector('.img1');

const tween = gsap.to(img1, {x: 100});

// アニメーションをなくす
tween.kill();

// アニメーションを遅らせる
tween.delay(3);
// アニメーションの時間を指定
tween.duration(4);

kill()はアニメーションをなくします。
delay()は遅延の設定です。上の3なら3秒後にアニメーションが開始します。
duration()はアニメーションの期間を設定できます。

seekとplay

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

// seekとplay
const img1 = document.querySelector('.img1');

const tween = gsap.to(img1, {x: 100, duration: 4, paused: true});
setTimeout(() => {
  tween.seek(2.5) //2.5s後のところからアニメーションスタート
  tween.play()
}, 2000)

durationで上の例では4秒間のアニメーションを設定しています。
pausedはtrueのため、アニメーションはストップしている状態です。
seek(2.5)とすると、2.5秒後のアニメーションのところまで、アニメーションは見えない状態となります。
その後、play()にてアニメーションがスタートしたとき、seekで設定した値のところからアニメーションをスタートさせることができます。