ツール一覧 ／ AI活用ノート ／ スクロールで動くサイトの作り方｜ScrollTriggerをAIに書かせる指示文
スクロールで動くサイトの作り方｜ScrollTriggerをAIに書かせる指示文
GSAPのScrollTriggerで「いつ動き始めて、いつ終わるか」を図で整理しました。AIにそのまま渡せる指示文の型と、スマホでカクつく・ガタつくときに上から順に試す直し方をまとめています。無料で使えるか、仕事で使ってよいかも公式ライセンスで確認しました。
結論: AIに丸投げしないでください。「いつ始まって、いつ終わるか」を言葉と値の両方で書いて渡すのが近道です。
- 動き出すタイミングがずれるなら → start／end の読み方を押さえる（"top 80%" で何が起きるか）
- これからAIに書かせるなら → 下の指示文の型をコピーし、markers（位置を示す線）で確かめる
- スマホでガタつくなら → transform と opacity だけを動かしているかから順に見直す
LPのラフは通りました。あとは「スクロールしたら実績の数字がふわっと出る」を入れるだけです。
ところがAIに頼むと、動くには動くのに、ページを開いた瞬間にもう終わっていたりします。iPhoneで見るとガタつくこともあります。
詰まる場所はだいたい決まっています。GSAPの公式ドキュメントと、GreenSockが公式に出しているAI向けルール集を読んで整理しました。
この記事の目次
スクロールで動くサイト、CSSとGSAPのどっちで作る？
フェードインだけならCSSかIntersection Observerで足ります。画面に固定したい、スクロール量どおりに動かしたいならGSAPが楽です。
| 作り方 | 得意なこと | 選ぶ前に確認しておくと安心なこと |
|---|---|---|
| CSSの animation-timeline | 軽い動き。メインスレッドの外で動くのでなめらか | 執筆時点では対応ブラウザがまだ限られている |
| Intersection Observer（ブラウザ標準） | 「画面に入ったらクラスを付ける」 | 途中の進み具合に合わせて動かすのは自分で書く |
| GSAP + ScrollTrigger | 固定、スクロール連動、細かいタイミング調整 | ライブラリの読み込みが要る |
← 表は横にスクロールできます →
選び方の基準：公式ドキュメントにある機能と、ブラウザの対応状況の2点で見ました。
CSSのスクロール駆動アニメーション（スクロールに合わせてCSSだけで動かす仕組み）は、Can I useでは世界の利用者の87.84%が対応と表示されています（2026-10-09時点）。
古めの端末まで面倒を見る案件なら、今はGSAPのほうが話が早いと思います。
ScrollTriggerの start と end、"top 80%" はどういう意味？
前の語が「動かす要素の位置」、後ろの語が「画面の位置」です。"top 80%" なら「要素の上端が、画面の上から80%の線に来たとき」です。
何も指定しないときの初期値は次のとおりです。
- start は "top bottom"（要素の上端が画面の下端に来たら開始）
- end は "bottom top"
- pin（画面に固定する設定）を使うときだけ、start の初期値が "top top" に変わる
| 書き方 | 意味 |
|---|---|
| "top center" | 要素の上端が画面の真ん中に来たとき |
| "top 80%" | 要素の上端が画面の上から80%の線に来たとき |
| "+=300" | start から300px先で終わる（endに使う） |
| "clamp(top bottom)" | ページの一番上より前で始まらないようにする |
← 表は横にスクロールできます →
markers: true を付けると、start が緑、end が赤の線で画面に出ます。上の図と同じ色にしてあるので、自分の画面と見比べてください。
toggleActions・scrub・pin、LPのどこで使い分ける？
通り過ぎたら再生するなら toggleActions。スクロールに合わせて動かすなら scrub。画面に留めて中身だけ動かすなら pin です。
| 動かし方 | LPでの使いどころ | 押さえる設定 |
|---|---|---|
| 通過で再生 | 実績の数字、お客様の声のフェードイン | toggleActions（初期値 "play none none none"） |
| スクロール量どおり | 商品画像のパララックス（奥行きを出す動き） | scrub: true、または scrub: 1 |
| 固定して中だけ動く | 「3ステップで導入」のような手順説明 | pin + scrub + timeline |
← 表は横にスクロールできます →
混乱しやすいのは、scrub と toggleActions を同じトリガーに書いてしまうケースです。両方あると scrub が優先されます。どちらか一方にしてください。
もうひとつ見落としやすい点があります。
scrub: 1 は「1秒かけてスクロールに追いつく」という意味で、アニメーションの長さではありません。動きを長くしたいなら、end を "+=300" から "+=600" のように延ばします。
ScrollTriggerをAIに書かせるとき、どう指示すればいい？
「どの要素を・いつからいつまで・どう動かすか」を書き、公式の「よくある間違い」を禁止事項として足します。これでそのまま使えるコードが出やすくなります。
いちばん効くのは、start を「言葉」と「値」の両方で書くことだと思います。
"top 80%" だけだと、AIが別の意味に取ってコードを書き換えることがあります。「要素の上端が画面の下から2割の位置に来たら」と添えれば、意図がずれにくくなります。
GSAP + ScrollTrigger でスクロールアニメーションを書いてください。
【動かす要素】.js-fade（複数ある）
【動き】下から40px上がりながら、透明→表示
【いつ始まる】要素の上端が画面の下から2割の位置に来たら（start: "top 80%"）
【方式】toggleActions。戻ったら逆再生（"play none none reverse"）
【スマホ】幅767px以下では移動量を20pxにする（gsap.matchMedia）
【動きを減らす設定の人】prefers-reduced-motion: reduce のときはアニメーションしない
【守ること】
- gsap.registerPlugin(ScrollTrigger) を書く
- 動かすのは transform（x / y）と opacity だけ。top / left / width / margin は動かさない
- 要素ごとにループして、1要素に1つの ScrollTrigger を作る
- timeline の中の個々の tween に scrollTrigger を付けない
- scrub と toggleActions を同じトリガーに併用しない
- ScrollTrigger はページの上から順に作る
- 画像やフォントの読み込み後に ScrollTrigger.refresh() を呼ぶ
- markers: true は開発中だけ。本番で外す箇所にコメントを書く
- CDN で gsap 3.15.0 を読み込む
「守ること」は、GSAP公式の「よくある間違い」と、GreenSock公式のAI向けルール集の内容をそのまま並べたものです。npmのgsapの最新版は、2026-10-09時点で3.15.0です。
使っているAIツールで、準備が少し変わります。
- Claude Code・Cursorなら → GreenSock公式のAI向けスキル集「gsap-skills」（MITライセンス）を入れておくと、「守ること」を毎回書かずに済む。Claude Codeでは
/plugin marketplace add greensock/gsap-skillsで入る - GitHub Copilotなら → このスキルは直接読み込めない。リポジトリにある
.github/copilot-instructions.mdを自分のリポジトリにコピーして使う
スマホでScrollTriggerがカクつく・ガタつくときは、何から直す？
上から順に試して、直ったところで止めます。下の2つは代わりに失うものがあるので、最後の手段です。
| 順番 | 症状 | 直し方 | 代わりに失うもの |
|---|---|---|---|
| 1 | 全体が重い | 動かすのを x／y／scale／opacity に絞る | なし |
| 2 | 重い・ちらつく | will-change を全要素に付けない。pin は必要な所だけ | なし |
| 3 | スクロールに対して動きが硬い | scrub: true を scrub: 1 にする | 動きが少し遅れてついてくる |
| 4 | 位置がずれる | 画像やフォントの読み込み後に ScrollTrigger.refresh() | なし |
| 5 | アドレスバーの出し入れでガタつく | ScrollTrigger.config({ ignoreMobileResize: true }) | トリガー位置が少し不正確になることがある |
| 6 | それでもガタつく | ScrollTrigger.normalizeScroll(true) | 実験的な機能。ピンチ拡大中は効かない。スクロールバーの出方が変わる |
← 表は横にスクロールできます →
表に入らない落とし穴も3つあります。
- 画面幅を変えると start／end がずれる → CSSの
scroll-behavior: smoothが原因のことがある。Bootstrap 5のように初期で入っているフレームワークもあるので、scroll-behavior: autoで上書きする。地味に見落としがちです - 固定した要素が一瞬ちらつく →
anticipatePin: 1を足す。固定する要素の親に transform や will-change が付いていないかも見る - 動きが苦手な人への配慮 →
gsap.matchMedia()で(prefers-reduced-motion: reduce)のときだけ動きを止める。iPhoneなら「設定 > アクセシビリティ > 動作 > 視差効果を減らす」で確認できる
よくある質問
GSAPは無料？仕事の案件で使っていい？
- 料金ページには「100%無料」とあります（2026-10-09時点）
- 標準ライセンスで商用利用が認められています。ScrollTriggerも、以前は会員限定だったSplitTextも対象です
- 禁止されているのは、コードを書かずにアニメーションを作れるツールで、Webflowと競合するものに使うことです
「有料になるケースがある」と書かれた古い記事も残っています。今の条件は、2025年4月30日発効の標準ライセンスで確かめるのが確実です。
AIに書かせたGSAPのコードを納品しても、ライセンス上は大丈夫？
| 確認先 | 書かれていること |
|---|---|
| 標準ライセンスのFAQ | AIが生成したコードは禁止された用途に当たらない |
← 表は横にスクロールできます →
例としてChatGPTやCursorが挙がっています。FAQではっきり書かれているのは、納品する側として一番うれしいポイントでした。
ページを開いた瞬間に、アニメーションが飛ぶ・終わっているのはなぜ？
- ページ上部の要素だと、初期値の start "top bottom" がスクロール位置0より前になるためです
start: "clamp(top bottom)"のように clamp() で囲めば直ります（3.12以降で使えます）
この記事のまとめ
- start／end は「要素の位置」と「画面の位置」の組み合わせ。markers の緑と赤で確かめる
- 通過で再生なら toggleActions、スクロール連動なら scrub。同じトリガーに両方は書かない
- AIには start を言葉と値の両方で書き、公式の「よくある間違い」を禁止事項として渡す
- スマホのガタつきは、transform と opacity だけで動かすところから順に直す
- GSAPは商用でも無料。AIが生成したコードもライセンスで認められている
次にやることは1つです。上の指示文の【動かす要素】と【いつ始まる】を自分のLPに合わせて書き換え、AIに渡してみてください。
この記事は、Webサイトの動く部品集 AETHER Motion の制作チームが書いています。
出典
- ScrollTriggerGSAP / 2026-10-09参照
- ScrollTrigger.normalizeScroll()GSAP / 2026-10-09参照
- ScrollTrigger.config()GSAP / 2026-10-09参照
- Most Common ScrollTrigger MistakesGSAP / 2026-10-09参照
- gsap.matchMedia()GSAP / 2026-10-09参照
- Standard LicenseGSAP（Webflow） / 2026-10-09参照
- PricingGSAP / 2026-10-09参照
- gsap-skills（Official AI skills for GSAP）GreenSock / 2026-10-09参照
- gsap-performance SKILL.mdGreenSock / 2026-10-09参照
- gsap（npm）npm / 2026-10-09参照
- Animations guide（High-performance CSS animations）web.dev（Google） / 2026-10-09参照
- prefers-reduced-motionMDN / 2026-10-09参照
- animation-timelineCan I use / 2026-10-09参照
- iPhone、iPad、iPod touchで画面の動きを減らすApple / 2026-10-09参照