83.3K+下载
跳转到使用指南
gsap-performance作者 GreenSock

GSAP Performance Skill.

Claude Code 和 Codex 的动效与视频 skill：gSAP 性能优化，涵盖变换、避免布局抖动、will-change、批处理。

  • Motion & Video
  • UI 代码
下载 OpenDesign查看使用指南
greensock/gsap-skills · skills/gsap-performance/SKILL.mdSKILL.md
--- name: gsap-performance description: Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps. --- ## When to Use This Skill ## Prefer Transform and Opacity ## will-change ## Batch Reads and Writes ## Many Elements (Stagger, Lists) ## Frequently updated properties (e.g. mouse followers)
前言和章节标题读取自上游文件，日期 2026-09-14，完整内容共 4,105 字符

01 功能说明

gsap-performance skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物，均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

官方 GSAP 指南，教你通过选择开销小的属性并避免布局操作，使动画保持流畅的 60fps。它建议动画变换类的 key（x、y、scaleX、scaleY、rotation、rotationX、rotationY、skewX、skewY）和 opacity，而不是 width、height、top、left、margin 或 padding；只在实际参与动画的元素的 CSS 中使用 will-change；并在写入之前完成所有 DOM 读取，以避免布局抖动。

批处理指南涉及用 stagger 取代手动延迟的 tween、长列表虚拟化、鼠标跟随用 gsap.quickTo()、pin 与 scrub 的调优（配合去抖的 ScrollTrigger.refresh()），以及终止屏幕外的 tween。它是面向正在调优现有 GSAP 动画的设计师和开发者，而非从零构建动画。

它产出什么

  • 一条要添加到动画元素 CSS 中的 will-change 声明。
  • 一个针对 x 和 y 的 gsap.quickTo() 设置，由容器上的 mousemove 监听器驱动。
查看示例提示词 ↗

工作方式

  1. 01
    动画使用合成器友好的属性

    将动画限制在变换类 key 和 opacity 上，使工作保留在合成器层，而不会触发布局与绘制。

  2. 02
    让 GSAP 批处理写入操作

    GSAP 内部已经会批处理更新，因此风险在于你自己的 DOM 代码在其周围交错地进行读写。

  3. 03
    为高频变化的值复用同一个 tween

    对于每次指针移动都要更新的属性，gsap.quickTo() 会保持单个 tween 存活，而不是每次更新都分配一个新的。

  4. 04
    控制滚动驱动的工作量

    较小的 scrub 值，例如 scrub: 1，可以减少滚动期间的工作量，但文档说明要在低端设备上测试该设置。

  5. 05
    停止你看不到的动画

    暂停或终止屏幕外及非活动的动画，例如当用户离开该区块时。

02 找到适合场景

何时使用 gsap-performance Skill

当工作涉及此类动画和视频时，在 Claude Code 或 Codex 中使用 gsap-performance skill。以下适用范围和限制来自该 skill 自身的文件。

适合场景

  • 现有的 GSAP 动画出现掉帧，你想降低其布局与绘制开销。
  • 有人询问 GSAP 项目中关于卡顿、FPS 或快速动画最佳实践的问题。
  • 你在为一个长列表制作动画，需要关于虚拟化以及避免数百个同时运行的 tween 的建议。
  • 一个滚动区块固定了某个元素，你需要限制哪些内容会被提升。

了解边界

  • 为了保险而给所有元素设置 will-change 或 force3D 明确是错误的做法；它们应只用于实际正在参与动画的元素。
  • 当数百个重叠的 tween 或 ScrollTrigger 没有在低端设备上测试过时，会被视为一种反模式。

需要提供的信息

  • 动画当前更改的属性你需要知道正在被动画化的内容，才能判断 transform 和 opacity 是否可以替代那些开销较大的布局属性。

03 Skill 内部

gsap-performance skill 提供给 Claude Code 和 Codex 的规则

SKILL.md 为 Agent 设定的 7 条具体指令、默认值与限制——正是文件中真正改变结果的部分。

  1. 跳过会触发布局的属性

    width、height、top、left、margin 和 padding 会触发布局并可能导致卡顿，因此如果 transform 能达到同样效果，应避免使用它们。

  2. 用 X 和 Y 移动，而不是 Left 和 Top

    GSAP 的 x 和 y 默认是 transform（translate），因此移动时应使用它们，而不是 left 或 top。

  3. 仅在有动画的地方使用 will-change

    在将要产生动画的元素上通过 CSS 设置 will-change；这会提示浏览器提升该图层，因此它只应用于有动画的元素。

  4. 用 Stagger 代替手动延迟

    当多个元素的动画完全相同时，应使用 stagger，而不是为每个元素手写延迟并创建大量单独的 tween。

  5. 绝不要逐帧构建 timeline

    复用 timeline；每一帧都创建新的 timeline 被指出是浪费资源的做法。

  6. 仅在真正的布局变化时刷新 ScrollTrigger

    只在布局确实发生变化时（例如内容加载完成后）调用 ScrollTrigger.refresh()，不要在每次 resize 时都调用，并尽可能对其做防抖处理。

  7. 清理你启动的一切

    清理或终止屏外动画，并在布局变化时刷新 ScrollTrigger（尽可能做防抖处理），确保没有任何东西在不需要时仍在运行。

04 投入使用

在 Claude Code 或 Codex 中安装 gsap-performance

一条 npx skills add 命令，然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 gsap-performance 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行；安装程序会询问要把它添加到哪个 Agent。

Terminal
npx skills add https://github.com/greensock/gsap-skills --skill gsap-performance

针对 skills/gsap-performance/SKILL.md 的通用 skills CLI 用法；具体仓库可能会记录其自己的路径。

给 Skill 一个首次动效和视频任务

按 skill 自身的术语撰写；把括号中的部分换成你的内容。

Starter prompt
Here is my [product landing page] with a GSAP intro and a pinned ScrollTrigger section, and it drops frames on an [older Android phone]. Go through the animation and tell me which properties I should swap for transforms, which elements genuinely need will-change, and whether my ScrollTrigger.refresh() calls fire more often than the layout actually changes. I also have a [custom cursor] that follows the pointer and feels heavy.

来源：依据 SKILL.md，按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果：

  • 留意交错进行的 DOM 读写操作，因为这会导致重复的布局抖动（layout thrashing）；所有读取操作应放在最前面。
  • 确认没有任何东西仍在运行：残留的 tween 和 ScrollTrigger 会持续运行，损害性能与正确性。
  • 确认你所做动画的属性始终停留在 transform 和 opacity 上，这样浏览器只需处理合成（composite）工作。

在 OpenDesign 中 gsap-performance 已内置：Plugins → Skills，在顶部栏中选择它。

下载 OpenDesign阅读快速入门

05 开源、可追溯

来源、许可与验证

本页面事实的来源，以及最后检查时间。

Author
GreenSock
Repository
github.com/greensock/gsap-skills 分支 main
Skill 文件
skills/gsap-performance/SKILL.md 验证时记录的内容校验和；提交 aed9cfd
License
MIT 来自 LICENSE；SKILL.md 注明「MIT」。
仓库星标数
15,248 GitHub 快照摄于 2026-09-14，针对整个 greensock/gsap-skills 仓库，该仓库包含本目录中的 8 个 skill。不是 gsap-performance 的评分或使用计数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可证文本和星标数。已捆绑在 OpenDesign 主版本中（检查于 2026-08-28）；此页面尚未记录实际运行。

SKILL.md 内部

  1. 何时使用此 Skill在为 60fps 优化 GSAP 动画或排查卡顿时使用；并指向相关 skill。
  2. 优先使用 Transform 和 Opacity对 transform 相关属性和 opacity 做动画；避免使用布局属性；用 x 和 y 而不是 left 和 top。
  3. will-change在将产生动画的元素上通过 CSS 添加 will-change，以提示图层提升。
  4. 批量处理读写GSAP 会批量处理写入；在写入之前先完成所有 DOM 读取，以避免布局抖动。
  5. 大量元素（Stagger、列表）Stagger 优于手动延迟；对长列表做虚拟化；复用 timeline，而不是新建。
  6. 频繁更新的属性（例如鼠标跟随效果）对于经常更新的 x 和 y 值，使用带 mousemove 处理函数的 gsap.quickTo。
  7. ScrollTrigger 与性能只固定必要的元素，尝试较小的 scrub 值，仅在布局变化时 refresh。
  8. 减少同时进行的工作暂停或终止屏幕外的动画；简化或串行化开销大的属性动画。
  9. 最佳实践四项检查清单：transform 与 opacity、限定作用域的 will-change、stagger、清理与 refresh。
  10. 不要这样做反模式：用布局属性做位移、一刀切的 will-change 或 force3D、未经测试的大量实例、忽略清理。
Skill 自身的描述
"GreenSock 官方 GSAP performance skill —— 优先使用 transform、避免布局抖动、will-change、批处理。在优化 GSAP 动画、减少卡顿或用户询问动画性能、FPS 或流畅 60fps 时使用。"

来自 SKILL.md 的 front-matter 描述。完整文件约 4,105 个字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 gsap-performance skill 的问题

以下回答来自 2026-09-14 读取到的 SKILL.md，而非某次实际运行的记录。

我可以用它代替 gsap-core 吗？

不可以。这个 skill 是在常规 GSAP 工作之上的性能层：动画由 gsap-core（transform、autoAlpha）和 gsap-timeline 构建，ScrollTrigger 的性能细节则见 gsap-scrolltrigger。

鼠标跟随效果该怎么实现？

用 gsap.quickTo() 处理 x 和 y 值并指定 duration 与 ease，然后在 mousemove 监听器中调用返回的函数。它复用同一个 tween，而不是在每次更新时新建 tween。

GSAP Performance

在真实的动效与视频任务上运行 gsap-performance。

gsap-performance skill 内置于 OpenDesign。下载应用，在 Plugins → Skills 中选择该 skill，粘贴上述提示词，在查看结果前先阅读计划。

下载 OpenDesign浏览所有 skills
终端
npx skills add https://github.com/greensock/gsap-skills --skill gsap-performance