gsapのTimelineの使い方

2021年8月23日gsap

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

目次から読む

1. デモ
2. gsapのTimelineの使い方
3. アニメーションをカスケーディングさせる
4. 相対値を使ってタイミングを調整する

デモ

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’とプラスの値にすれば、次のアニメーションの開始時期がより遅くなります。