スクロールで要素を動かす演出の定番が GSAP の ScrollTrigger。Claude 用の gsap-scrolltrigger スキルを入れると、AIが正しいGSAPコードを書いてくれます。導入と使い方、前回の「連番画像でコマ送り」手法との関係まで整理します。
gsap-scrolltrigger スキルとは
GSAP（GreenSock Animation Platform）は高性能なWebアニメーションの業界標準ライブラリ。その ScrollTrigger プラグインは、スクロールに連動したアニメーション（フェードイン、ピン留め、パララックス、横スクロール等）を作るためのものです。
gsap-scrolltrigger は、GitHub の freshtechbro/claudedesignskills に含まれる Claudeスキルで、GSAP/ScrollTrigger の正しい実装パターンをClaudeに教えます。前回紹介した「画像シーケンスのスクロール同期（Image Sequence Scrubbing）」＝動画のコマ送り表現もカバーしています。
なぜスキルを使うのか
素のClaudeでもGSAPコードは書けますが、start/end の指定、scrub、pin の挙動などを取り違えがちです。スキルを読み込ませると、正しいイディオムでブレなく出力できます（いわゆる“能力底上げ系”スキル）。
導入
- スキルとして追加：
npx skills add freshtechbro/claudedesignskills（正確な指定はリポジトリのREADMEを確認）。 - 手動配置：
SKILL.mdを.claude/skills/gsap-scrolltrigger/に置いてもよい。 - GSAP本体：現在は全プラグイン含めて無料で利用可能。
使い方：自然言語で頼むだけ
スキルを読み込ませた状態で、作りたい演出を言葉で指示します。例：
- 「features セクションのカードを、スクロールで下から順番にフェードインさせて（GSAP/ScrollTrigger）」
- 「製品デモ section を 300vh ピン留めし、スクロールに合わせて3ステップを順に見せて」
- 「ヒーローの背景に視差（パララックス）を付けて」
- 「frames/ の連番画像を、スクロールに同期してコマ送り表示して（image sequence scrubbing）」
主なパターン
| パターン | 用途 |
|---|---|
| Fade in on scroll | 要素が視界に入ったら表示 |
| Pin（ピン留め） | セクションを固定して中身を順に見せる |
| Horizontal scroll | 縦スクロールで横方向に移動 |
| Parallax | 背景と前景で速度差を付ける |
| Image sequence scrubbing | 連番画像をスクロールでコマ送り（前回の3Dスクロール手法） |
| Staggered | 複数要素を少しずつ時間差で |
自前の軽量雛形との使い分け
「連番画像をスクロールでコマ送りするだけ」なら、ライブラリ無しの軽量な自前雛形でも十分です（プリロード＋canvas描画で完結）。一方、コマ送りに加えて、ピン留め・パララックス・テキストの時間差表示など複雑な演出を組み合わせるなら、GSAP/ScrollTrigger（このスキル）が効きます。シンプルさ重視なら自前、表現力重視ならGSAP、という選び方です。
注意点
- パフォーマンス：アニメーションは compositor で動く性質（transform/opacity中心）に。重い処理をスクロール毎に走らせない。
- アクセシビリティ：
prefers-reduced-motionを尊重し、動きを減らす設定では演出を抑える。 - 過剰演出に注意：スクロールの“乗っ取り感”が強すぎると離脱の原因に。
主な情報源
各ライブラリ・スキルは提供元の規約・ライセンスに従ってご利用ください。情報は公開時点のものです。収集・要約はAI、公開判断は人。