1仕組みと動作原理
1つのマスタータイムラインを軸に構成：単一の playhead と相対位置パラメータおよびラベルを用い、複数段階のアニメーションを seek 可能な一体として編成する。
skills/gsap-web/SKILL.md
Prefer one timeline over many independent tweens — it gives a single playhead, relative positioning, and easy reversal.
これは後述の ?t=N によるフリーズフレーム検証が成立するための前提条件であり、単一の playhead があって初めて安定した seek が可能となる。
スクロール駆動は ScrollTrigger の 4 つの要素（start/end/pin/scrub）を軸とし、スクラブされる tween にはスクロールと線形に対応させるため ease: none が必須であることを強調する。
skills/gsap-web/SKILL.md
start: "top top", // when trigger top hits viewport top
同セクションでは toggleActions の 4 つのコールバック位置のセマンティクス、開発環境限定の markers、および ScrollTrigger.batch() による一括処理のコスト検討についても扱う。
Lenis スムーススクロールと ScrollTrigger のジッター、ズレ、固定外れは同一の根本原因（2 つのアニメーションループが独立して tick すること）に起因しており、解決策は単一ループ化（ticker で Lenis を駆動し、Lenis のスクロールごとに ScrollTrigger を更新）である。
skills/gsap-web/SKILL.md
lenis.on("scroll", ScrollTrigger.update); // 1. update ScrollTrigger on every Lenis scroll
最も見落とされやすい単位変換（gsap.ticker は秒を渡し、lenis.raf はミリ秒を要求するため 1000 倍が必要）と、独自に rAF を二重起動しないという最頻出のエラーを明記。
テキストリビールとレイアウト遷移には専用プリミティブを使用：SplitText（フォント読み込み待ち、行マスク用の overflow:hidden、DOM 復帰のための revert）と Flip（先に state 取得、即座に DOM 変更、最後に差分をアニメーション）。
skills/gsap-web/SKILL.md
Always split AFTER web fonts load (`document.fonts.ready.then(...)`) to prevent wrong line breaks.
API を列挙するだけでなく、これらを守らなかった場合に発生する具体的な失敗パターンを併記。
SPA やフレームワークでは必ず一度クリーンアップを実施：gsap.context() または useGSAP の ctx.revert() で tween、ScrollTrigger、インラインスタイルを破棄しないと、トリガーのリークやゴースト固定の累積が発生する。
skills/gsap-web/SKILL.md
return () => ctx.revert(); // kills tweens, triggers, and reverts inline styles
Lenis の gsap.ticker.remove(update) および lenis.destroy() と合わせてアンマウント契約を構成する。
2コア機能
01タイムライン編成（相対位置パラメータ、ラベル、from/to/fromTo、quickTo 高頻度追従）
02ScrollTrigger コア機能（pin + scrub、markers、toggleActions、batch、refresh）
03Lenis および Locomotive スムーススクロールと ScrollTrigger の単一ループ同期（scrollerProxy の差異と 4 つの頻出バグを含む）
04SplitText テキストリビール（行マスク、フォント読み込みタイミング、autoSplit、revert）
05Flip レイアウト遷移（グリッドとリストの切り替え、カード展開、コンテナ間の再配置）
06イージング選定クイックリファレンス（power/back/elastic/none/steps/CustomEase）
07納品可能テンプレートとフリーズハーネス（CDN GSAP + マスタータイムライン + ?t=N、成果物として即利用可能）
08トラブルシューティング対照表（症状 → 原因、現場における Lenis 同期関連の問題を網羅）
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| package | gsap 及插件 ScrollTrigger / SplitText / Flip（正文口径：3.12+ 全部免费含商用） |
| network | 交付模板从 cdnjs 取 GSAP（产物期引用，浏览器打开时拉取；执行期本 skill 不请求） |
| package | lenis（平滑滚动，与 ScrollTrigger 单循环同步；Locomotive 走 scrollerProxy 变体） |
| package | @gsap/react（useGSAP）与 React 清理路径 |
| cli | npx / Playwright（宿主侧截图工具）与仓库根 scripts/ 助手（seek-shot.sh、contact-sheet.sh 依赖 ffmpeg） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
アクセス可能ドメインとキー範囲を宣言
管理者向け
最小権限のキー、リクエストログを保持
判定根拠（ファイルパスと抜粋）
- 网络端点: 外部ネットワークアクセスの申告: 実行時の外部通信はゼロ。納品テンプレート examples/standalone-template.html は cdnjs から gsap 3.13.0 を取得（成果物時点の参照であり、実行時の送信ではない）
- 本地工作目录: ファイル読み書きおよび成果物出力: 本スキルディレクトリ内へのディスク書き込みはゼロ。agent が直接書き出す成果物としての単一の自己完結型 .html またはユーザープロジェクト内の 1 モジュール
監査ノート： 評価判定はスキル自体のディレクトリ（skills/gsap-web/ = SKILL.md + 0バイトの README.md + 2件の references + examples/{hero-timeline.js, standalone-template.html}、find による全量検証済み）のみに基づきます。agent によって直接実行される実行可能エントリポイントは存在せず（2つの examples は成果物にコピーされるサンプルコードおよびテンプレートであり、shebang や CLI 用途はなし）、認証情報の読み取り、ディスク書き込み、実行時の外部通信はいずれも皆無です。ディレクトリ全体で URL は examples/standalone-template.html 内の cdnjs script タグ（GSAP 3.13.0）の2箇所のみであり、バッチ4の基準に従い成果物段階での参照として判定対象外とし、エンドポイントの列挙にとどめています。examples/hero-timeline.js の import gsap from 'gsap' はユーザープロジェクト側の依存関係（コメントに npm i gsap @gsap/react と記載）であり、同様に本スキルによる外部通信ではありません。
5二重目の独立検証
- [unlocatable] GSAP 3.12+ 全部插件免费含商用这一许可声明是否可在源码内核实 — SKILL.md 首段声明 As of GSAP 3.12+, every plugin (ScrollTrigger, SplitText, Flip, MotionPath, MorphSVG, Draggable, Observer) is 100% free, including for commercial use. 但仓库内只有自身 MIT LICENSE，没有上游许可文件或链接，属外部事实声明，源码内不可复核，按文档声明记录。
- [ok] Lenis 同步的乘 1000 单位换算与不要再开 rAF 是否前后一致 — SKILL.md 三段互相印证：接线代码 gsap.ticker.add((t) => lenis.raf(t * 1000))、Critical 段明写 ticker 传秒而 raf 要毫秒、Common bugs 段把 leftover requestAnimationFrame(raf) loop 列为抖动根因；references 的调试清单第 1、2 条同样指向这两点。
- [ok] examples 里的两个文件是否真的可直接用 — hero-timeline.js 头注释给出所需 markup 与 CSS 前提（.line 需 overflow:hidden），并内置 document.readyState 自动启动；standalone-template.html 除 cdnjs GSAP 外无外部依赖，自带 ?t=N 冻结与 window.__ready，与 SKILL.md 的输出契约逐条对应。
- [discrepancy] Packaged helper 的路径基准 — SKILL.md 写 scripts/seek-shot.sh anim.html 0 1.5 3，但 scripts/ 在仓库根而非本 skill 目录（目录内只有 examples/ 与 references/），单装形态下该相对路径不成立；好在 examples/standalone-template.html 自带 harness，可自给自足。
6結論
最適な用途： 適用範囲：① スクロールテリング（pin + scrub、パララックス、横スクロール、進捗連動）および複雑なタイミング制御を伴うヒーローやランディングページ；② 行単位のテキストリビールやレイアウト遷移（グリッド/リスト切り替え、カード展開）の実装；③ Lenis/Locomotive を用いたスムーススクロールを導入済み、または導入予定で ScrollTrigger との正確な同期が必要なプロジェクト；④ フリーズハーネスを備え、スクリーンショットによる検証が直ちに行えるビルド不要の納品テンプレートを求める場合。
不向きな用途： 非推奨：① シンプルなホバーやフェードインが数個必要なだけの UI（マイクロインタラクションには micro-interaction を使用）；② サードパーティのアニメーションライブラリが禁止され、プラットフォーム標準機能のみが許可されるプロジェクト（60fps-animation を使用）；③ アクセシビリティ優先の段階的デグラデーション設計が必要な場合（本スキルは基本的な reduced-motion のゲート処理のみを提供。詳細な段階分けは accessible-animation を参照）；④ フレームワークのアンマウントライフサイクル処理を考慮しない使い捨ての単発ページ。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload gsap-web.tar.gz
sha256:
Option B · Copy Guide for Agent1c57c75354a29de0…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit b6dba3eb75.