【GSAP】Timelineのラベルとは何か？使い方を実例で解説（addLabel, removeLabel）

JavaScript

2025/8/16

記事内に広告が含まれていることがあります。

GSAPのTimelineには「ラベル（label）」という機能があります。

ラベルとは、時間軸上の特定の位置に名前を付けるための「目印」です。映画の編集ソフトで、特定のシーンの開始位置に「シーン1開始」「クライマックス」といったマーカーを打つようなものです。

ラベルを使うことで、アニメーションの追加や制御を、絶対的な時間（0.5秒後）ではなく、特定のイベント（ラベル）を基準にすることができます。

この時期ではTimelineのラベルの使い方を実例を交えて解説しています。

なお、GSAPとは何かやTimelineの基本については下記をご参考ください。

参考リンク

ラベルのつけ方（基本構文）
ラベルの実例
メソッドチェーンでも記述可能
ラベルとplayやpauseとの組み合わせ
まとめ

ラベルのつけ方（基本構文）

ラベルの追加（addLabelメソッド）

Timelineでラベルを設定するには、addLabelメソッドでラベルを追加します。

例えば、「someLabel」という名前のラベルを設定するには以下のようにします。

tl.addLabel("someLabel");

なお、第2引数で数値（秒）を指定すると、指定した場所の指定時間後の位置にラベルを追加することができます。

tl.addLabel("someLabel", 3);

基準となるラベルを指定する

追加したラベルを基準にするには第3引数でラベル名を文字列で指定します。

例えば、「someLabel」という名前のラベルを基準にしたい場合は以下のようにします。

tl.to(".class", { ... }, "someLabel")

ラベルの削除（removeLabel）

removeLabelメソッドを使うと、ラベルを削除することができます。

tl.removeLabel("someLabel");

ラベルの実例

例えば、以下のようなアニメーションの設定ができます。

1つ目のアニメーションの後ろにsomeLabelという名称のラベルを追加する。
2つ目のアニメーションはsomeLabelのタイミングで実行する。
3つ目のアニメーションはsomeLabelの2秒後に実行する。

    <style>
        .gsap-box1 {
            width: 100px;
            height: 100px;
            margin-top: 60px;
            background-color: skyblue;
            border-radius: 8px;
        }
    </style>
    <div class="gsap-box1"></div>

    <script>
        // GSAP Timelineのインスタンスを作成
        let tl = gsap.timeline({
            repeat: -1, // 無限ループ
        });

        // ボックスを右に動かすアニメーションを追加
        tl.to(".gsap-box1", { x: 200, duration: 1 });

        // 'someLabel'というラベルを、現在のタイムラインの最後に挿入
        tl.addLabel("someLabel");

        // 'someLabel'の位置に、背景色を変えるアニメーションを挿入
        tl.to(".gsap-box1", { backgroundColor: "red", duration: 1 }, "someLabel");

        // 'someLabel'の2秒後に、スケールを変更するアニメーションを挿入
        tl.to(".gsap-box1", { scale: 1.5, duration: 0.5 }, "someLabel+=2");
    </script>

メソッドチェーンでも記述可能

なお上記のコードはメソッドチェーンでつなげたものと同じです。

       // GSAP Timelineのインスタンスを作成
        let tl = gsap.timeline({
            repeat: -1, // 無限ループ
        });

        // ボックスを右に動かすアニメーションを追加
        tl.to(".gsap-box1", { x: 200, duration: 1 });

        // 'someLabel'というラベルを、現在のタイムラインの最後に挿入
        tl.add("someLabel");

        // 'someLabel'の位置に、背景色を変えるアニメーションを挿入
        tl.to(".gsap-box1", { backgroundColor: "red", duration: 1 }, "someLabel");

        // 'someLabel'の2秒後に、スケールを変更するアニメーションを挿入
        tl.to(".gsap-box1", { scale: 1.5, duration: 0.5 }, "someLabel+=2");

　↓　同じ

let tl = gsap.timeline()
  .to(".gsap-box1", { x: 200, duration: 1 })
  .add("someLabel")
  .to(".gsap-box1", { backgroundColor: "red", duration: 1 }, "someLabel")
  .to(".gsap-box1", { scale: 1.5, duration: 0.5 }, "someLabel+=2");

ラベルとplayやpauseとの組み合わせ

Timelineでは指定したTimelineを再生する「play」や停止する「pause」メソッドがあります。

この、playやpuaseメソッドを使うときにラベルで指定することで、何を再生するか（あるいは停止するか）が明確になります。

let tl = gsap.timeline({ repeat: 3, repeatDelay: 1, onComplete: myFunction });

tl.to(".class", { duration: 1, x: 200, y: 100 });
  .to("#id", { duration: 0.8, opacity: 0 }, "+=0.5");

//spinという名前のラベル名を追加
tl.addLabel("spin", 3);

//スピンラベルの位置にアニメーションを追加
tl.to(".class", { duration: 2, rotation: "+=360" }, "spin");

//スピンラベルに戻ってアニメーションを再生
tl.play("spin");