GSAPの使い方（Timeline編）

ウェブサイトやアプリケーションで魅力的なアニメーションを作成する際におすすめのGSAP。
具体的な導入方法や基本的な使い方については「GSAPの使い方の基本（まずは入門編）」こちらの記事をご覧ください。

今回はGSAPのタイムラインについて解説します。

タイムラインとは

タイムラインは、複数のアニメーションを一つの「流れ」として管理できる便利な機能です。gsap.timeline()を使うことで、要素のアニメーションを順番に実行できるようになります。
例えば「最初のボックスが右に動き、2つめのボックスが下に動き、その次にサークルが右に動く」といったアニメーションの「順番」を簡単にコントロールできるのです。

タイムラインを使う場合と使わない場合のコードを比較して、タイムラインの便利さを具体的に見ていきましょう。

タイムラインを使わない場合

まず、タイムラインを使わないでアニメーションを順番に実行する場合のコードを見てみます。この場合、それぞれの3つのアニメーションにdelay（遅延）を手動で設定する必要があります。

もしdelayの設定をしなければ3つのアイテムが同時に動き出してしまいます。

See the Pen GSAP-TL0 by tagamiki (@tagamiki) on CodePen.

タイムラインを使う場合

1つのアニメーションが終わったあと次のアニメーションが始まるので、delayを手動で設定する必要がなく、アニメーションは順番通りに再生されます

See the Pen GSAP-TL1 by tagamiki (@tagamiki) on CodePen.

基本のタイムライン作成方法

1.タイムラインを作成する

GSAPでタイムラインを作成する際には、通常、gsap.timeline()を使ってタイムラインオブジェクトを生成し、それを変数に代入して管理します。

// タイムラインの作成
const tl = gsap.timeline();

2.アニメーションの追加

.to()や.from()メソッドを用いて、アニメーションを動かしたい順番に追加します。

// タイムラインの作成
const tl = gsap.timeline();

// アニメーションを順番に追加
tl.to(".box", { x: 50, duration: 1 });   // box 要素が右に 50px 動く
tl.to(".box2", { y: 20, duration: 1 });   // box2 要素が下に 20px 動く
tl.to(".circle", { x: 100, duration: 1 }); // circle 要素が右に 100px 動く

最初のtlと最後のセミコロンだけを記述し、メソッドチェーンとして続けて書く事もできます。

// タイムラインの作成
const tl = gsap.timeline();

// アニメーションを順番に追加
tl
.to(".box", { x: 50, duration: 1 })    // box 要素が右に 50px 動く
.to(".box2", { y: 20, duration: 1 })   // box2 要素が下に 20px 動く
.to(".circle", { x: 100, duration: 1 }); // circle 要素が右に 100px 動く

デフォルト設定について

同じプロパティを複数のトゥイーンに設定したい場合は、毎回記述せずにデフォルトで設定する事ができます。

例えば以下のようにduration: 1が全てのトゥイーンに指定されている場合

const tl = gsap.timeline();

tl
.to(".box", { x: 50, duration: 1 })
.to(".box2", { y: 20, duration: 1 })
.to(".circle", { x: 100, duration: 1 });

defaults:のあとに記述すれば、その後のトゥイーンは全て適用されます。

// タイムラインを作成し、デフォルト設定を適用
const tl = gsap.timeline({ 
　defaults: { duration: 1 }
});

// すべてのアニメーションに duration: 1が適用される
tl
.to(".box", { x: 50 })
.to(".box2", { y: 20 })
.to(".circle", { x: 100 });

各トゥイーンに共通のdurationを適用するため、コードが簡潔になり、修正時にも1箇所の変更だけで対応できます。

その他のオプション

defaults以外にも設定できるオプションは色々あります。
defaults に加えて、repeat や yoyo など、アニメーションに関するさまざまなオプションが利用できます。

• repeat：タイムライン全体を指定した回数だけ繰り返します。repeat: 2 とすると、アニメーションは3回再生されます（最初の再生＋2回の繰り返し）
• yoyo：繰り返し再生時にアニメーションが逆再生され、行きと戻りの動きになります。yoyo: true で有効化されます。
• 他のオプション：delay（開始を遅らせる）、paused（初期状態で停止）など、タイミングや制御に役立つオプションも利用できます。

const tl = gsap.timeline({ 
　defaults: { duration: 1 },
  repeat: 2,  // アニメーションを2回繰り返す（最初のアニメーションと合わせて3回再生される）
  yoyo: true  // 終了後に逆再生
});

tl
.to(".box", { x: 50 })
.to(".box2", { y: 20 })
.to(".circle", { x: 100 });

よく使われるオプション一覧

アニメーションのタイミングを調整する

各アニメーションは基本、前のアニメーションが終了次第、次のアニメーションが始まります。この開始タイミングを細かく調整することができます。

例えば

「-=0.5」 は、前のアニメーションが完全に終わる0.5秒前から次のアニメーションが始まることで、少し重なるように演出できます。

「+=0.5」 は、前のアニメーション終了後に少し遅らせてから次のアニメーションが始まることで、間を空けた動きが作れます。

const tl = gsap.timeline();

tl
.to(".box", { x: 50, duration: 1 })               // 最初のボックスが1秒間かけて右へ
.to(".box2", { y: 20, duration: 1 }, "-=0.5")      // 0.5秒早く開始
.to(".circle", { x: 100, duration: 1 }, "+=0.5");  // 0.5秒遅れて開始

2つめのボックスが0.5秒早めにスタートし、3つめのサークルが0.5秒遅れてスタートします。

See the Pen GSAP-TL2 by tagamiki (@tagamiki) on CodePen.

よく使うタイミング指定一覧

コールバック関数やトゥイーンを追加するadd()メソッド

add()メソッドを使うと、タイムラインの任意のタイミングにコールバック関数、トゥイーン、別のタイムライン、ラベルを挿入できます。コールバック関数を実行し例えば、特定のトゥイーンが終わったタイミングで別の処理を実行したい場合などに便利です。

次のように、タイムライン内にコールバック関数をadd()で追加できます。

// タイムラインの作成
const tl = gsap.timeline();

tl.to(".box", { x: 50, duration: 1 })
  .add(() => {
    console.log("アニメーションが完了しました！");
  })
  .to(".box2", { y: 20, duration: 1 });

このコードでは、.box要素のアニメーションが終了した後にコールバック関数が実行され、「アニメーションが完了しました！」とログに表示されます。

まとめ

GSAPのタイムラインを使うと複数のアニメーションをまとめて管理でき、連続的で一体感のあるアニメーションを簡単に作成できます。

ぜひ活用してみてください！