▼Timelineの基本的な書き方

// Timelineを作成
let tl = gsap.timeline({
  repeat: -1,        // 無限に繰り返す
  yoyo: true,        // 繰り返し時にアニメーションを逆再生
  repeatDelay: 0.5,  // 繰り返しの間に0.5秒の間隔を置く
});

// アニメーション内容
tl
  .to(".item01", { duration: 1, y: 50 })     // 1つ目の要素を下に移動
  .to(".item02", { duration: 1, y: 100 })    // 2つ目の要素をさらに下に移動
  .to(".item03", { duration: 1.5, y: 150 })  // 3つ目の要素をさらに下に移動
  .to(".item03", { rotate: 180 });           // 最後に3つ目の要素を180度回転

.to()を繋げて書くことで、記述した順番にアニメーションが実行されます。

上記コードの例では、
item01 が下に動く→item02 がさらに下に動く→item03 がさらに下に動く→item03 が180度回転する
の順に、一つのアニメーションが終わると次のアニメーションが再生、それが終わると次を再生、のように実行されます。

また、gsap.timeline()の中にオプションを書くことができます。
上記コードの例では、repeat: -1で無限に繰り返す、yoyo: trueで繰り返す時にヨーヨーのように行ったり来たりするのを設定しています。

▼実際の動き

See the Pen
【GSAP】Timeline_No1 by ishi (@qwwbetnz-the-typescripter)
on CodePen.

Timelineでは、なにも設定しなければ、前のアニメーションが終わったらすぐに次のアニメーションが開始されます。
しかし、アニメーション同士に余白を持たせたり、逆にタイミングを重ねて開始したい場面もあります。

そこで使用するのが、+=0.5です。

▼コード例

tl
  .to(".item01", { duration: 1, y: 50 })
  .to(".item02", { duration: 1, y: 100 },"+=0.8")    // 通常より0.8秒遅く開始
  .to(".item03", { duration: 1.5, y: 150 },"-=0.8")  // 通常より0.8秒早く開始
  .to(".item03", { rotate: 180 });

このように対象の要素に記述することで、+=は遅く開始され、-=は早く開始されます。

先ほど紹介したrepeat: -1やyoyo: true以外にも、様々なオプションがあります。

紹介したTimelineの機能を使って、
実際にファーストビューの一連アニメーションを作ってみました。
（再度見たい場合は、リロードしてください）

See the Pen
【GSAP】Timeline_Firstview_anim by ishi (@qwwbetnz-the-typescripter)
on CodePen.

▼コード

See the Pen
【GSAP】Timeline_Firstview_anim by ishi (@qwwbetnz-the-typescripter)
on CodePen.

Timelineを使って複数のアニメーションを順番に実行しています。
defaultsで共通の設定をまとめておくことで、すっきりとしたコードになっていると思います。

Timelineを活用すれば、全体の流れを把握しやすく、修正や追加もしやすいコードでアニメーションの作成ができます！

ぜひ、この記事をもとにサイトのファーストビュー作りに挑戦してみてください！

【関連記事】

▼GSAPの導入方法や、アニメーションの作り方を知りたい方はこちら
GSAP入門編｜アニメーションの作り方を解説

▼GSAPの基礎や特徴、事例を知りたい方はこちら
GSAPの基礎と特徴を徹底解説｜事例から学ぶ活用法