设计与视频工程开发
GSAP 官方动画技能
使用这技能的好处
用「GSAP 官方动画技能」把关键结果说清楚：按补间、时间轴、ScrollTrigger、插件、工具函数、React、性能和框架集…。
技能摘要
按补间、时间轴、ScrollTrigger、插件、工具函数、React、性能和框架集成分组，另有 llms.txt 给 Agent 当索引。该开源条目以 Agent Skill / SKILL.md 形式发布，作者为 GreenSock，适合把可复用流程交给 Cursor、Claude Code、Codex 等编码代理执行。博然AI笔记撰写原创导读，帮助读者看清交付物、适用边界、安装方式与常见踩坑。请以开源仓库为安装与许可准绳，以本页为中文实践参考。主要读者包括前端工程师。收录时公开星标约为 13,000（快照）。博然AI笔记按「设计与视频、工程开发」收录并提供原创导读，便于 SEO/GEO 场景下按摘要、受众、用法与来源分层阅读；安装与许可以开源仓库为准。
适合谁
- 前端工程师
- 动效设计师
- 创意开发
- JavaScript
- TypeScript
- React
- Vue
- 独立开发者
- 品牌站开发
- 交互设计师
- 视频创作者
- 设计师
- UI 设计师
- 视觉设计师
- 前端工程师
- 动效设计师
- 创意开发
- JavaScript
- TypeScript
- React
- Vue
- 独立开发者
- 品牌站开发
- 交互设计师
- 视频创作者
- 设计师
- UI 设计师
- 视觉设计师
这样用它
- 先读对应主题技能，再写动画代码。
- 性能问题走性能那条，不要用核心补间技能硬扛。
- 改代码前先写出验收标准与禁止事项，再让 Agent 按本技能约束施工，避免「看起来能跑」的半成品。
- 合并前要求 Agent 给出变更摘要、风险面与回滚点；不确定就停在评审，不要直接推生产。
- 先锁定审美方向、字体与间距规则，再生成界面或素材；不要边生成边改品牌基线。
- 交付时核对移动端可读性、对比度与焦点态，把可访问性当成验收项而不是事后补丁。
安装与来源
- 打开 GreenSock 维护的开源仓库，阅读根目录或 skills/ 下的 SKILL.md，确认触发词、依赖与兼容的 Agent 运行时（Cursor / Claude Code / Codex 等）。
- 按仓库 README 的安装方式引入：常见路径包括 skills CLI、手动拷贝技能目录到本地 skills 加载路径，或按作者提供的安装脚本执行。
- 安装后重启或热加载 Agent，用本页「这样用它」第一条提示做冒烟测试，确认技能被正确识别且约束生效。
- 留意许可证、遥测开关与版本号；升级前阅读 CHANGELOG，避免破坏既有工作流。
- 星标与版本以仓库公开页面为准；本站摘要与步骤为博然原创整理，用于选型参考，不代表原作者立场，也不替代上游文档。
源码与许可证以 GitHub 仓库 为准；星标为收录快照。