用途：在 Vue（含 Nuxt）、Svelte（含 SvelteKit）等具有挂载/卸载生命周期的组件框架中编写和审查 GSAP 动画代码。React 场景应使用 gsap-react（useGSAP、gsap.context()）；补间与时间线参考 gsap-core、gsap-timeline，滚动动画参考 gsap-scrolltrigger。
主要原则：在组件 DOM 可用后再创建补间和 ScrollTrigger（如 onMounted、onMount）；在卸载清理中 kill 或 revert，避免在已移除节点上运行造成泄漏；把选择器限定在组件根元素，使 .box 等只匹配组件内部元素。
Vue 3：在 onMounted 中用 gsap.context(callback, container.value) 创建动画，onUnmounted 调用 ctx.revert()。插件在应用级注册一次（如 main.js）。Composition API 与 script setup 写法一致，模板根元素绑定 ref。Nuxt 建议用可复用的 useGSAP composable 注册插件，并按需 lazy load 不常用的插件（如 SplitText、MorphSVG），减少初始包体积；组件中同样用 gsap.context(scope) 并在卸载时 ctx.revert()。
Svelte：在 onMount 中创建，通过 bind:this 获取根元素并传入 gsap.context 作为作用域，onMount 返回 () => ctx.revert() 完成清理。Svelte 5 生命周期不同，但原则相同：挂载时创建，销毁时 revert。
作用域与 ScrollTrigger：不要把无作用域的全局选择器用在组件中，始终把容器元素或 ref 作为 gsap.context 的第二个参数。ScrollTrigger 实例应创建在同一个 gsap.context 回调内，调用 ctx.revert() 时一并清理。布局变化（如数据加载）后需调用 ScrollTrigger.refresh()，Vue 常在 nextTick 后、Svelte 常在 tick 或异步内容加载后执行。
避免事项：不要在组件 setup 或根元素存在前的顶层同步脚本中创建动画；不要使用无作用域选择器；不要跳过清理；不要在每次渲染都执行的组件体内注册插件（应在应用级注册一次）。
限制：资料未提供安装命令、版本要求、收费或平台支持等细节，暂未提供。