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

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

結論から言うと、gsap.timeline()の引数オブジェクトにdefaults: { duration: 2, ease: 'bounce.out' }のように書くだけです。そのTimelineにチェーンしたto()・from()・fromTo()すべてに同じ値が引き継がれ、個々のトゥイーンで指定した値があればそちらが優先されます。

デモ

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()メソッドでチェーンするときに値を上書きできます。
上のコードでは、duration: 2をdefaultsに置き、.img1〜.img3だけduration: 1で上書きしています。
h1とpはdurationを書いていないので、デフォルトの2秒で動きます。

defaults以外にも、repeatやyoyo、pausedなどTimeline全体の設定を同じオブジェクトに書けます。
注意点として、repeatをdefaultsの中に書くと「子トゥイーンごとの繰り返し」、外に書くと「Timeline全体の繰り返し」になり、動きが変わります。
Timeline全体を繰り返したい場合は、上のコードのようにdefaultsの外に書きます。

また、defaultsが効かないときは、gsap.timeline()ではなくgsap.to()単体に値を渡していないか、チェーン先で同じプロパティを上書きしていないかを確認してください。
defaultsは「そのTimelineの子」にだけ効くため、別のTimelineや単体のトゥイーンには引き継がれません。

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

Timelineの応用として、同じdefaultsの考え方でスライドを順番に切り替えるgsapのTimelineでフェードアウトするスライダーを作成する方法も参考にしてみてください。
個々のトゥイーンに渡せるプロパティやeaseの種類はgsapのeasingとプロパティについて、to()・from()・fromTo()の違いはGSAP Tweenの使い方にまとめています。