WebアニメーションをGSAPでつくろう｜タイムライン

WebサイトアニメーションライブラリGSAPのタイムラインについて深堀りしていきます。

基本的な動きはこちらの記事を参考にしてください。

GSAPのタイムラインは組み合わせ次第でとっても面白い動きを実装できます。

Vanilla.jsだと管理が大変な時間差のアニメーションもGSAPのタイムライン機能を使えば簡単にわかりやすく実装することが出来ます。

当記事は公式サイトを参考に作成しています

参考｜Timeline | GSAP | Docs & Learning

タイムラインとは？

複数のアニメーションを順番につなげることの出来る便利な機能です。

CSSやJSでそのまま書くと、一つの動きの指示はできますが、連続した動き、流れの指示は難しいです。

GSAPのタイムラインを使うことで、わかりやすい形で連続したアニメーションを実装することが出来ます。

書き方もシンプルで、gsap.timeline()で土台を作り、そこに動きを点（.）でつなげていくだけです。

const tl = gsap.timeline();

tl.to(".box", { x: 100 })   // まず右へ
  .to(".box", { y: 100 });  // 次に下へ

トゥイーンをチェーンするといいます。横文字は難しいですね。

ざっくり、トゥイーンは「1つの動き」、チェーンは「つなげること」くらいの意味です。上のコードの.to()ひとつひとつがトゥイーンで、それを点でつなげているのでチェーン、という感じですね。

下のデモは、ひとつの四角に「右へ→下へ→消える」の3つの動きをチェーンでつないだものです。再生を押すと、書いた順に動いていきます。

順番にアニメーションを動かすことが出来るだけでも便利なのですが、タイミングの調整を出来たり、ボタン一つで逆再生を指定できたりと細かいオプションも付いており、やりたいことは大体できそうな感じです。

position引数でタイミングを調整する

タイムラインは順番に動かすのが基本ですが、「ちょっと重ねたい」「少し間を空けたい」みたいな細かいタイミング調整も出来ます。

それを決めるのがposition引数（ポジション引数）です。

.to()の3つ目に書く値のことで、「この動きをいつ始めるか」を指定します。

tl.to(".a", { x: 100 })
  .to(".b", { x: 100 }, "-=0.5");

何も書かないと、前の動きが終わってから次が始まります（これがデフォルト）。ここに値を足すと、開始のタイミングをズラせます。

よく見かける書き方はこのあたりです。

最初は"-=0.5"と"<"の2つだけ覚えれば十分です。これだけで動きがグッとなめらかになります。

同じ3つの四角でも、position引数があるだけで印象が変わります。「順番」と「重ねる」を見比べてみてください。

順番だとカクカクと一つずつ、重ねるとなめらかに連続して見えますよね。この「重なり」が、アニメーションを気持ちよく見せるコツだったりします。

もっと細かい指定の仕方はGSAP公式のposition引数解説ページにまとまっています（英語ですが、図が分かりやすいです）。

タイムラインを便利にする4つの機能

順番に動かす・タイミングを調整する、ここまでがタイムラインの基本です。

さらに知っておくと便利な機能を4つ紹介します。全部覚えなくても、「こんなことが出来るんだ」くらいで大丈夫です。

正直僕は使ったことがありません。

① defaults｜共通設定をまとめる

毎回duration（長さ）やease（緩急）を書くのは、地味に面倒ですよね。

defaultsにまとめて書いておくと、その下の動きすべてに自動で効きます。

const tl = gsap.timeline({
  defaults: { duration: 1, ease: "power2.out" }
});

tl.to(".a", { x: 100 })
  .to(".b", { y: 100 }); 

コードがスッキリしますし、あとから「全部の長さを変えたい」というときも1か所いじるだけで済みます。

② ラベル｜位置に名前をつける

アニメーションが長くなってくると「ここのタイミング」を指定したくなります。そんなとき、目印として名前をつけられるのがラベルです。

tl.to(".a", { x: 100 })
  .addLabel("now")
  .to(".b", { y: 100 })
  .to(".c", { opacity: 1 }, "now"); 

「nowの地点に戻ってここから再生」みたいな指定ができます。最初のうちはそこまで出番がないかもしれませんが、こういうのもある、と頭の片隅に置いておくと便利です。

③ repeat / yoyo｜繰り返し・往復

同じ動きをずっと繰り返したいときに使います。タイムラインの最初に書くだけです。

const tl = gsap.timeline({
  repeat: -1, 
  yoyo: true
});

tl.to(".box", { x: 140, duration: 1 });

• repeat: -1 … 無限ループ（回数を入れればその回数だけ）
• yoyo: true … 終わったら逆再生して戻る（往復）

ローディング中のアニメーションなど、ずっと動かしておきたいものに向いています。下のデモが、まさにrepeat: -1＋yoyo: trueで左右に往復し続けている状態です。

ちなみに下のデモはリピートのみの実装です。違いを比べてみてください。

違いはyoyo:tureを追加しただけです。

gsap.to(box, { x: dist, repeat: -1 });            
gsap.to(box, { x: dist, repeat: -1, yoyo: true });

④ ネスト｜タイムラインの中にタイムライン

少し応用ですが、タイムラインの中に別のタイムラインを入れることも出来ます。

大きな演出を「パーツ」に分けて作っておき、あとで合体させるイメージです。

// パーツ1：オープニング
const intro = gsap.timeline();
intro.to(".logo", { opacity: 1 })
     .to(".title", { y: 0 });

// 全体にまとめる
const master = gsap.timeline();
master.add(intro)                  // introを丸ごと組み込む
      .to(".content", { opacity: 1 });

長くて複雑なアニメーションも、パーツごとに分けて作れば管理がラクになります。これは「こんなこともできる」程度に知っておけば十分です。

タイムラインを操作する機能

「タイムラインとは？」のところで、タイムラインは変数に入れて使うと書きました。変数に入れておくと、あとから「再生」「停止」「逆再生」といった操作ができるようになります。

たとえばconst tl = gsap.timeline()としておけば、tl.play()で再生、tl.pause()で停止、という感じで呼び出せます。

const tl = gsap.timeline();
tl.to(".box", { x: 200, duration: 2 });

tl.pause();   // 止める
tl.play();    // 再生する
tl.reverse(); // 逆再生（巻き戻し）

よく使う操作はこのあたりです。

これらをボタンに割り当てると、こんなふうに操作できます。下のデモで実際に触ってみてください。

再生・停止・逆再生・倍速まで、ボタンひとつで自在に動かせます。

ちなみに、最初から止めておきたいときはgsap.timeline({ paused: true })と書きます。こうすると再生ボタンを押すまで動かないので、「クリックしたら動く」といった仕掛けに便利です。

AIに指示するコツ

GSAPのコードを1から手で書く機会はどんどん減っているのではないでしょうか。「こう動かして」とAIに頼めば、コードはあっという間に出てきます。

僕もGSAPの実装はAIに任せっきりです。

ただ、指示がふわっとしていると、思った動きと違うものが返ってきがちです。ここでは、GSAPのアニメーションをAIに頼むときのコツをまとめます。

コツ①｜動きを具体的に言葉にする

「どの要素を」「どう動かして」「どんな順番・タイミングで」を、できるだけ具体的に伝えます。ここが曖昧だと、AIも当てずっぽうで作るしかありません。

また、参考サイトを渡すのも有効です。URLをつけてこのサイトのこんな動きを再現したい。と伝えるだけでも再現度高く実装してくれます。

コツ②｜覚えた専門用語を使う

ここがこの記事のいちばん伝えたいところです。timeline・stagger・ease・position引数といった用語を指示に混ぜると、AIへの伝わり方が一気に良くなります。

「順番に動かして」より「timelineで順番に」、「バラバラに出して」より「staggerで時間差で」と言ったほうが、AIは意図を正確に汲み取ってくれます。今回覚えた言葉が、そのままAIへの指示の武器になるわけですね。

コツ③｜数字を添える

「速く」「ゆっくり」「ちょっと」みたいな感覚的な言葉は、人によって基準が違います。数字で伝えると、イメージのズレが減ります。

• 長さ → 「durationは1秒で」
• 移動量 → 「右に200px」
• 間隔 → 「staggerは0.1秒ずつ」

pxの指示は難しいですが、何文字分くらい、という指示で伝えると比較的伝わりやすいと思います。

時間の指示は〜秒でって伝えるのもいいですが、タイピングがめんどくさいです。

0.2sずつ。1sで動かして。こんな具合で伝えると楽ですね。sは秒(seconds)です。

コツ④｜一気に完成を狙わない

複雑な動きを一発でお願いすると、ズレたときにどこが原因か分からなくなります。「まず動かす → そこから微調整」と、段階的に頼むのがおすすめです。

「とりあえずフェードインさせて」→「もう少しゆっくりにして」→「easeをback.outに変えて」という感じで、少しずつ詰めていくと、思った形に近づけやすいです。

コツ⑤｜出てきたコードを読んで直す

そして最後がいちばん大事です。AIが出したコードを、自分で読んで微調整できること。

「ここのdurationを変えれば速さが変わるな」「staggerの数字をいじれば間隔が変わるな」と分かれば、AIに頼み直さなくても自分でサッと直せます。今回の記事の内容を押さえておけば、それができるようになっているはずです。

AIに丸投げするのではなく、AIと一緒に作って、最後は自分で仕上げる。これがいちばん早くて、思いどおりの形になります。

まとめ

当記事では、GSAPのタイムラインについて深掘りしてきました。

• タイムライン … 複数の動きを順番につなぐ（チェーン）
• position引数 … 重ねたり・ずらしたり、タイミングの調整
• 便利な機能 … defaults・ラベル・repeat/yoyo・ネスト
• 操作する機能 … 再生・停止・逆再生・倍速
• AIに指示するコツ … 用語を使って具体的に

Vanilla.jsだと管理が大変な「時間差のアニメーション」も、タイムラインを使えば直感的に組み立てられます。順番に並べて、必要ならタイミングを少しズラす。これだけで、ぐっとプロっぽい動きに近づきます。

最初から全部を覚える必要はありません。

timelineで順番につなぐ、position引数でタイミングを調整する。まずはこの2つだけでも、いろいろな動きが作れます。あとは触りながら少しずつ慣れていけば大丈夫です。

そして実装そのものは、AIに任せてしまっていい時代です。

大事なのは、出てきたコードを読んで「ここをこう直せばいい」と分かること。今回の内容を押さえておけば、AIと一緒に思いどおりのアニメーションを作っていけるはずです。

スクロールに連動した動き（ScrollTrigger）などの応用は、別の記事で解説していく予定です。

最後までご覧いただき、ありがとうございました！