gsapのTimelineでデフォルト値を設定する方法

2021年8月24日gsap

gsapのTimelineでデフォルト値を設定する方法を紹介します。

デモ

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

gsapのTimelineでデフォルト値を設定する方法

// デフォルト値を設定
const TL = gsap.timeline({
  defaults: {
    duration: 2,
    ease: 'bounce.out'
  },
  // repeat: -1,
  repeat:2,
  yoyo: true,
  paused: true,
  // onStart: () => console.log('start')
});
TL
.from('.img1', {autoAlpha: 0, y: -50, duration: 1})
.from('.img2', {autoAlpha: 0, y: -50, duration: 1}, 1) //2秒後にスタート
.from('.img3', {autoAlpha: 0, y: -50, duration: 1}, '<') //上と同じタイミングでスタート
.from('h1', {autoAlpha: 0, y: -50, ease: 'power2.out'}, '-=0.7')
.from('p', {autoAlpha: 0, y: -50, ease: 'power4.in'}, '-=0.9')

setTimeout(() => {
  // TL.play()
  TL.restart()
}, 500)

gsap.timeline()メソッドを変数に格納するときに、中にオブジェクトを渡すことができます。
そこで、defaultsによってデフォルト値を設定することが可能です。
デフォルト値なので、from()やto()やfromTo()メソッドでチェーンするときに、値を上書きすることが可能です。
defaults以外にもrepeatやyoyoなども設定も可能です。

ここまでできるようになれば、以下のようなヒーローパートのアニメーションを作成できるようになります。

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