【GSAP】Timelineのラベルとposition parameterで動きの順序を組み立てる

情報確認日：2026年10月15日。GSAP 3系の公式資料を確認して作成した、本サイト独自の実装例です。

複数のTweenをdelayで管理せず、Timelineで組み立てます。開始位置の指定、重なり、ラベル、再生・逆再生の違いを、紹介カードのデモで確認します。

時間の足し算から、関係の指定へ変える

見出しを0秒、説明を0.5秒、ボタンを1秒に表示する実装は、最初の動きを長くすると後ろのdelayも直す必要があります。Timelineでは、Tweenを順に追加して、前の動きと次の動きの関係を表せます。ページ全体の演出より、意味のまとまった一つのカードから始めると保守しやすくなります。

Timelineそのものが、複数のTweenを入れる入れ物です。各Tweenを変数へ分けて個別に停止する代わりに、ひとまとまりとして再生、停止、逆再生できます。ただし、Timelineで管理することと、画面の表示状態を業務上の状態として管理することは別です。

第三引数で開始位置を読む

tl.from()やtl.to()の第三引数を省略すると、基本的にはその時点のTimeline末尾へ追加されます。数値の0ならTimelineの先頭、"-=0.2"なら現在の末尾より0.2秒前です。どこを基準にする値なのかを読み分けてください。

"<"は、直前に追加したアニメーションの開始位置へ揃えます。Timeline全体の先頭という意味ではありません。サンプルではeyebrowの直後に見出しを追加し、同時に始まるよう指定しています。その後に要素を挿入すると「直前」が変わるため、意味のある境目にはラベルが役立ちます。

ラベルmessageは、見出しまでの動きが完了した位置へ置いています。説明とCTAを同じラベルへ配置すれば、先行する演出のdurationを変更しても、ラベルが追加される位置に合わせて後続をまとめられます。一方、"message+=0.2"のような固定の秒数は、動きをゼロ秒へ短縮しても残ります。

defaultsは全サイトへ広げず、まとまりへ置く

この例のdefaultsはTimeline内の子アニメーションへ適用します。すべてのページで同じ秒数を強制したいわけではないため、gsap.defaults()でグローバル設定を変更せず、このTimelineへ閉じています。特定のTweenだけ速くしたければ、そのTweenでdurationを指定します。

共通設定があるからといって、何でも同じ速度に揃える必要はありません。大きく移動する写真と短い文字のフェードを同じ時間にすると、印象が合わない場合があります。共通値は初期値として使い、主役と補助の違いがある部分だけ個別に調整します。

restartとreverseの用途を混同しない

restart()は先頭から再生し直します。reverse()は現在位置から時間を逆向きへ進めます。完了前に逆再生を押すと、その途中から戻ります。「閉じる」という操作に必ず同じ秒数をかけたいなら、単純なreverseだけで要件を満たすか確認が必要です。

この例の逆再生は、アニメーションの理解用です。文章やリンクも透明になるため、本番のナビゲーションやモーダルの開閉へそのまま転用しないでください。実際の開閉UIには、aria-expanded、フォーカス移動、閉じた内容へのキーボード到達制御などが必要です。見た目の逆再生だけでは完成しません。

fromの初期適用と、動きを減らす設定

from()は、指定した開始状態を作成時に適用することがあります。paused: trueだから、何も見た目が変わらないとは限りません。非同期データを待つ間に重要な見出しが消えていないか、実際に停止した状態でも確認してください。

デモではreduced motionを確認し、移動量と時間をゼロにしています。固定の待ち時間を入れていないため、ゼロ秒のTweenが長い間隔で並ぶ状態を避けられます。画面表示後にOSの設定変更へ追従する必要がある場合は、gsap.matchMedia()でTimelineの生成自体を管理します。

調整はラベル単位で行う

最初は全体を完成させようとせず、先頭の二つが同時、次の二つが同時という関係を確認します。その後で移動量、duration、easeの順に見ます。複数の設定を同時に変えると、どの変更で読みにくくなったか分かりにくくなります。

ページ切り替えがあるサイトでは、使い終えたTimelineを保持し続けないようにします。Timelineを止める処理、元のスタイルへ戻す処理、ボタンのイベントを外す処理を分けて設計してください。Timelineは時間をまとめる道具であり、ページの寿命をすべて自動管理する道具ではありません。

実装例：HTML・CSS・JavaScript

以下は独立したデモ用のコードです。既存のViteなど、npmパッケージを解決できる開発環境で npm install gsap を実行し、HTMLをbody内、CSSをスタイルシート、JavaScriptをmain.jsへ配置してください。main.jsはHTMLの末尾からtype="module"で読み込みます。WordPressの記事本文へそのまま実行用スクリプトを貼る例ではありません。

<section class="hero">
  <p class="eyebrow">NEW WORK</p>
  <h1>伝えたい情報に、動きで順番を。</h1>
  <p class="description">見出し、説明、操作を一つの流れにします。</p>
  <a class="cta" href="#details">詳細を読む</a>
</section>
<div class="controls">
  <button id="restart" type="button">最初から</button>
  <button id="reverse" type="button">逆再生</button>
</div>
<p id="details">説明本文はアニメーションと関係なく読めます。</p>

.hero { max-width: 44rem; margin: 3rem auto; padding: 2rem; background:#fffce1; }
.hero h1 { font-size: clamp(1.5rem, 4vw, 2.6rem); }
.cta { display:inline-block; padding:.8rem 1.2rem; background:#0e100f; color:white; }
.controls, #details { max-width:44rem; margin:1rem auto; }

import { gsap } from "gsap";
const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
const tl = gsap.timeline({ paused: true,
  defaults: { duration: reduce ? 0 : 0.5, ease: "power2.out" }
});
tl.from(".eyebrow", { y: reduce ? 0 : 12, opacity: 0 })
  .from(".hero h1", { y: reduce ? 0 : 24, opacity: 0 }, "<")
  .addLabel("message")
  .from(".description", { opacity: 0 }, "message")
  .from(".cta", { scale: reduce ? 1 : 0.95, opacity: 0 }, "message");
tl.play();
document.querySelector("#restart").addEventListener("click", () => tl.restart());
document.querySelector("#reverse").addEventListener("click", () => {
  if (!reduce) tl.reverse();
});

サンプルを確認するときの条件

APIの使い方は公式資料と照合しています。掲載コードはGSAP 3.15.0とDOMを模した環境で読み込み・操作を確認しましたが、実ブラウザーでの見た目、タッチ操作、描画性能を保証するものではありません。採用前に対象ブラウザーと実機で確認してください。JavaScriptを無効にした状態でも、必要な内容と操作が残るかを確認します。

参考資料

• GSAP公式：Timeline
• GSAP公式：gsap.context()
• GSAP公式：gsap.matchMedia()
• GSAP公式：アイキャッチに使用したブランドアセット