gsap-core

gsap-core 技能概览

gsap-core 用来做什么

gsap-core 技能是 GSAP 核心动画 API 的官方指南：gsap.to()、from、fromTo、缓动、持续时间、stagger、defaults 以及 gsap.matchMedia()。当用户需要实用的 JavaScript 动画帮助时，它是最合适的选择，尤其适用于在原生 JS、React、Vue、Svelte 或框架无关项目中处理 DOM 或 SVG 动效。

谁应该使用它

当任务是判断 GSAP 是否适合，或者在不靠猜语法的情况下直接写出可运行的 GSAP 动画代码时，就该使用 gsap-core 技能。它对处理 UI 动效、产品动效、响应式行为或 reduced-motion 支持的开发者尤其有用。

最重要的是什么

用户通常最关心三件事：GSAP 是否适配自己的技术栈，如何清晰地表达动画，以及如何避免脆弱的动效代码。这个技能最强的地方在于：当你需要的是一份简洁可靠的 gsap-core guide，用于常见 tween 模式，而不是完整的 plugin 或 timeline 工作流时。

什么时候它最合适

当需求围绕基础动画原语、单元素或多目标 tween，或者围绕可预测控制的界面状态动画时，优先选 gsap-core。如果任务实际上涉及序列编排、滚动驱动动效，或者特定框架集成，那么 core 技能只是起点，而不是完整方案。

如何使用 gsap-core 技能

安装并启用

先通过目录里的技能系统走 gsap-core install 流程，然后在起草动画方案前加载这个技能。上游仓库刻意只聚焦在一个文件上，所以主要依赖不是翻找配套资源，而是直接阅读技能说明本身。

先读对文件

先从 SKILL.md 开始。这个文件包含推荐 GSAP 的判断规则、什么情况下不该用，以及如何在真实项目里定位 core API。由于这个 repo 里没有 rules/、resources/ 或辅助脚本，因此也没有额外的隐藏配置层需要检查。

把模糊需求转成可用提示词

一条高质量的 gsap-core usage 提示词，应该包含元素类型、期望的前后状态、触发方式，以及 reduced-motion 或框架上下文之类的约束。更好的写法是：“把 hero 标题从向下 20px、0 透明度，动画到稳定状态，使用 0.6s ease-out，并确保在移动端也能正常响应。” 更弱的写法是：“让它动起来，看起来好看一点。”

实用工作流

先用这个技能判断 GSAP 是否合适，再把动画拆成小块来写：目标、属性变化、时长、缓动，以及响应式行为。如果需求里提到 Webflow、React 或可访问性约束，务必一开始就说明，这样生成的方案才能使用正确的 GSAP 模式，而不是套一个泛化 tween。

gsap-core 技能常见问题

gsap-core 只适合基础 tween 吗？

是的，主要是。gsap-core 技能覆盖的是基础：to、from、fromTo、eases、stagger、defaults 以及响应式逻辑。对于 timelines、滚动动画、plugins 或辅助工具，通常要用其他 GSAP 技能才更匹配。

使用这个技能前需要先懂 GSAP 吗？

不需要。只要能描述元素、动效目标和运行环境，它就适合想要可运行起点的初学者。这个技能最大的价值，是在用户需要一份真正的 gsap-core guide 时提供帮助，而不只是概念性解释。

什么时候不该用 gsap-core？

如果问题本质上只是 CSS 动效、非动画类 UI 问题，或者核心任务是编排多个场景，就不该用它。对于用户明确需要 timeline 组合、滚动行为，或者像 Flip、Draggable 这样的 plugin，也不是它最好的选择。

它和普通提示词有什么不同？

普通提示词可能只会给出泛泛的动画建议。gsap-core 技能更偏向决策：它帮助你在合适的时候推荐 GSAP，避免不匹配的模式，并生成真正符合 GSAP 使用方式的代码，而不是只是看起来像动画的伪代码。

如何改进 gsap-core 技能

给出动画契约，而不只是目标

高质量输入会明确元素、起始状态、结束状态、时长和约束。例如：“页面加载时，让卡片列表从 y: 24 和 autoAlpha: 0 淡入并上移到 y: 0 且可见，持续 0.5s，使用 power2.out，并遵守 prefers-reduced-motion。” 这比“让卡片动起来”要有用得多。

尽早说明运行环境

gsap-core 技能输出的质量，取决于目标环境是 vanilla JS、React、Vue、Svelte 还是 Webflow。请说明框架、渲染模型，以及元素是否在加载时就已存在，因为这些细节会改变动画的接线方式，也会影响哪些地方可能出错。

留意常见失败模式

最常见的失误，是本来需要的是 timeline 或 scroll 交互，却按基础动画去问。另一个常见问题是漏掉响应式或可访问性要求，这会导致动画在桌面端看起来没问题，但在小屏设备上出错，或者对 reduced-motion 用户不友好。

通过可衡量的迭代来优化

拿到第一版结果后，可以一次只增加一个约束来改进提示词：更短的时长、不同的缓动、stagger 顺序、移动端行为，或者 reduced-motion 回退方案。这样得到的 gsap-core usage 往往比一次性要求完整重设计更有用，也更方便比较不同结果。