GSAPのTimelineとは何か？
GSAP（ジーサップ）のTimeline（タイムライン）とは、複数のアニメーションを時間軸に沿って連続でで実行するための強力なツールです。
通常、GSAPで複数のアニメーションを制御しようとすると、delay プロパティを個別に設定したり、アニメーションのコールバック関数内で次のアニメーションを呼び出したりする必要があります。しかし、この方法では、アニメーションの追加、削除、順序の変更が非常に面倒になります。
そこで登場するのがTimelineです。Timelineを使うと、まるで映画の編集をするかのように、アニメーションの再生順序、タイミング、相対的な位置を直感的に設定できます。
▼GSAPとは何か？については下記をご参考ください。
Timelineの主な特徴
- シーケンシャル実行
アニメーションを順番に再生できます。 - 相対的なタイミング制御
'+=0.5'のような記法を使って、前のアニメーションが終了してから〇秒後に開始、といった相対的なタイミングを設定できます。 - ひとまとまりの制御
Timeline全体を一度に再生、一時停止、逆再生、シーク（特定の位置にジャンプ）できます。 - コードの簡潔化
複数のアニメーションのコードを一つにまとめることができ、非常に読みやすくなります。
Timelineの使い方
ライブラリの読み込み
TimelineはGSAPのコアライブラリの中に入っています。
GSAPのライブラリはnpmやyarnでライブラリ自体をインストール方法と、scriptタグでCDNを読み込む方法があります。
一番簡単なのはCDNを読み込む方法です。
HTMLに以下のコードを記述します。
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>※上記のバージョンは3.13.0です。最新版はGSAPの公式ページで確認できます。
Timelineの基本構文
Timelineの基本構文では、timelineメソッドでtimelineのインスタンスを作成し、動かしたい要素をtoで指定します。
動かしたい要素が複数ある場合はメソッドチェーンでつないでいきます。
durationがその要素を動かす時間で、要素の動きが完了したら次の動きが始まります。
//timelineのインスタンスを作成し変数tlに格納
let tl = gsap.timeline();
tl.to("セレクタ1",
{プロパティ1: 値1,
プロパティ2: 値2,
duration: 1, //s
,,,
})
.to("セレクタ2",
{プロパティa: 値a,
プロパティb: 値b,
duration: 2, //s
,,,
})
.to("セレクタ3",
{プロパティA: 値A,
プロパティB: 値B,
duration: 1, //s
,,,
});インスタンスとは、設計図（クラス）から実際に作られた再利用可能な「モノ」のことです。
Timelineクラスという設計図を元に、新しいTimelineのインスタンスを作成し、そのインスタンスにアニメーションを追加していくことで、独自のアニメーションが構築できるようになります。
実例：Timelineの基本構文
実例を見てもらった方がわかりやすいと思います。
例えば、青い四角を以下のように３段階で動かすことができます。
①x方向に2秒かけて200px動かし
②次に、1秒かけてサイズを1.5倍して、360度回転させ、
③最後に、１秒かけて色を緑に変更する
（※動きがわかりやすいように、無限ループを設定しています）
<style>
.gsap-box1 {
width: 100px;
height: 100px;
margin-top: 60px;
background-color: skyblue;
border-radius: 8px;
}
</style>
<div class="gsap-box1"></div>
<script>
//Timelineのインスタンスを作成
let tl = gsap.timeline({
repeat: -1, // 無限ループ
});
// アニメーションを順番に追加していく
tl.to(".gsap-box1", {
x: 200,
duration: 2
})
.to(".gsap-box1", {
scale: 1.5,
duration: 1,
rotation: 360,
ease: "back.out(1.7)"
})
.to(".gsap-box1", {
backgroundColor: "green",
duration: 1
});
</script>相対時間での指定（+=1や-=1）
直前のアニメーションが終了してから「何秒後に開始する」あるいは「何秒前に開始する」といった指定もできます。
直前のアニメーションが終了してから「x秒後に開始する」には、第３引数で"+=x"を指定します。
例えば以下であれば、直前のアニメーションの後、１秒後に開始します。
tl.to(".class", { x: 100 }, "+=1");直前のアニメーションが終了する、x秒前に開始するには"-=x"とします。
tl.to(".class", { x: 100 }, "-=0.8");実例
例えば、以下のコードであれば、１つめのアニメーションが終わってから1.2秒後に拡大と回転が始まります。
そして、拡大と回転が終わる1秒前（拡大と回転している間）に色が変わります。
<style>
.gsap-box2 {
width: 100px;
height: 100px;
margin-top: 60px;
background-color: skyblue;
border-radius: 8px;
}
</style>
<div class="gsap-box2"></div>
<script>
// GSAP Timelineのインスタンスを作成
let tl2 = gsap.timeline({
repeat: -1, // 無限ループ
});
// アニメーションを順番に追加していく
tl2.to(".gsap-box2", {
x: 200,
duration: 2,
})
.to(".gsap-box2", {
scale: 1.5,
duration: 1,
rotation: 360,
ease: "back.out(1.7)"
}, "+=1.2")
.to(".gsap-box2", {
backgroundColor: "green",
duration: 1
}, "-=1");
</script>絶対時間での指定
相対時間は"+=x"や"-=x"で指定しましたが、クオテーションがない数値にした場合は、最初のアニメーションの開始から指定した時間後にアニメーションが開始します。
アニメーション開始から3秒後に開始したい場合は以下のようにします。
tl.to(".class", { x: 100 }, 3);例えば、以下の場合、最初のアニメーションの開始は1.4秒後になります。
そして、一番最後の.toで指定したアニメーションは前の2つのアニメーションによらず、一番最初の開始時間から1.6秒後に開始します。
<style>
.gsap-box3 {
width: 100px;
height: 100px;
margin-top: 60px;
background-color: skyblue;
border-radius: 8px;
}
</style>
<div class="gsap-box3"></div>
<script>
// GSAP Timelineのインスタンスを作成
let tl3 = gsap.timeline({
repeat: -1, // 無限ループ
});
// アニメーションを順番に追加していく
tl3.to(".gsap-box3", {
x: 200,
duration: 2,
},1.4)
.to(".gsap-box3", {
scale: 1.5,
duration: 1,
rotation: 360,
ease: "back.out(1.7)"
})
.to(".gsap-box3", {
backgroundColor: "green",
duration: 1
}, 1.6);
</script>Timelineのインスタンスに設定するプロパティ
Timelineのインスタンスを呼び出すときに様々なプロパティを設定することができます。
例えば、以下のようにして呼び出します。
tl = gsap.timeline({
onComplete: myFunction,
repeat: 2,
repeatDelay: 1,
yoyo: true,
});onComplete: myFunction（コールバック関数の指定）
タイムラインが完全に終了したときに実行されるコールバック関数を指定します。
タイムラインに設定された全てのアニメーション（リピートやヨヨを含めて）が完了した直後に、指定sした関数を呼び出します。
let tl = gsap.timeline({
onComplete: () => {
console.log("アニメーションがすべて完了しました！");
}
});repeat: x（繰り返し回数/無限ループの指定）
repeat プロパティは、タイムラインが「初回再生」の後に何回繰り返されるかを指定します。
- repeat: 0 (デフォルト) 繰り返さない（初回再生のみ）。
- repeat: 2 初回再生 + 2回の繰り返し = ※合計3回再生。
- repeat: -1 無限ループ
repeatで指定した数値＋１回再生されます。
let tl = gsap.timeline({ repeat: 2 }); // 合計3回再生repeatDelay: x（ループ時の開始間隔の指定）
タイムラインが1回の再生を終えてから、次の繰り返しが始まるまでの間隔を設定します。
repeat: -1 などと組み合わせて使うことで、連続再生の間に一時停止を入れることができます。
let tl = gsap.timeline({
repeat: -1,
repeatDelay: 1 // 1秒間隔で繰り返す
});yoyo: true（ループ時の再生方向の指定）
アニメーションの往復再生を有効にします。
repeat プロパティと組み合わせて使用するプロパティです。
yoyo: false(デフォルト)
アニメーションは常に順方向に再生されます。最後の状態から次のループの最初の状態に瞬時に戻るため、動きが不自然になることがあります。yoyo: true
アニメーションが順方向に再生された後、自動的に逆方向に再生され、元の状態に戻ります。これにより、往復運動が滑らかに見えます。
const tl = gsap.timeline({
repeat: -1, // 無限に繰り返す
yoyo: true // 順方向→逆方向→順方向... と往復させる
});Timelineには他にも様々なプロパティが用意されています。
デフォルトのプロパティの設定
timelineのインスタンスを生成するときに設定したプロパティと値は後から追加するメソッドに継承されます。
例えば、以下は３つのアニメーションの全てでduration: 1, ease: "elastic"を設定しています。
let tl = gsap.timeline();
tl.to(".class1", { rotation: -270, duration: 1, ease: "elastic" })
.to(".class2", { rotation: -360, duration: 1, ease: "elastic" })
.to(".class3", { rotation: -180, duration: 1, ease: "elastic" });↓ この場合、以下のように書き換えることができます。
let tl = gsap.timeline({ defaults: { duration: 1, ease: "elastic" } });
tl.to(".class1", { rotation: -270 })
.to(".class2", { rotation: -360 })
.to(".class3", { rotation: -180 });ラベル
Timelineには「ラベル（label）」という機能があります。ラベルとは、時間軸上の特定の位置に名前を付けるための「目印」です。
映画の編集ソフトで、特定のシーンの開始位置に「シーン1開始」「クライマックス」といったマーカーを打つようなものです。
ラベルを使うことで、アニメーションの追加や制御を、絶対的な時間（0.5秒後）ではなく、特定のイベント（ラベル）を基準にすることができます。
