用途:为不同框架提供 GSAP 的生产级安装与配置配方。流程为 gsap-setup → gsap-animate → gsap-optimise → gsap-test,会从 nuxt.config、next.config、package.json 等项目文件识别框架并选择对应章节。核心 API 与默认值需调用 gsap-core,框架生命周期与清理需调用 gsap-frameworks;本技能只覆盖 setup,并要求 greensock/gsap-skills。
主要能力:按官方 gsap-core 安装 GSAP 后配置框架插件。Nuxt 3 在 plugins/gsap.js 中通过 defineNuxtPlugin 注册 ScrollTrigger 并 provide,用 useNuxtApp() 取 $gsap 与 $ScrollTrigger。Vue 3(Vite)在 src/main.js 注册插件并用 app.provide('gsap', gsap),可 inject 或直接 import。React(Vite/CRA)配合 @gsap/react 的 useGSAP,用 containerRef 与 scope 限定选择器。Next.js(App Router)在 lib/gsap.js 加 'use client' 并导出 gsap、ScrollTrigger、useGSAP。
配置:可用 gsap.defaults({ overwrite: 'auto' }) 与 gsap.ticker.lagSmoothing(500, 33);overwrite: 'auto' 只清除同目标上冲突属性,lagSmoothing 限制掉帧补偿避免跳变。gsap.registerEffect 可注册可复用动画(如 reveal),支持 defaults 与 extendTimeline,用法 gsap.effects.reveal('.cards') 或 tl.reveal('.cards', {}, '-=0.2')。
用法与限制:GSAP 动画元素应先用 CSS 预隐藏(如 visibility: hidden)以避免 CLS,autoAlpha 运行时会设为 visible。无障碍方面提供 Vue/Nuxt 组合式函数与 React hook 读取 prefers-reduced-motion,动画需随偏好变化自动回退时优先用 gsap.matchMedia()。资料未提供具体安装命令版本、价格与性能数据。