GSAPの使い方入門｜AIが書いたコードのタイミングを自分で直す

結論: まず .to( と .from( のどちらかを見て、動く向きを確かめます。あとは触る数字を1つに絞れば、AIに頼み直さなくても直せます。

• 速さを変えたい → duration（timelineなら1行目の defaults）
• 重なりや間を変えたい → 行の最後にある "-=0.3" のような文字
• from() で画面がちらつく → CSSの visibility: hidden ＋ autoAlpha

「見出しの出方、もう少しゆっくりで」。クライアントのこの一言で、AIが書いたGSAPのコードを開いて固まる。ここ、迷いますよね。

AIに頼み直すと、毎回コード全体が書き換わります。触る場所さえ分かれば、数字を1つ直すだけです。GSAP公式ドキュメントをもとに、その場所をまとめました。

この記事の目次

1. AIのGSAPコードは、まずどこを見ればいい？
2. 速さ・重なり・時間差は、どの数字を変えればいい？
3. AIが書いたtimelineを1行ずつ読むとどうなる？
4. "-=0.3" や "<" は何？ position引数を図で見る
5. from() で画面がちらつく・要素が出てこないときの直し方
6. TweenMaxやTimelineMaxが出てきたら書き換えるべき？
7. AIに修正を頼むとき、一度で通る言い方は？
8. 商用の案件でGSAPを使ってもいい？
9. よくある質問
10. この記事のまとめ

AIのGSAPコードは、まずどこを見ればいい？

gsap.to / gsap.from / gsap.timeline のどれが使われているかを見ます。これで動きの向きと順番が分かります。

← 表は横にスクロールできます →

数字が書かれていなければ、duration（動く時間）は0.5秒、ease（動きの緩急）は "power1.out" です。AIのコードが「なんだか速い」なら、たいていこの初期値のまま動いています。

速さ・重なり・時間差は、どの数字を変えればいい？

「何を変えたいか」から引けば、触る場所は1つに絞れます。

← 表は横にスクロールできます →

「position引数」は、.to() や .from() のカッコの最後に書く文字のことです。

7つのうち、覚える価値が一番高いのはposition引数だと考えています。timelineの演出が「何か変」なとき、原因はほとんどここにあるからです。

AIが書いたtimelineを1行ずつ読むとどうなる？

ヒーローの登場アニメを例に、数字ごとの意味をコメントで書き込みました。

// 1行目: ここに書いた duration と ease が、下の3つ全部に効く
const tl = gsap.timeline({ defaults: { duration: 0.8, ease: "power2.out" } });

tl.from(".hero-title", { y: 40, opacity: 0 })          // 40px下から、透明な状態で出てくる
  .from(".hero-text",  { y: 20, opacity: 0 }, "-=0.3") // 見出しが終わる0.3秒前に始まる
  .from(".hero-card",  { y: 30, opacity: 0, stagger: 0.15 }, "<0.2");
  // ↑ 本文が始まった0.2秒後にカードが動き出す。カードは1枚ごとに0.15秒ずつずれる

← 表は横にスクロールできます →

defaults より、各行に個別に書いた値が優先されます。見出しだけ速くしたいなら、その行に duration: 0.5 を足せば済みます。

地味に見落としがちですが、AIのコードを開いたら最初に defaults を探してください。「各行に数字が無いのに遅い」という謎は、たいていここで解けます。

"-=0.3" や "<" は何？ position引数を図で見る

省略すると前の動きの後ろにつながります。+= で間があき、-= で重なり、< で同時に始まります。

← 表は横にスクロールできます →

読み違えやすいのが "<3" です。「3秒前」ではなく、直前の動きが始まってから3秒後を指します。

"-=25%" のような割合での指定もあります。こちらはGSAP 3.7.0以降で使えます。

from() で画面がちらつく・要素が出てこないときの直し方

ちらつくならCSSで先に隠す。連打で崩れるならfromTo()に書き換える。この2つで足ります。

• 開いた瞬間に一瞬見えてしまう: JavaScriptが動く前に、HTMLがそのまま出てしまうのが原因です。CSSで対象に visibility: hidden; を付け、GSAPは autoAlpha で表示します（opacityとvisibilityを同時に扱う指定です）
• ボタンを連打すると、最後まで出てこない: from() は「今の状態」を戻り先にします。途中で止まった状態が、新しい戻り先になってしまうわけです。公式は fromTo() で開始値と終了値の両方を書く方法をすすめています
• delayを付けても最初から消えている: 不具合ではありません。from() はdelayがあっても、開始状態をすぐに描きます。始まるまで待たせたいなら immediateRender: false を足します

「登場アニメ」と頼むと、AIはfrom() で書いてくることが多いはずです。クリックで何度も動かす部品なら、最初から「fromToで書いて」と頼むほうが手戻りは少ないと考えています。

TweenMaxやTimelineMaxが出てきたら書き換えるべき？

古い書き方でもまだ動きます。ただ、GSAP 3の書き方にそろえると読みやすくなります。

← 表は横にスクロールできます →

公式の移行ガイドにも「The old syntax still works（古い書き方もまだ動く）」とあります。

とはいえ、秒数が2番目に来る書き方だと duration の場所が一目で分かりません。見つけたら書き換えておくほうが、あとで自分が助かります。

緩急を目で見て選びたいなら、公式のEase Visualizerが便利です。カーブをグラフ・時計・箱の3つの見え方で確かめられます。

AIに修正を頼むとき、一度で通る言い方は？

「もっといい感じに」ではなく、どこをどう変えるかを用語つきで書きます。

• 「本文のアニメを、見出しが終わる0.3秒前から始めて（position引数 "-=0.3"）」
• 「カードの出る間隔を半分にして（stagger を今の半分に）」
• 「timelineの defaults のdurationを1.0にして、ほかは変えないで」
• 「from() をやめて fromTo() で書き直して。開始は y:30 / opacity:0、終わりは y:0 / opacity:1」

コツは最後に「ほかは変えないで」と付けること。これが無いと、AIが関係ない行まで書き直すことがあります。

商用の案件でGSAPを使ってもいい？

2026年10月10日時点では、商用の案件でも無料です。以前は有料だったプラグインも含まれます。

← 表は横にスクロールできます →

数年前の解説には「条件によってはBusiness Licenseが必要」とあるものも残っています。これは無料化より前の情報です。

ライセンスは改定されることがあります。納品前に公式のStandard Licenseを一度見ておくと安心です。

よくある質問

Q. 試すだけなら、どうやって読み込めばいい？

scriptタグを1行書けば動きます。npmなら npm install gsap です。

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>

2026年10月10日時点の最新は3.15.0です。最新版は公式のInstallationページでご確認ください。ScrollTriggerなどのプラグインは、gsap.registerPlugin() で登録してから使います。

Q. 全体を少しだけゆっくりにしたい。全部の行を直すしかない？

その必要はありません。timelineの defaults の duration を変えるか、tl.timeScale(0.8) のように全体の速さを変えます。timeScaleは1が通常の速さで、小さいほどゆっくりになります。

Q. 動きが苦手な人への配慮はどう書く？

gsap.matchMedia() に (prefers-reduced-motion: reduce) を登録します。OSで「視差効果を減らす」をオンにしている人には、動きを止めたり短くしたりできます。条件に合わなくなると、中のアニメーションは自動で元に戻ります。

この記事のまとめ

• まず to / from / timeline のどれかを見て、動きの向きと順番をつかむ
• 速さは duration、重なりはposition引数、時間差は stagger。触るのはほぼこの3つ
• 数字が無ければ0.5秒・"power1.out"。最初に defaults の有無を確かめる
• from() のちらつきは visibility: hidden ＋ autoAlpha、連打で崩れるなら fromTo()
• 2026年10月時点では、GSAPは商用でもプラグインを含めて無料

次にAIのコードを開いたら、"-=0.3" を "-=0.5" に変えて再読み込みしてみてください。重なり方の変化を一度見ておくと、AIへの頼み方も具体的になります。

この記事は、Webサイトの動く部品集 AETHER Motion の制作チームが書いています。