【GSAP】Timelineで関数をネストさせる方法を実例で解説（複数の関数をつなげて複雑なアニメーションを作成する）

JavaScript

2025/8/16

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

GSAPのTimelineは開始時間や終了時間を指定したアニメーションを簡単に作成することができます。

より応用として、関数を使って複数のTimelineを作成し、ネストさせてつなげることができます。

ここでは、その方法を実例を用いて解説しています。

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

GSAP

TimelineのLabelの例

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

参考リンク

Timelineで関数をネストさせる方法
1. 関数を作成する
2. 関数をネストさせる（連結させる）
実例

Timelineで関数をネストさせる方法

関数を作成する

Timelineで関数をネストさせるには、まずネストさせるための関数を作成します。

例えば、intro、middle、conclusionという3つの関数を作成すると以下のようになります。

function intro() {
  var tl = gsap.timeline();
  //...add animations here...
  return tl;
}

function middle() {
  var tl = gsap.timeline();
  //...add animations here...
  return tl;
}

function conclusion() {
  var tl = gsap.timeline();
  //...add animations here...
  return tl;
}

ポイント： return tl

各関数の最後に記述している return tl が非常に重要です。

これがあることで、各関数を呼び出したときに関数の中で定義しているtlを戻り値として返すことができます。

関数をネストさせる（連結させる）

最後に、マスターとなるTimelineを作成し、その中で各関数をaddメソッドを使ってネストさせます。

その際に、第２引数でアニメーションの開始タイミングを指定することもできます。

var master = gsap.timeline();
master
  .add(intro())
  .add(middle(), "+=2") //with a gap of 2 seconds
  .add(conclusion(), "-=1"); //overlap by 1 second

各アニメーションを関数にしてつなぎ合わせることができるため、順番の入れ替えもとても簡単です。

+=2や-=1の詳細については、下記記事をご参考ください。

実例

例えば、以下のようなHTMLがあるとします。

主な要素は、h4, p,とdivが3つです。

    <div class="gsap-wrapper">
      <h4>GSAP</h4>
      <p>TimelineのLabelの例</p>
      <div class="intro-box"></div>
      <div class="middle-box"></div>
      <div class="conclusion-box"></div>
    </div>

デフォルトでは全て見えていない状態にします。

        .gsap-wrapper {
            background-color: #2c3e50;
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 500px;
            text-align: center;
            overflow: hidden;
        }
        .gsap-wrapper h4, .gsap-wrapper p {
            opacity: 0;
            transform: translateY(20px);
        }
        .gsap-wrapper .intro-box {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            opacity: 0;
            border-radius: 8px;
            margin-top: 40px;
        }
        .gsap-wrapper .middle-box {
            width: 120px;
            height: 120px;
            background-color: #f39c12;
            opacity: 0;
            border-radius: 50%;
            margin-top: 20px;
        }
        .gsap-wrapper .conclusion-box {
            width: 80px;
            height: 80px;
            background-color: #e74c3c;
            opacity: 0;
            border-radius: 8px;
            margin-bottom: 60px;
        }

これらの要素に対して、intro, middle, conclusionといった3つのアニメーション用の関数をTimelineで作成し、連結します。

function intro() {
      const tl = gsap.timeline({ repeat: 0 }); // ここで繰り返しをしない
      tl.to(".gsap-wrapper h4, .gsap-wrapper p", {
          opacity: 1, y: 0, duration: 1, stagger: 0.3
        })
        .to(".gsap-wrapper .intro-box", {
          opacity: 1, scale: 1, rotation: 360, duration: 1.5, ease: "back.out(1.7)"
        });
      return tl;
    }

    function middle() {
      const tl = gsap.timeline({ repeat: 0 });
      tl.to(".gsap-wrapper .intro-box", { y: -50, scale: 0.8, duration: 0.5 })
        .to(".gsap-wrapper .middle-box", { opacity: 1, scale: 1, duration: 1, ease: "bounce.out" });
      return tl;
    }

    function conclusion() {
      const tl = gsap.timeline({ repeat: 0 });
      tl.to(".gsap-wrapper .middle-box", { y: -50, scale: 0.8, duration: 0.5 })
        .to(".gsap-wrapper .conclusion-box", { opacity: 1, scale: 1.2, duration: 2, ease: "power2.inOut" });
      return tl;
    }

    const master = gsap.timeline({ repeat: -1});
    master
      .add(intro())
      .add(middle(), "+=1")
      .add(conclusion(), "-=0.5")

      // ループ前に初期状態に戻す
      .set([".gsap-wrapper h4", ".gsap-wrapper p", ".intro-box", ".middle-box", ".conclusion-box"], {
        opacity: 0, y: 0, scale: 1, rotation: 0
      });

※無限ループをするために、各関数にrepeat: -1;および、masterに初期状態に戻す処理を追加しています。

これで以下のような動きが再現できます。

GSAP

TimelineのLabelの例