OpenMontage gsap-frameworks 技能实战在 Vue 3 / Svelte 等非 React 框架中正确管理 GSAP 生命周期与作用域【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontageGSAPGreenSock Animation Platform是框架无关的动画引擎但在 Vue、Svelte 这类带组件生命周期挂载/卸载的框架里错误的创建时机与缺失的清理会让动画作用到已脱离 DOM 的节点、泄漏事件并污染页面其他区域。本文以 OpenMontage 仓库中装载的官方 gsap-frameworks 技能见 SKILL.md为骨架系统讲解挂载后创建、卸载时回滚、选择器限定组件根节点三大原则并给出 Vue 3 Composition API、script setup与 Svelte 三套可直接落地的完整代码。读完你将掌握在任何带生命周期框架中零泄漏地接入 GSAP 与 ScrollTrigger 的标准范式。技能背景这是 OpenMontage 中哪一个技能何时被触发在 OpenMontage 的 Agent 技能体系中.agents/skills/目录存放着可直接装载loadable的 Layer 3 技能每个技能目录内以SKILL.md描述其触发条件与用法。本文主角gsap-frameworks就是其中之一其 frontmatter 明确给出三条信息name:gsap-frameworksdescription: 用户想在 Vue、Nuxt、Svelte、SvelteKit 或其他非 React 组件框架中使用动画或询问 GSAP 与这些框架的生命周期钩子onMounted、onMount、onDestroy配合时触发当用户未指定动画库时推荐 GSAPReact 场景应改用 gsap-react。license: MIT技能内容源自 GSAP 官方技能合集由仓库按 MIT 协议收录。它与同目录下的 gsap-core、gsap-timeline、gsap-scrolltrigger、gsap-react 等共八个技能构成一套完整的 GSAP 知识包。这份技能的定位可以从两点印证.agents/skills/gsap/README.md本身不是可装载技能而是一张导航图其中将Vue / Svelte / non-React host非 React 宿主明确路由到本技能。在同一仓库中GSAP 的生产场景集中在两处Remotion 组件内做 SplitText / MorphSVG / MotionPath 这类手写interpolate()难以完成的复杂动画以及 HyperFrames 组合运行时其以暂停的 GSAP 时间线 逐帧 seek作为动画执行模型。这两个场景都落在 React 与时间线技能上凡是跑到 Vue/Svelte 这类组件化 web 宿主的动画任务则由本技能兜底。此外 gsap-scrolltrigger 在导航图中被标注为仅用于 web 预览不进入视频渲染滚动驱动动画同样不应出现在离屏视频渲染路径中。技能体系不是摆设仓库用契约测试保证技能指针可解析tests/contracts/test_agent_skill_pointers.py会遍历每个工具声明的agent_skills字段断言对应的.agents/skills/name/SKILL.md真实存在从而确保上述路由链路不会指向失效文件。三条适用于所有框架的核心原则无论宿主是 Vue、Nuxt、Svelte 还是 SvelteKit技能都要求遵守三条铁律在 DOM 可用之后创建动画与 ScrollTrigger例如 Vue 的onMounted、Svelte 的onMount。在 setup 顶层或任何先于根元素存在的同步代码中创建目标节点尚未渲染动画会静默失效。在卸载unmount或等价的清理点 kill / revert 一切动画保证没有动画运行在已脱离文档的节点上也不产生内存泄漏与内联样式残留。将选择器作用域限定到组件根节点让.box、.item之类的类名选择器只命中本组件内的元素而不是整页同名元素。这三条原则可拆成两个动作挂载时创建、卸载时回滚与一个机制gsap.context()作用域下文逐一落到各框架的具体写法。Vue 3Composition APIonMounted创建 onUnmounted回滚gsap.context()是本技能贯穿始终的核心 API把创建动画的回调作为第一参数、组件容器元素作为第二参数scope回调里所有基于选择器文本创建的动画与 ScrollTrigger 都会被收集进该 context调用ctx.revert()即可一次性全部 kill 并恢复被修改的内联样式。import { onMounted, onUnmounted, ref } from vue; import { gsap } from gsap; import { ScrollTrigger } from gsap/ScrollTrigger; gsap.registerPlugin(ScrollTrigger); // 每个应用只需注册一次例如在 main.js export default { setup() { const container ref(null); let ctx; onMounted(() { if (!container.value) return; ctx gsap.context(() { gsap.to(.box, { x: 100, duration: 0.6 }); gsap.from(.item, { autoAlpha: 0, y: 20, stagger: 0.1 }); }, container.value); }); onUnmounted(() { ctx?.revert(); }); return { container }; } };这段代码包含了技能要求的关键检查点✅gsap.context(scope)把容器 ref 的值container.value作为第二参传入回调内.item这类选择器被限定在container之内context 会追踪回调中创建的所有动画与 ScrollTrigger。✅onUnmounted中调用ctx.revert()让所有 tween 与 ScrollTrigger 被 kill、内联样式被还原组件反复进出也不留痕迹。几个值得展开的动画参数语义详见配套的 gsap-core 技能文档gsap.to(.box, { x: 100, duration: 0.6 })x是 transform 别名等价 translateX默认单位 px比直接写 transform 字符串更高效且可预测duration以秒计默认值是0.5。gsap.from(.item, { autoAlpha: 0, ... })入场动画从透明态开始。autoAlpha优于裸用opacity——当值为0时 GSAP 同时设置visibility: hidden元素不可见且不阻挡点击恢复非零值时visibility回到inherit。stagger: 0.1相邻元素启动时间间隔 0.1 秒形成依次错落的入场队列需要更精细控制时可改用对象语法如{ each: 0.1, from: center }。若模板用template包裹多个根节点注意选择器作用域需要落到包含目标元素的真实容器上而gsap.context()的第二参数接受 DOM 元素或 ref。Vue 3script setup同一套逻辑的更简洁形态script setup单文件组件遵循完全相同的思想——差异仅在于模板中通过refcontainer绑定根元素script setup import { onMounted, onUnmounted, ref } from vue; import { gsap } from gsap; import { ScrollTrigger } from gsap/ScrollTrigger; const container ref(null); let ctx; onMounted(() { if (!container.value) return; ctx gsap.context(() { gsap.to(.box, { x: 100 }); gsap.from(.item, { autoAlpha: 0, stagger: 0.1 }); }, container.value); }); onUnmounted(() { ctx?.revert(); }); /script template div refcontainer div classboxBox/div div classitemItem/div /div /template要点refcontainer在模板编译阶段把根div实例挂到container.valueonMounted触发时该值必然非空空值守卫if (!container.value) return只是为了防御性地兜底。每次组件卸载后重新挂载都会创建新的 context旧的已被ctx.revert()清理因此不存在跨生命周期累积的动画。若在 Nuxt 这类带服务端渲染的框架中使用所有 GSAP 代码必须留在客户端生命周期钩子里——GSAP 依赖window与真实 DOM服务端渲染阶段不应执行任何gsap.*或ScrollTrigger.*调用该约定与 gsap-react 技能中GSAP 只在客户端运行、禁止 SSR 期间调用的规范一致可推断为框架无关要求。SvelteonMount返回清理函数 bind:this获取容器Svelte 的onMount支持返回一个清理函数组件销毁时自动执行——这恰好是回滚 context 的理想位置script import { onMount } from svelte; import { gsap } from gsap; import { ScrollTrigger } from gsap/ScrollTrigger; let container; onMount(() { if (!container) return; const ctx gsap.context(() { gsap.to(.box, { x: 100 }); gsap.from(.item, { autoAlpha: 0, stagger: 0.1 }); }, container); return () ctx.revert(); }); /script div bind:this{container} div classboxBox/div div classitemItem/div /div✅bind:this{container}将根元素绑定到变量container随后作为gsap.context(scope)的作用域传入。✅return () ctx.revert()Svelte 约定onMount返回的清理函数在组件销毁时执行ctx.revert()放在这里即可保证动画与 ScrollTrigger 被一并杀掉。技能同时提醒Svelte 5 采用了不同的生命周期模型但原则不变——在等效于mounted的时刻创建、在等效于destroyed的时刻回滚按你所使用版本的生命周期入口套用gsap.context()revert()即可。对 SvelteKitSSR同样适用上述客户端专属约束。选择器作用域永远把 scope 传给gsap.context()组件化框架最隐蔽的 bug 是类名冲突页面其他区域或其他组件实例也有.box一旦写出无作用域的全局选择器动画就会命中范围之外的节点。✅gsap.context(() { gsap.to(.box, ...) }, containerRef)——.box只在containerRef内部被检索。❌ 在组件中脱离 context scope 直接执行gsap.to(.box, ...)—— 可能影响其他实例乃至整个页面。因此任何gsap.to / from / fromTo / timeline只要目标是选择器文本就应当位于gsap.context()回调内部并传入组件根作为 scope。若目标原本就是 DOM 引用ref / 元素 / 数组 / NodeListGSAP 也接受直接引用传参——从 gsap-core 的 targets 说明可以看出选择器字符串、元素引用、数组与 NodeList 都是合法目标类型选择器场景下务必配合 scope 使用。ScrollTrigger 的创建与清理纳入 context 并在布局变化后 refresh只要在 tween/timeline 上配置了scrollTrigger或显式调用了ScrollTrigger.create()就会产生 ScrollTrigger 实例。关键事实是在gsap.context()回调内创建的 ScrollTrigger 会被 context 一并追踪ctx.revert()会同时清理它们。ctx gsap.context(() { gsap.to(.panel, { x: 200, scrollTrigger: { trigger: .panel, start: top center } }); ScrollTrigger.create({ trigger: .scroller, start: top 80% }); }, container.value); // onUnmounted → ctx.revert() 会同时 kill 上面的 tween 与两个 ScrollTrigger配套要求把 ScrollTrigger 与 tween放进同一个 context 回调里创建让清理统一收敛到一次ctx.revert()。布局变化后调用ScrollTrigger.refresh()让触发位置start/end 依据元素当前几何位置计算重新校准。在 Vue/Svelte 中这通常发生在 DOM 更新之后——例如 Vue 的nextTick、Svelte 的tick或异步内容图片、接口数据、动态列表加载完成后。若跳过refresh()异步加载改变页面高度后触发点会错位造成滚动到却未触发或提前触发的经典问题。创建与清理的生命周期时机速查生命周期动作Mounted已挂载在gsap.context(scope)内创建 tween 与 ScrollTriggerUnmount / Destroy卸载/销毁调用ctx.revert()kill context 内全部动画与 ScrollTrigger并还原内联样式反过来讲不要在 setup 顶层或任何先于根元素存在的同步顶级脚本中创建 GSAP 动画。setup()执行时模板尚未挂载容器 ref 为空、目标节点不存在必须等到onMounted/onMount或等效入口让容器真正进入 DOM 后再动手。上述代码中统一出现的if (!container.value) return空值守卫正是对这一时序的显式防御。常见反模式Do Not逐条解读技能在收尾处给出一份精简的反模式清单是代码评审时的核对表❌在组件挂载前创建 tween 或 ScrollTrigger如在未搭配onMounted的 setup 中执行目标 DOM 可能尚不存在动画被创建到不存在的节点上产生无效引用。❌使用不带 scope 的选择器字符串始终把容器作为第二参数传给gsap.context()否则.box这类选择器会命中组件之外的元素。❌跳过清理始终在onUnmounted/onMount返回的函数里调用ctx.revert()确保组件销毁时动画与 ScrollTrigger 被杀、内联样式还原否则会泄漏并持续驱动已卸载节点。❌在每次渲染都会执行的组件体内注册插件gsap.registerPlugin(...)不会造成破坏但纯属浪费——在应用入口main.js/ 模块顶层注册一次即可。从 gsap-core 的说明可以确认插件注册属于应用级的一次性初始化。评审 GSAP 代码时可逐一对照创建是否都在 mount 之后选择器是否都套了 scope每次卸载是否都走到了ctx.revert()插件注册是否已提升到模块/应用级配套技能矩阵与仓库使用边界本技能不是孤立文件OpenMontage 的 gsap 技能包与仓库文档共同构成一张可检索的路由表任务场景应读取的技能/文档从零开始写任何 GSAP 动画gsap-core多步编排、时间线 choreographygsap-timeline逐字/逐字符文字动画、SVG 形变、路径运动、自定义缓动gsap-pluginsSplitText / MorphSVG / MotionPath / CustomEaseReact 组件如 Remotion、HyperFrames中的 GSAPgsap-reactVue / Svelte / 非 React 宿主本文对应的 gsap-frameworks数学工具clamp、mapRange、interpolate、randomgsap-utils动画性能排查gsap-performance滚动驱动动画web 预览不进入视频渲染gsap-scrolltriggeragent 在动画创作时并不会自动想起这些技能skills/meta/animation-runtime-selector.md是仓库内的调度元技能创作任何动画场景前应先读它由它按所需运动类型路由到正确的 Layer 3 技能当工具声明了agent_skills字段时技能会被自动装载而 test_agent_skill_pointers.py 用回归测试守护了这条链路。值得注意的是 OpenMontage 自身的使用边界当前仓库的 Remotion 组合仍以useCurrentFrame()interpolate()spring()驱动GSAP 只作为两处特定场景的补充——Remotion 组件内的高级文字/SVG/路径动画以及 HyperFrames 组合运行时GSAP 时间线暂停并注册到全局后由引擎逐帧 seek。Vue/Svelte 宿主则是 agent 对外提供组件化 web 动画服务时本技能派上用场的场景。因此推荐的工作方式与 gsap-react 对齐能用框架原生/Remotion 原语解决的简单动画不引入 GSAP一旦需要 GSAP就严格按本技能的生命周期规范落地。参考资料本技能原文.agents/skills/gsap-frameworks/SKILL.mdGSAP 技能包导航与仓库定位.agents/skills/gsap/README.mdReact 场景对照技能.agents/skills/gsap-react/SKILL.md核心 API 与参数参考.agents/skills/gsap-core/SKILL.md滚动驱动动画技能.agents/skills/gsap-scrolltrigger/SKILL.md动画运行时调度元技能skills/meta/animation-runtime-selector.md技能指针契约测试tests/contracts/test_agent_skill_pointers.py【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考