gsapのTimelineの使い方

gsap

アニメーションを簡単にずらしたりつなげることができるgsapのTimelineの使い方を紹介します。

デモ

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

gsapのTimelineの使い方

const TL = gsap.timeline();

TL
.from('.img1', {autoAlpha: 0, y: -50, duration: 0.2})
.from('.img2', {autoAlpha: 0, y: -50, duration: 0.3})
.from('.img3', {autoAlpha: 0, y: -50, duration: 0.5})
.from('h1', {autoAlpha: 0, y: -50, duration: 0.5})
.from('p', {autoAlpha: 0, y: -50, duration: 1})

TLでもなんでも適当な変数名にgsapのtimeline()メソッドを格納します。
その変数を使ってメソッドをチェーンすることができます。
上の例では画像が3つ、それぞれ指定された順番に指定されているアニメーションを実行していきます。

ただしこれでは一つが終わった後にまた一つのアニメーションがスタートするのでぎこちない感じが残ります。
そこで前のアニメーションが残っている段階で他のものもスタートさせる方法があります。

アニメーションをカスケーディングさせる

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

const TL = gsap.timeline();

TL
.from('.img1', {autoAlpha: 0, y: -50, duration: 1})
.from('.img2', {autoAlpha: 0, y: -50, duration: 1}, '-=0.7')
.from('.img3', {autoAlpha: 0, y: -50, duration: 1}, '-=0.7')
.from('h1', {autoAlpha: 0, y: -50, duration: 1}, '-=0.7')
.from('p', {autoAlpha: 0, y: -50, duration: 1}, '-=0.7')

上に’-=0.7’を加えると、前のアニメーションが終わる0.7秒前にスタートさせることができます。
この値は自由に設定できるので、一番適切な値を調整しながら探していきます。
'+=0.2’とプラスの値にすれば、次のアニメーションの開始時期がより遅くなります。

相対値を使ってタイミングを調整する

上の’-=0.7’というのも相対値ですし、下のように’<'や'>'を使うこともできます。

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


上のケースでは、3番目の’<'の指定によって、2番目の写真と同じタイミングでアニメーションがスタートします。 '>'だとデフォルトと同じ動きをします。
このように、相対値や絶対値を使うことで、アニメーションの細かいタイミングを調整することができます。

gsap

Posted by devsakaso