1. 基本信息
| 项目 | 内容 | 数据来源 |
|---|---|---|
| 名称 | gsap-framer-scroll-animation-github-awesome-copilot | — |
| 作者/维护者 | GitHub（github/awesome-copilot 官方合集仓库，社区贡献者 Utkarsh Patrikar 提交，经官方仓库维护者审核合并） | GitHub API |
| 来源链接 | https://github.com/github/awesome-copilot/tree/main/skills/gsap-framer-scroll-animation | — |
| 许可证 | MIT（仓库级） | GitHub API |
| GitHub Stars | 38,774（GitHub API，属整个 awesome-copilot 合集，不代表本技能自身热度） | GitHub API |
| Forks | 4,909（GitHub API，同上，属合集整体） | GitHub API |
| 最新版本 | 无独立版本号，内容最近一次实质性更新 2026-04-09（PR #1284「refine gsap-framer-scroll-animation skill and references」） | GitHub API |
| 安装方式 | gh skills install github/awesome-copilot gsap-framer-scroll-animation，或手动复制 skills/gsap-framer-scroll-animation 目录到本地 skills 目录 |
2. 功能介绍与亮点
这是一个专注“滚动驱动动画”实现细节的前端技能，覆盖 GSAP ScrollTrigger 与 Framer Motion（Motion v12）两条技术路线，教 AI 编码助手按当前版本习惯正确生成滚动动画代码：
- 双库选型指引：提供一张速查表，按场景（原生 JS/Webflow/Vue 用 GSAP；React/Next.js 声明式风格用 Framer Motion；固定分区/水平滚动/复杂时间轴优先 GSAP；
whileInView入场动画优先 Framer Motion）指导技术选型，避免用错工具。 - 五种常见滚动模式的可运行代码：淡入进场、滚动联动缩放（scrub）、固定分区时间轴等，GSAP 与 Framer Motion 两套实现并列给出，可直接套用。
- 版本敏感的关键规则：明确要求 GSAP 必须先注册
ScrollTrigger插件、React 中改用useGSAP（而非useEffect，避免内存泄漏）、scrub模式下强制ease: 'none'；Framer Motion 侧提醒 Next.js 组件需加'use client'，并标注新旧包名（motion替代framer-motion）的兼容写法。 - 无障碍与性能红线：要求始终检查
prefers-reduced-motion，动画属性限定在transform/opacity，避免触发重排的width/height/box-shadow。 - 两份参考文档（
references/gsap.md、references/framer.md）分别提供完整 API 参考与 10/8 条细分场景代码配方，正文只保留速查表与最常用五种模式。
3. 适用场景
所属分类：前端与设计
适用于前端开发者在 React、Next.js 或原生 JavaScript 项目中需要实现滚动触发动画、视差效果、固定分区（pin）、滚动进度条等交互效果时使用；尤其适合不熟悉 GSAP ScrollTrigger 或 Framer Motion 具体 API 细节、希望 AI 助手直接产出“能正确运行且遵循当前版本习惯”代码的初中级开发者，避免生成过时写法（如误用 useEffect 而非 useGSAP 导致的内存泄漏）。
4. 跨 Agent 兼容性
- Claude Code：✅ 原生支持——标准 Agent Skills 格式（SKILL.md + YAML front matter），复制到
.claude/skills/目录即可使用；技能本身只生成代码、不在运行时发起网络请求，不受沙箱网络限制影响。 - Codex：✅ 原生支持——同样构建在开放的 Agent Skills 标准之上，纯文本指令与代码生成场景下无需额外适配。
- OpenClaw：未验证。
- Hermes Agent：未验证。
5. 推荐理由
GSAP ScrollTrigger 与 Framer Motion 是当前最主流的两条滚动动画实现路径，但两者 API 迭代较快（如 Framer Motion 改包名为 motion、React 集成从 useEffect 迁移到 useGSAP），训练数据中常见过时写法。本技能把两条路线的当前最佳实践、常见反模式与无障碍要求显式固化进指令，并按场景给出选型建议，减少 AI 生成能跑但有内存泄漏或可访问性缺陷的动画代码的风险。技能本身是纯 Markdown 指令文档，不执行代码、不联网、不需要任何凭据。
6. 评分
| 维度 | 分数 | 说明 |
|---|---|---|
| 受欢迎程度 | 7 | GitHub 官方合集仓库出品，经官方审核合并；合集仓库整体 38,774 星不代表该子技能自身热度，子技能自身暂无独立第三方讨论或评测 |
| 可用性 | 8 | 步骤清晰（npm install gsap 或 npm install motion 后按参考文档使用），文档结构完整、示例可直接运行；最近一次实质性更新 2026-04-09（约 5 个月前，在 6 个月维护窗口内）；无付费依赖 |
| 安全性 | 9 | 纯提示词/代码模板类技能，本身不执行任何代码、不联网、不涉及凭据；MIT 许可证明确；经 GitHub 官方仓库维护者审核合并，无造假迹象 |
安全检查清单：①无 shell 命令执行，仅指导用户在自己项目中运行标准 npm install ②运行时不联网 ③不涉及任何 API key/凭据 ④SKILL.md 全文通读未见可疑指令或隐蔽外发 ⑤经 GitHub 官方仓库审核合并，信誉良好 ⑥License 为 MIT，明确 ⑦最近一次实质性更新在 6 个月内，非弃置项目
7. 跟同类 Skills 相比的优势
| 竞品 | 定位 | 与本技能的差异 |
|---|---|---|
gsap-core（GreenSock 官方，gsap-skills 仓库） |
GSAP 创始人亲自维护的核心补间 API（gsap.to()/from()/缓动/交错动画），不含滚动联动能力，需另装同仓库的 gsap-scrolltrigger 模块才覆盖滚动场景 |
本技能直接把 GSAP ScrollTrigger 与 Framer Motion 两条路线并列覆盖，省去分别安装多个模块的步骤，且额外补充 Framer Motion 侧的完整实现 |
| motion-design-skill（LottieFiles 官方） | 运动设计原则库，教 agent 像专业动效设计师一样思考节奏、缓动曲线等设计原则，不绑定具体实现库 | 本技能面向“如何用代码实现”，提供可直接运行的 GSAP/Framer Motion 代码与库版本敏感的技术细节，两者可搭配使用（一个定原则、一个给实现） |
| premium-frontend-ui（同仓库姊妹技能，同作者） | 前端视觉设计哲学与美学标准（配色、字体、版式、视觉身份），不涉及具体动画库 API | 本技能是该设计哲学的“技术实现层”，专注滚动动画这一细分能力的库选型与代码正确性，两者定位互补而非重叠 |
8. 用户评价
该技能目前在第三方平台尚无具名用户评价，主要通过 github/awesome-copilot 官方合集仓库分发。
9. 其他补充
同仓库另有姊妹技能 premium-frontend-ui（同一作者提交），二者在 SKILL.md 中互相标注“设计搭档”关系：premium-frontend-ui 负责回答“为什么动、什么时候动”的设计决策，本技能负责回答“具体怎么实现”的技术细节。
10. 安装使用方式
- GitHub Copilot CLI：
gh skills install github/awesome-copilot gsap-framer-scroll-animation - 手动安装：克隆
github/awesome-copilot仓库后，将skills/gsap-framer-scroll-animation目录复制到对应 agent 的技能目录（Claude Code 为~/.claude/skills/，Codex 为~/.codex/skills/） - 安装后无需重启，按 SKILL.md 中的触发词（如“scroll animation”、“parallax”、“scroll-triggered reveal”）或直接描述需求（如“让页面像苹果官网一样滚动动效”）即可触发
11. 注意事项
- 技能只提供代码生成指导，实际运行仍需在项目中自行安装
gsap或motion（framer-motion新包名）依赖包。 - 若需要 GSAP 更完整的时间轴编排、React 深度集成等能力，可补充安装 GreenSock 官方
gsap-skills仓库的对应模块。 - OpenClaw 与 Hermes Agent 上的兼容性尚未有材料证实，使用前建议先行验证。