以 skill 自身的术语
关于在 Vue、Nuxt、Svelte 和 SvelteKit 组件中进行动画的官方 GSAP 指南，其中框架的生命周期决定了 DOM 节点何时存在。它要求 Agent 仅在挂载后创建 tween 和 ScrollTrigger——Vue 中的 onMounted、Svelte 中的 onMount——并在 gsap.context(scope) 内进行，同时将容器 ref 作为第二个参数传入，以使 .box 之类的选择器仅作用于该组件内部。
卸载时，ctx.revert() 会终止动画和 ScrollTrigger，并还原行内样式。内容还涵盖了一个 Nuxt 4 的 useGSAP 组合式函数，它只注册一次 ScrollTrigger，并通过动态导入按需加载 SplitText 等插件，此外还会在布局变化后刷新触发器位置。
它产出什么
- 一个可运行的 Vite + Vue 3 示例项目，演示了 context 和清理模式。
- 一个 Nuxt 组合式函数，在组件中通过 useGSAP() 使用，暴露 gsap 实例和延迟加载方法。
- 一个带类型的 lazyLoadPlugin 辅助函数，动态导入插件、将其注册到 gsap 并返回该插件。
工作方式
- 01在创建之前等待 DOM 就绪
只有在组件的 DOM 可用后才会创建 tween 和 ScrollTrigger，Vue 中使用 onMounted，Svelte 中使用 onMount，以确保容器 ref 确实存在。
- 02将所有内容限定在组件根节点范围内
整个动画设置都封装在 gsap.context(callback, scope) 中，容器 ref 作为第二个参数传入，使 .item 之类的选择器只在该子树内解析。
- 03在框架的卸载阶段还原
每个示例都将 context 保存在一个变量中，并在 Vue 的 onUnmounted 或 Svelte 的 onMount 返回的清理函数中调用 ctx.revert()。
- 04布局变化后刷新
ScrollTrigger 的位置会在布局稳定后重新计算，例如数据加载导致触发器位置改变之后。