1实现原理 · 为什么它能做到
先给跨框架统一三原则（DOM 就绪后创建 / 卸载时 kill-revert / 选择器限定组件根），再落到各框架语法。
skills/gsap-frameworks/SKILL.md
- **Scope selectors** to the component root so `.box` and similar only match elements inside that component, not the rest of the page.
注：为什么能实现宣称功能：非 React 框架没有 useGSAP 这类统一封装，只能靠生命周期钩子 + gsap.context(scope)；把「创建时机/清理时机/作用域」抽象成三原则，就能一套思路覆盖 Vue/Nuxt/Svelte 及其它组件框架。
Vue 3 给两套等价写法（Options API 的 setup() 与 <script setup>），并指向可运行的示例工程做交叉验证。
skills/gsap-frameworks/SKILL.md
See `examples/vue/` for a runnable Vite + Vue 3 project demonstrating these patterns.
注：两套写法都用 onMounted 创建 gsap.context(..., container.value)、onUnmounted 里 ctx?.revert()；示例工程存在（examples/vue/，Vite + Vue 3），skill 的规则可被真实运行验证。
Nuxt 4 给出可复用 composable 模式：集中注册常用插件 + 用动态 import 映射表懒加载重插件。
skills/gsap-frameworks/SKILL.md
Use a **reusable composable** to register GSAP Plugins and also to lazy load Plugins that are not extensively used in your application:
注：实现方式：PLUGINS 常量清单 + pluginMap（每个插件一个 () => import("gsap/Xxx")）+ lazyLoadPlugin<K>() 泛型函数（动态 import 后 registerPlugin 并返回类型化导出）；组件里 const { gsap, ScrollTrigger, lazyLoadPlugin } = useGSAP()。既控包体又保留类型提示。
Svelte 用 onMount + 返回清理函数：bind:this 拿根元素，return () => ctx.revert() 完成销毁。
skills/gsap-frameworks/SKILL.md
const ctx = gsap.context(() => {
注：并提示 Svelte 5 生命周期不同但原则一致：在「mounted」创建、在「destroyed」回收。
把 React 明确排除并指回 gsap-react，避免两套清理机制在同一仓库并存造成混乱。
skills/gsap-frameworks/SKILL.md
For **React** specifically, use **gsap-react** (useGSAP hook, gsap.context()).
注：分工靠「有没有 useGSAP」这一条切分：React 走 hook 自动回收，其它框架走生命周期钩子 + 手工 revert。
给出生命周期动作对照表，把「什么时候创建、什么时候清」做成可查表。
skills/gsap-frameworks/SKILL.md
| **Unmount / Destroy** | Call **ctx.revert()** so all animations and ScrollTriggers in that context are killed and inline styles reverted. |
注：表只有 Mounted / Unmount 两行，但配 Do Not 把「在 setup 阶段就建动画」列为错误，消除了最常见的空 ref 崩溃。
框架内 ScrollTrigger 的刷新时机被绑定到框架的 DOM 更新原语：Vue 用 nextTick、Svelte 用 tick 或等异步内容加载完。
skills/gsap-frameworks/SKILL.md
Call **ScrollTrigger.refresh()** after layout changes (e.g. after data loads) that affect trigger positions; in Vue/Svelte that often means after the DOM updates (e.g. nextTick in Vue, tick in Svelte, or after async content load).
注：这条把 gsap-scrolltrigger 的「布局变化后必须 refresh」翻译成框架语，解决「数据回来但动画位置还是旧的」问题。
2核心能力
01Vue 3（Options API setup 与 <script setup>）的 onMounted/onUnmounted + gsap.context(scope) 模式
02Nuxt 4 composable：插件集中注册 + 按需动态 import 懒加载（含类型推导）
03Svelte：onMount 返回清理函数、bind:this 绑定容器、ctx.revert() 回收
04作用域隔离：gsap.context(callback, scope) 让选择器只命中组件子树
05ScrollTrigger 生命周期协同：ST 会被 gsap.context 收纳并在 ctx.revert() 时一起回收
06框架内刷新时机：数据/DOM 更新后（nextTick / tick / 异步加载完成）调用 ScrollTrigger.refresh()
07应用级注册约定：插件只在应用启动时注册一次，不在会重渲染的组件体内注册
3外部依赖
| 类型 | 依赖 |
|---|---|
| package | gsap（核心 + 各插件子路径） |
| package | Nuxt / Vue / Svelte（示例工程的宿主框架，动态 import 的映射目标） |
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 非 React 框架没有统一 hook，清理仍靠手写 — onUnmounted/onMount 里的 ctx?.revert() 需开发者记得写；漏写就会出现我们预期外的残留实例（skill 只能以 Do Not 提示）。
- 动态 import 会改变打包结构 — lazyLoadPlugin 会创建独立 chunk；若配置不当可能与框架的 SSR/预渲染或构建优化（如 Nuxt 的自动导入）产生摩擦，需按项目实测。
- SSR 环境易踩空 DOM — Nuxt 等 SSR 框架若把 GSAP 调用放在渲染期（而非 onMounted）会报错；skill 已用「Mounted 后创建」约束，但需严格遵守。
- 示例工程含各框架版本约束 — examples 里的 nuxt ^4.4.2 / vue ^3.5.32 等版本组合是示范性的；换版本后部分模式（如 Svelte 5 生命周期）需按官方迁移指南调整。
风险提醒：绿色，放心使用。纯指令型 skill：目录内仅 SKILL.md（10,621 B），无脚本、无网络外发、无凭证读取、无文件写入；无外链（URL 扫描该文件 0 条）。正文里的 import("gsap/...") 动态加载映射是写给用户项目用的代码模式，skill 自身不执行。注意点：清理纪律（ctx.revert()）与作用域（gsap.context scope）是提示层约束，漏做会导致动画更新已卸载节点——正确性问题，非安全风险。
5第二遍独立确认
- [ok] 目录资产面：仅 SKILL.md — skills/gsap-frameworks/ 下唯一文件 SKILL.md（10,621 B）；无 scripts/、references/；URL 扫描 0 条。
- [ok] external_deps 逐条核实 — import("gsap/CustomEase") 等动态 import 映射在文件内逐字存在（pluginMap 共 24 项）；Nuxt/Vue/Svelte 依赖来自 examples/nuxt/package.json（"nuxt": "^4.4.2"）等示例工程，非 skill 自带。
- [ok] Nuxt composable 代码是否与 examples 一致 — examples/nuxt/app/composables/useGSAP.ts 与 SKILL.md 中的 useGSAP.ts 代码块结构一致（PLUGINS 常量、pluginMap、lazyLoadPlugin 泛型、registerPlugin(ScrollTrigger)），可运行验证。
- [ok] Vue/Svelte 写法是否与官方生命周期语义相符 — Vue 用 onMounted/onUnmounted、Svelte 用 onMount 返回值做清理，均为官方推荐的对应钩子；ctx?.revert() 的可选链也避免容器为空时报错。
- [ok] 安全反例搜索 — token 扫描：curl/wget/fetch(/XMLHttpRequest/exec(/child_process/process.env/.env/API_KEY/secret 零命中；无 URL、无脚本文件。
- [ok] 与 gsap-react 的分工是否重复 — 本文件首段即声明 React 走 gsap-react，并在 Learn More 再次指向；gsap-react 亦声明 Vue/Svelte 走本 skill，互不重叠。
- [ok] 元数据与 pin — frontmatter license: MIT；HEAD = aed9cfd3277740755f6bfc1155c7aa645403b760；GitHub API stars 15326 / pushed_at 2026-07-29T17:36:08Z。
- [ok] 「lazyLoadPlugin 减少初始包体」是否属实 — pluginMap 用 () => import() 动态导入，仅在调用时拉取并 registerPlugin，确为按需加载模式；原文亦给出用途限定「not widely used in your app」。
6结论
适合：适合 Vue 3、Nuxt、Svelte/SvelteKit 及其它组件化框架里用 GSAP 的项目，尤其需要按需加载重插件（SplitText/MorphSVG）控制首屏包体的 Nuxt 应用；也适合作为「非 React 框架动画规范」的评审清单。
不适合：不适合 React / Next.js 项目（明确指向 gsap-react 的 useGSAP）；不适合 jQuery 式无生命周期概念的传统页面（直接按 gsap-core/gsap-scrolltrigger 写即可）；不适合期望 skill 提供构建配置或打包优化的场景——它只给代码模式。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 gsap-frameworks.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agent8c31c95c46ec9b9f…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库greensock / greensock/gsap-skills
原始 GitHubgreensock/gsap-skills ↗
Stars15326
最近推送2026-07-29
本 skill commit
aed9cfd327许可MIT（仓库根 LICENSE，Copyright (c) 2026 GreenSock；GitHub API spdx_id=MIT；每个 SKILL.md frontmatter 亦写 license: MIT）
本站信息
收录日期2026-09-06
分类设计
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。