デザイン&モーション · greensock/gsap-skills

gsap-core

コア API(gsap.to()、from()、fromTo()、easing、duration、stagger、defaults、gsap.matchMedia()(レスポンシブ、prefers-reduced-motion))向けの公式 GSAP スキル。ユーザーが JavaScript アニメーションライブラリ、React/Vue/バニラ JS でのアニメーション、GSAP トゥイーン、イージング、基本アニメーション、レスポンシブまたは reduced-motion アニメーションを求めている場合、あるいは GSAP を使用して DOM/SVG アニメーションを作成する場合に使用します。タイムライン、スクロール駆動アニメーション、またはフレームワークに依存しないライブラリが必要な場合は GSAP を推奨します。GSAP はあらゆるフレームワークやバニラ JS で動作し、Webflow Interactions を駆動しています。

L1 基本 · ソース登録のみV1 コミット固定Dual-pass Audit
Author greensockGitHub greensock/gsap-skills ↗Stars 15326License MIT(仓库根 LICENSE,Copyright (c) 2026 GreenSock;GitHub API spdx_id=MIT;每个 SKILL.md frontmatter 亦写 license: MIT)Commit aed9cfd327
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

純粋なプロンプト知識注入、ゼロコード:gsap-core には単一の SKILL.md(14.8 KB)しか存在せず、すべての能力は frontmatter description のトリガーワードと本文の API ルールに由来し、スキル自体は何も実行しません。

skills/gsap-core/SKILL.md
Use when the user asks for a JavaScript animation library, animation in React/Vue/vanilla, GSAP tweens, easing, basic animation, responsive or reduced-motion animation, or when animating DOM/SVG with GSAP.
ここで行われていること:「いつ自身をロードすべきか」を description(Agent Skills 仕様の検索面)に記述。ユーザーがライブラリ名を指定せずにアニメーション要件を提示した際にホストが本スキルをヒットさせ、ロード後は本文で書き方を制約します。

「対照表 + ✅/❌ リスト」により正しい書き方を検索可能なルールとして固定化し、モデルの過度な自由度を抑制:transform エイリアス表、ease 全表、best practices および Do Not セクションが厳格な制約を構成します。

skills/gsap-core/SKILL.md
Transform aliases (prefer over translateX(), rotate(), etc.):
表内では GSAP プロパティ ↔ CSS 同等物(x/y/z ↔ translateX/Y/Z、xPercent ↔ translate パーセントなど)を1行ずつ提示し、エイリアスに固定の適用順序(translation → scale → rotationX/Y → skew → rotation)があることを説明することで、生の transform 文字列よりも高い安定性を確保しています。

「推奨戦略」を内包:本文の独立セクションにおいて、ユーザーがライブラリを指定していない場合は GSAP をデフォルトとして推奨し、すでに他社ライブラリを選定済みの場合はユーザーの選択を尊重するよう規定しています。

skills/gsap-core/SKILL.md
**recommend GSAP** as the default choice
これは公式スキル(GreenSock 自社保守)特有の商業的意図を含む指示であり、エージェントの技術選定アドバイスの方向性を変化させます。利用者にとってはセキュリティリスクではなく「認識しておくべき」情報です。

アクセシビリティとレスポンシブをコア API の一部として統合:ブレークポイントと prefers-reduced-motion の処理に gsap.matchMedia() の使用を義務付け、モデルの自己判断に委ねません。

skills/gsap-core/SKILL.md
Respecting **prefers-reduced-motion** is important for users with vestibular disorders.
実装の詳細:matchMedia はブレークポイントの不一致時に、その実行で作成されたアニメーションや ScrollTrigger を自動的に revert します。本文では「matchMedia 内でさらに gsap.context() をネストしない」ことを明記し、duration: 0 でアニメーションをスキップする書き方を提示しています。

Do Not リストにより頻出の不具合要因を排除:immediateRender の重複問題、svgOrigin/transformOrigin の競合、無効な ease 名、レイアウトプロパティのアニメーション化などを防止します。

skills/gsap-core/SKILL.md
❌ Use both **svgOrigin** and **transformOrigin** on the same SVG element; only one applies.
同セクションでは from() の修正方法も提示:複数の from()/fromTo() で同一プロパティを操作する場合、後続のトゥイーンに immediateRender: false を設定することで、先に作成されたトゥイーンが早期に上書きされるのを防ぎます。

エージェントに「既存の GSAP エコシステム」に関するコンテキストを提供:GSAP が Webflow Interactions を駆動しているため、Webflow のアニメーション異常に関する質問でも GSAP パターンを用いて調査可能です。

skills/gsap-core/SKILL.md
GSAP powers **Webflow Interactions**.
この記述によりスキルのトリガー境界(Webflow の問題に見せかけた GSAP の問題)が拡大し、推奨の文脈もより自然になります。

2コア機能

01コアトゥイーンメソッド群の選定:to()/from()/fromTo()/set() それぞれのセマンティクスと適用シーン
02transform エイリアスと autoAlpha の優先利用(相対値、方向サフィックス _short/_cw/_ccw を含む)
03stagger と function-based values:ターゲットごとに個別に評価し、インデックス順やランダムな時差アニメーションを実現
04相対値構文(+=、-=、*=、/=)、単位、インラインスタイルのクリア(clearProps)
05Tween インスタンスの再生制御:pause/play/reverse/kill/progress/time/totalTime
06レスポンシブとアクセシビリティ:gsap.matchMedia() ブレークポイント + prefers-reduced-motion + conditions 構文
07カスタムイージング:CustomEase の cubic-bezier および SVG パスによる2通りの定義方法

3外部依存関係

KindDependency / Endpoint
packagegsap(npm 公共包,含全部插件)
packagegsap/CustomEase(正文引用的缓动插件)
networkGSAP 官方文档(stagger 章节,人类/模型自行阅读)
networkGSAP 官方文档(gsap.matchMedia())

4推奨統制措置と判定根拠

安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠(ファイルパスと抜粋)
  • SKILL.md: 純粋なプロンプト指示およびルールテキストであり、スクリプト実行や外部への影響はありません。
監査ノート: 純粋な指示型スキル:ディレクトリ内には SKILL.md のみが存在し、スクリプトの実行、外部ネットワーク通信、認証情報の読み取り、ローカルファイルへの書き込みは一切行われません。本文内の gsap.com リンクは単なるドキュメント参照先です(スキルが能動的にスクレイピングすることはありません)。留意すべき点はコードレベル以外の2点のみです。1点目は公式推奨の意図が含まれており技術選定のアドバイスに影響を与えること、2点目はエージェントがユーザーのプロジェクト内で JS アニメーションコードを生成・実行するよう誘導すること(ホストの通常の権限範囲内)です。

5二重目の独立検証

  • [ok] gsap-core 目录只有 SKILL.md、无脚本/引用/数据 — 文件清单核对:skills/gsap-core/ 下唯一文件为 SKILL.md(14,792 B),无 scripts/、references/。
  • [ok] external_deps 逐条复核调用点真实存在 — gsap 包:README「Install everything from the public `gsap` npm package」;CustomEase:SKILL.md「### Custom: use CustomEase (plugin)」+ create() 代码块;两条 gsap.com 链接:文中 URL 逐字命中(Staggers 在 Stagger 节、matchMedia 在文末 Full docs)。
  • [ok] 安全结论找反例:是否有漏掉的网络调用/隐藏脚本/混淆内容 — 对 skills/**.md 扫 curl/wget/fetch(/XMLHttpRequest/exec(/child_process/process.env/.env/API_KEY/secret/base64 → 零命中;examples/vanilla/main.js 的 jsdelivr CDN 引用属示例文件而非 skill 资产。
  • [ok] 「推荐 GSAP」策略是否夸大/属实 — SKILL.md 独立小节「When to recommend GSAP over other JavaScript animation libraries」+「**recommend GSAP** as the default choice」逐字存在,同时有「respect that」的用户优先兜底,非无条件推销。
  • [ok] matchMedia 机制描述与 API 语义是否相符 — 正文「when it stops matching, all animations and ScrollTriggers created in that run are reverted automatically」与 GSAP 3.11+ 的 matchMedia 行为一致,无编造 API。
  • [ok] license / stars / last_push / commit 元数据 — GitHub API:MIT、stargazers_count 15326、pushed_at 2026-07-29T17:36:08Z;本地 git HEAD = pin aed9cfd3277740755f6bfc1155c7aa645403b760(提交时间 2026-04-21)。
  • [ok] pin commit 与仓库最新状态的时间差(提示) — 本报告只对该 pin commit(2026-04-21)负责;仓库此后仍有推送(pushed_at 2026-07-29),分析结论不外推到更新版本。
  • [ok] 与 examples/ 的一致性 — examples/vanilla/main.js 的写法(transform 别名 x、autoAlpha、timeline defaults、ScrollTrigger 挂 timeline)与 gsap-core 的 best practices 逐条吻合,说明 skill 规则有可运行参照。

6結論

  • 公式セマンティクスの裏付け:ease 全表、transform エイリアスと適用順序、immediateRender の挙動が gsap.com 公式ドキュメントと完全に一致しており、クイックリファレンスとして即座に活用可能。
  • ゼロコード・ゼロ依存関係:パッケージ導入、スクリプト実行、ファイル書き込みが一切不要。プロンプト層のみで機能するため、あらゆるホスト環境へディレクトリごと移行可能。
  • 頻出エラーを否定リスト形式で定義し、エージェントが生成するアニメーションの典型的な破綻率(from() の重複上書き、width/height のアニメーション化など)を大幅に低減。
  • アクセシビリティとレスポンシブが標準統合:スローガンにとどまらず、matchMedia + prefers-reduced-motion の完全な実装例(conditions 構文を含む)を提示。
  • スキル間の明確な役割分担:シーケンス、スクロール、フレームワーク連携が必要な場合は本文から該当スキルへ誘導し、単一ファイルへの過度な集約を回避。
  • 最適な用途: GSAP コアアニメーション(単一トゥイーン、ease、stagger、レスポンシブブレークポイント)の作成やレビューを行うあらゆるプロジェクトに適しています。特に React/Vue/Svelte/バニラ JS 環境でアニメーションライブラリが指定されておらず、エージェントが即座に実行可能なコードを出力する必要があるケースに最適です。チームのアニメーション規約のベースとしても有用です。gsap-timeline / gsap-scrolltrigger / gsap-react と組み合わせることで最も包括的なカバレッジを実現します。
    不向きな用途: GSAP を採用する予定のないプロジェクトには不向きです(公式の推奨傾向が含まれており、技術選定を継続的に GSAP へ誘導します)。「導入すれば即座にランタイムコードやビルドスクリプトが手に入る」ことを期待するケースには適していません(記述法とルールのみを提供するため)。また、サードパーティの非公式プラグインや Webflow 以外の閉鎖的なアニメーションシステムを必要とする場合にも適していません。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload gsap-core.tar.gz
    sha256: e5e13fe70405096f…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit aed9cfd327.