スクロールに合わせて要素がふわっと現れたり、背景の3Dオブジェクトが回転したりする「リッチな演出」は、今やAIコーディングツールへの一言プロンプトでも試せる時代になった。ただし同じ「スクロール演出」でも、ネイティブCSSだけで済む軽量な方法から、GSAPやThree.js/WebGPUを組み合わせた本格的な3D表現まで実装コストはさまざま。今日は3つの代表的な作り方と、AIにどう指示すれば狙った演出に近づけるかを整理する。
方法1：JSゼロで作るネイティブCSS Scroll-Driven Animations
2023年にCSS Animations Level 2で仕様化されたScroll-driven Animationsは、animation-timelineプロパティだけでスクロール量や要素の可視範囲をアニメーションの「時間軸」として扱える仕組みだ。JavaScriptを一切書かずに、要素が画面に入ってきたらフェードイン、スクロール量に応じて進捗バーが伸びる、といった演出が実現できる。
- scroll()タイムライン：スクロールコンテナ自体の進捗をアニメーションに連動させる（進捗バーなど）
- view()タイムライン：要素がビューポートに入って出るまでの範囲をアニメーションに連動させる（フェードイン、パララックスなど）
実装の詳細と豊富なデモはWebKitの解説記事と、専用サイトscroll-driven-animations.styleが詳しい。Chrome・Edge・Safariでは利用可能だが、Firefoxは2026年8月時点でも安定版はフラグ設定が必要で、世界的なブラウザ対応率はおよそ83%にとどまる。本番投入時は@supportsによるフォールバックを忘れずに。AIコーディングツールに「CSSのview-timelineだけでパララックスヘッダーを作って」と頼めば、この仕組みをベースにしたコードを生成してくれる。
方法2：GSAP ScrollTrigger + Lenisで作る、こだわりの演出
複雑なタイムライン制御や、複数要素を絡めた演出をブラウザ間で確実に動かしたい場合は、老舗アニメーションライブラリGSAP ScrollTriggerが依然として定番だ。スクロール位置に応じてタイムラインを細かく制御でき、動画のコマ送りやピン留め（スクロール中に要素を固定する演出）も得意とする。
ここに軽量スムーススクロールライブラリのLenisを組み合わせるのが最近の定番構成。ブラウザのネイティブスクロールをラップしつつ滑らかな慣性スクロールを実現し、GSAPやWebGLシーンのスクロール同期にも対応する。React・Vue・Framer向けのアダプターも用意されている。
AIアシスタントを使ったカスタマイズについては、GSAP Vaultの「Using AI to Customize GSAP Effects」という記事が参考になる。既存のGSAPエフェクトコードをClaudeやChatGPTに渡し、「イージングをbounceに変える」「トリガー位置を要素の20%地点に変更する」のように自然言語で調整を依頼するワークフローが紹介されている。ゼロから書かせるより、動作実績のあるコードを土台にAIへ微調整を頼む方が破綻しにくい。
方法3：Three.js/WebGPU + TSLで作る3Dシェーダー表現
背景が波打つ、パーティクルが渦を巻く、といった本格的な3D表現にはThree.jsのWebGPUレンダラーと、その上で使えるTSL（Three.js Shading Language）が有効だ。TSLはGLSL/WGSLの生シェーダーコードの代わりに、JavaScriptのメソッドチェーンでシェーダーロジックを書けるノードベースの抽象化で、AIコーディングツールとも相性が良い。
変換作業を助けるツールとしてthreejsresources.comのGLSL→TSLコンバーターがあり、既存のGLSLシェーダーをAI支援でTSL形式に書き換えられる。またClaude向けにはTSL/WebGPUの書き方を体系的にまとめたwebgpu-threejs-tsl Skillも公開されており、Claude Codeなどに読み込ませることでTSLのノード構文やコンピュートシェーダーの書き方を踏まえたコード生成が期待できる。
作例としては、Codropsに掲載されたCullen Webber氏の「Three.js Fluid Reveal Effect」チュートリアルが分かりやすい。人物シルエットの上でカーソルを動かすと流体シミュレーションが発生し、骨格レイヤーが透けて見える演出で、WebGPUのピンポン方式シミュレーションとフレネル反射マテリアルを組み合わせている。
3手法の比較
| 手法 | 実装コスト | 対応ブラウザ | 向いている用途 |
|---|---|---|---|
| CSS Scroll-Driven Animations | 低（CSSのみ） | Chrome/Edge/Safari（Firefoxはフラグ） | シンプルなフェードイン・パララックス・進捗バー |
| GSAP ScrollTrigger + Lenis | 中（JS導入） | 主要ブラウザ全般 | 複雑なタイムライン演出、動画コマ送り、慣性スクロール |
| Three.js/WebGPU + TSL | 高（3D・シェーダー知識） | WebGPU対応ブラウザが中心 | 3Dシーン、流体・パーティクルなどのシェーダー表現 |
AIに指示するときのコツ
いずれの手法も、AIに「かっこよくして」と丸投げするより、使用ライブラリと演出の意図を具体的に伝える方が精度が上がる。
- まず狙う演出を一言で定義する（例：「ヒーローセクションで背景画像がスクロール量の半分の速度で動くパララックス」）
- 使うライブラリ・APIを明示する（「CSSのanimation-timelineのみで」「GSAP ScrollTrigger + Lenisで」など）。指定しないとAIが重量級のJSライブラリを不必要に持ち込むことがある
- ブラウザ対応範囲を伝える（Firefox切り捨て可否など）でフォールバック実装の要否を判断させる
- 動作確認済みのコードをベースに、微調整だけを自然言語で依頼する（ゼロから生成させるより破綻しにくい）
主な情報源
- Animate elements on scroll with Scroll-driven animations（Chrome for Developers）
- A guide to Scroll-driven Animations with just CSS（WebKit Blog）
- scroll-driven-animations.style
- Using AI to Customize GSAP Effects（GSAP Vault Blog）
- Lenis（GitHub）
- Into WebGPU / GLSL to TSL Converter（Three.js Resources）
- webgpu-threejs-tsl Claude Skill（GitHub）
- How to Build a Three.js Fluid Reveal Effect with WebGPU（Abduzeedo）
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。