【JavaScript】GSAPのタイムライン入門ガイド：複数のアニメーションを自在にコントロール！
アニメーションライブラリ「GSAP（GreenSock Animation Platform）」は、Webアニメーションをなめらか＆強力に実装できるツールです。
中でもタイムライン機能は、複数の動きを順番に、あるいは同時に組み立てられるとても便利な仕組みです。GSAPのタイムラインの基本を解説します。
目次
タイムラインとは？
普通にGSAPでアニメーションを作るときは、以下のように gsap.to() を使います。
- gsap.to(".box", { x: 100, duration: 1 });
でも、複数の .to() を並べると、すべて同時に再生されてしまいます。
- // すべて同時に実行される
- gsap.to(".box", { x: 100, duration: 1 });
- gsap.to(".box", { rotation: 360, duration: 1 });
- gsap.to(".box", { scale: 0.5, duration: 1 });
これを、順番に実行したい！というときに使うのが、gsap.timeline() です。
タイムラインの基本構文
- // タイムラインを作成
- const tl = gsap.timeline();
- // 順番にアニメーションを追加
- tl.to(".box", { x: 100, duration: 1 })
- .to(".box", { rotation: 360, duration: 1 })
- .to(".box", { scale: 0.5, duration: 1 });
ポイント
• .to() をチェーンでつなげて順番を指定
• duration は秒数
• アニメーションは順番通りに再生される
.from() や .fromTo() との違い
GSAPには .to() だけでなく、アニメーションの始点を指定する .from() や、始点と終点の両方を指定する .fromTo() もあります。
| メソッド | 説明 |
| .to() | 現在の状態→指定の状態へ |
| .from() | 指定の状態→現在の状態へ |
| .fromTo() | 明確に開始→終了を指定 |
- // 透明で上から登場 → 横にスライド
- tl.from(".box", { opacity: 0, y: -50, duration: 1 })
- .to(".box", { x: 200, duration: 1 });
アニメーションを重ねる（オーバーラップ）
- tl.to(".box1", { x: 100, duration: 1 }) // 1秒アニメーション
- .to(".box2", { x: 100, duration: 1 }, "<"); // 同時に開始
タイミング指定の記号
"<"を指定すると直前のアニメーションと同時に開始されます。
">"を指定すると直前のアニメーションが終了してから開始されます。（デフォルト）
"1"を指定するとタイムラインの１秒地点から開始されます。
| 記号 / キーワード | 意味・説明 |
| < | 前のアニメーションと同じ開始位置（前のstartTimeと同じ） |
| > | 前のアニメーションの終了時点からスタート（デフォルト動作） |
| <+=1 | 前のアニメーションの開始から1秒後に開始 |
| >-=0.5 | 前のアニメーションの終了の0.5秒前に開始 |
| label | 指定したラベルの位置にアニメーションを配置 |
| label+=1 | 指定したラベルの1秒後にアニメーションを配置 |
| <label | ラベルの位置より前（通常使われない構文） |
| タイム（数値） | タイムラインの絶対位置（秒）を指定 例: 2 → 2秒の位置 |
| +=1 | 前の位置より1秒後（相対指定） |
| -=0.5 | 前の位置より0.5秒前（相対指定） |
「タイム（数値）」とは、GSAPのタイムラインにおける「絶対時間指定」のことを指します。
- const tl = gsap.timeline();
- tl.to(".box", { x: 100, duration: 1 }, 0); // 0秒の位置にアニメーションを配置
- tl.to(".circle", { x: 100, duration: 1 }, 2); // 2秒の位置にアニメーションを配置
ここで 0 や 2 のように、数値でタイミングを直接指定する方法が「タイム（数値）」です。
相対指定と絶対時間指定の違い
| 2 | タイムラインの開始から2秒後に実行（絶対時間） |
| +=2 | 前のアニメーションが終わってから2秒後に実行（相対時間） |
実際のHTML＋JSで試してみよう！
See the Pen
Untitled by ryotom (@ryotam-smoke)
on CodePen.
この例では、ボックスが
1. フェードインしながら拡大
2. 横にスライド
3. 180度回転
という流れになります。
タイムラインの応用：繰り返し・逆再生も可能！
- const tl = gsap.timeline({ repeat: 1, yoyo: true });
- // repeat: 1 → もう一回繰り返す
- // yoyo: true → 行ったら戻る
label（ラベル）とは？
「label（ラベル）」は、GSAPのタイムライン内で「目印（名前付きの位置）」を作る機能です。
あとからその目印を使って、アニメーションの配置をわかりやすく・柔軟に制御できます。
基本の使い方
- const tl = gsap.timeline();
- tl.add("intro"); // ← この位置に「intro」というラベルを追加
- tl.to(".box", { x: 100, duration: 1 }, "intro"); // 「intro」の位置に配置
- tl.to(".circle", { y: 100, duration: 1 }, "intro+=1"); // introの1秒後に配置
• 数値で秒を管理する代わりに、名前付きのポイントで管理できる
• タイムラインが長くなっても、後から編集しやすい
• アニメーションをグループ化して整理できる
See the Pen
Untitled by ryotom (@ryotam-smoke)
on CodePen.
複数のラベルを制御する記述方法
- tl.add("ラベル名", "参照ラベル+=時間差");
このように書くことで、相対的なタイミングを明示できます。
- tl.add("titleFadeIn", "boxStart+=1.5");
• tl.add(…)
→ タイムラインの任意の位置にラベル（名前）を追加する関数
• “titleFadeIn”
→ これが新しく追加するラベル名。今後この名前を参照してアニメーションを配置できます。
• “boxStart+=1.5”
→ 既に追加されているラベルboxStartの1.5秒後の位置を指定しています。
つまり、「boxStart というラベルの1.5秒後に titleFadeIn という新しいラベルを追加する」
という意味になります。
複数の要素に適用したアニメーションの例
See the Pen
Untitled by ryotom (@ryotam-smoke)
on CodePen.
複数の要素もまとめて簡単にアニメーション設定ができるので、ちょっとした工夫で見せ方がグッと良くなります！
まとめ：GSAPのタイムラインは、Webアニメーションの設計図！
GSAPのタイムラインは、アニメーションを順序立てて設計するツールです。コードが整理され、複雑な動きも見通しよく管理できるようになります。
慣れてきたら、スクロール連動やボタンクリック連動などの応用も楽しめます！
