SuperAPI AI 工具集

gsap-setup

前端与建站

查看项目

更新于 10-15 22:38

技能介绍

用途:为不同框架提供 GSAP 的安装与配置配方,流程为 gsap-setup → gsap-animate → gsap-optimise → gsap-test。会从项目文件(nuxt.config、next.config、package.json)检测框架并套用对应部分。核心 API 与默认值参考 gsap-core,框架生命周期与清理参考 gsap-frameworks,本技能只覆盖配置。需要 greensock/gsap-skills。

主要能力:按官方 gsap-core 技能安装 GSAP 后配置各框架插件。Nuxt 3 通过 plugins/gsap.js 定义 defineNuxtPlugin,注册 ScrollTrigger 并以 provide 注入,使用 const { $gsap: gsap, $ScrollTrigger: ScrollTrigger } = useNuxtApp() 访问。Vue 3(Vite)在 src/main.js 注册插件并 app.provide('gsap', gsap)。React 使用 @gsap/react 的 useGSAP,配合 useRef 与 scope。Next.js(App Router)在 lib/gsap.js 标注 'use client' 并导出 gsap、ScrollTrigger、useGSAP。

全局默认:gsap.defaults({ overwrite: 'auto' });gsap.ticker.lagSmoothing(500, 33),限制卡顿补偿避免跳变。registerEffect 可注册可复用动画(如 reveal),defaults 含 duration、ease、stagger,extendTimeline 支持时间线调用。CSS 预隐藏:被 GSAP 动画的元素应先设 visibility: hidden,防止 CLS,autoAlpha 运行时会设为可见。无障碍:提供 Vue/Nuxt composable 与 React hook 的 useReducedMotion,读取 prefers-reduced-motion;需自动还原时优先用 gsap.matchMedia()。参考文件 references/full-plugin-example.md 含 Nuxt 插件完整示例。

限制:具体安装命令与详细版本要求以 gsap-core 技能为准,此处未提供;完整长代码见参考文件。