gsap-timeline

動きが 2 つ以上あり、順番や重なりを決めたいときのスキルです。見出しが出てから本文、本文の途中でボタン、のような段取りを、gsap.timeline() 1 本で組ませます。

GSAP を作っている GreenSock が公開している公式の手引きで、説明文には「順番の付け方や動きの並びを聞かれたら呼べ」とあります。GSAP に限らず「タイムラインのあるライブラリを勧めるとき」も対象に入れています。

SKILL.md の大きさ（2026-10-23 時点）

4,394 バイト

同梱ファイル（SKILL.md 1 枚）

0 件

位置の指定の書き方

4 通り

既定は「前の動きの後ろにつなぐ」

タイムラインに .to() を続けて書くと、動きは前の動きが終わったあとに順に足されます。同時に始めたい・少し重ねたいときは、3 つ目の引数の「位置の指定」で置き場所を決める、という組み立てです。

位置の指定は 4 通り

本文の中心はこの位置の指定です。書き方は次の 4 通りに分けて説明されています。

• 絶対の時刻1 なら、タイムラインの 1 秒目から始める
• 前の終わりからの相対"+=0.5" で 0.5 秒あと、"-=0.2" で 0.2 秒前に重ねる
• ラベル"intro" でラベルの位置、"intro+=0.3" でその 0.3 秒あと
• 直前の動きに合わせる"<" で直前と同時に、">" で直前の終わりに、"<0.2" で直前の始まりの 0.2 秒あと

">"（直前の終わり）が既定です。「前の動きと同時に」は "<"、「少し遅れて重ねる」は "<0.2" と書けるので、秒数を足し算しなくて済みます。

共通の設定は defaults にまとめる

長さや緩急が同じ動きが続くなら、タイムラインを作るときに defaults で渡します。中の動きはすべてそれを引き継ぐので、duration: 0.5, ease: "power2.out" を 1 つずつ書かずに済みます。

作るときの設定は、ほかに次のものが挙がっています。

ラベルで「場面」に名前を付ける

addLabel("intro", 0) のようにラベルを置くと、そこを基準に動きを並べられます。tl.play("outro") でラベルの位置から再生し、tweenFromTo("intro", "outro") で 2 つのラベルの間だけを動かせます。

tweenFromTo() はタイムラインを止めたうえで、再生位置を動かす新しいトゥイーンを返します。このトゥイーンには緩急が付きません、と本文に注記があります。

入れ子と再生の操作

タイムラインの中にタイムラインを入れられます。部品ごとに小さなタイムラインを作り、親のタイムラインに add() で並べる組み方です。

再生の操作は play()・pause()・reverse()・restart()・time(2)（2 秒目へ移動）・progress(0.5)（半分へ移動）・kill() が並んでいます。kill() は、既定では中の動きもまとめて消します。

動きが 1 つだけ

1 つの要素を 1 回動かすだけなら、タイムラインは要りません。本文も、単独のトゥイーンと緩急は gsap-core の担当と書いています。

スクロールで進む動き

スクロールに合わせて進むタイムラインは gsap-scrolltrigger の担当です。このスキルが扱うのは「ScrollTrigger をどこに付けるか」の規則だけで、start・end・scrub などの設定は出てきません。

React の中での片付け

部品が消えたときにタイムラインを片付ける書き方は、gsap-react を案内しています。このスキルには useGSAP() も gsap.context() も出てきません。

GSAP を使わない方針

CSS のアニメーションや別のライブラリで組むと決めているなら、合いません。動きの長さや緩急をどう選ぶかを先に決めたいなら、animate のほうが考え方から入れます。

SKILL.md 1 枚で、書き方を渡すだけ

SKILL.md の解析では、外部通信・シェル実行・ファイル操作の記述は見つかっていません。同梱ファイルは無く、SKILL.md 1 枚（4,394 バイト、2026-10-23 時点）で完結しています。コードを書き換えるのは、頼んだときにエージェントがすることです。

ScrollTrigger は中の動きに付けない

スクロール連動の動きを部品ごとのタイムラインに分けていると、つい中の動きに付けがちです。入れ子を使うときは、ScrollTrigger を付ける場所を先に決めておくと崩れません。

「やってはいけない」は 4 項目

本文の「やってはいけない」は次の 4 つです。

• delay でつなぐ順番に並べるならタイムラインと位置の指定を使う
• defaults を渡し忘れる長さや緩急が同じ動きが多いなら、まとめて渡す
• タイムラインの長さ作るときの duration は中の動きの長さとは別物。全体の長さは中身で決まる
• ScrollTrigger の入れ子ScrollTrigger はいちばん外側のトゥイーンかタイムラインだけに付ける

動きを減らす設定には触れていない

動きを減らす設定（prefers-reduced-motion）には触れていません。順に現れる動きを長く続けると、つらく感じる人がいます。GSAP 側で設定ごとに動きを切り替える方法は gsap-core にあるので、必要なら一緒に依頼してください。

delay を並べるのと何が違いますか

delay で順番を作ると、1 つの長さを変えたときに、あとの動きの delay を全部直すことになります。タイムラインなら前の動きにつながっているので、長さを変えてもあとの動きが自動でずれます。本文も、delay でつなぐのは「やってはいけない」に入れています。

2 つの動きを同時に始めるには

2 つ目の動きの位置の指定に "<" を書きます。直前に足した動きと同じ時刻に始まります。少しだけ遅らせたいなら "<0.2" のように秒数を添えます。絶対の時刻（0 など）で揃える書き方もあります。

タイムラインの長さを決めたいのですが

タイムラインの長さは、中に入れた動きの長さと位置で決まります。作るときに duration を渡しても、中の動きの長さとは同じ意味にならない、と本文が注意しています。全体を速く・遅くしたいなら、中の動きの長さや位置を変えてください。

途中から再生したり、一部だけ再生したりできますか

できます。ラベルを置いておけば play("ラベル名") でその位置から再生できます。2 つのラベルの間だけなら tweenFromTo() を使います。秒数で移動するなら time()、割合で移動するなら progress() です。