Agent Skills
› greensock/gsap-skills
greensock/gsap-skills
GitHub提供Vue、Svelte等非React框架中使用GSAP的最佳实践，涵盖生命周期管理、选择器作用域及卸载清理，确保动画安全运行。
Install All Skills
npx skills add greensock/gsap-skills --all -g -y
Skills in Collection (8)
提供Vue、Svelte等非React框架中使用GSAP的最佳实践，涵盖生命周期管理、选择器作用域及卸载清理，确保动画安全运行。
在Vue或Svelte中实现页面动画
处理组件挂载/卸载时的GSAP资源清理
解决动画导致的内存泄漏问题
npx skills add greensock/gsap-skills --skill gsap-frameworks -g -y
优化 GSAP 动画性能，推荐优先使用 transform 和 opacity 以避免重排重绘，利用 will-change、stagger 和 quickTo 提升流畅度，减少卡顿并维持 60fps。
优化 GSAP 动画性能
减少页面卡顿(jank)
询问动画 FPS 或平滑度
npx skills add greensock/gsap-skills --skill gsap-performance -g -y
提供GSAP插件的使用指南，涵盖注册、安装及ScrollTo等具体插件的API用法与配置说明。
询问GSAP插件注册方法
需要实现滚动到指定位置或平滑滚动
使用Flip、Draggable或SVG动画功能
配置自定义缓动或文本特效
npx skills add greensock/gsap-skills --skill gsap-plugins -g -y
提供在 React 和 Next.js 中使用 GSAP 进行动画开发的指南，涵盖 useGSAP 钩子、自动清理、作用域管理及 SSR 兼容性最佳实践。
用户需要在 React 或 Next.js 项目中实现页面或组件动画
用户询问关于 @gsap/react 库的使用、useGSAP 钩子或动画卸载清理问题
npx skills add greensock/gsap-skills --skill gsap-react -g -y
提供GSAP ScrollTrigger插件的使用指南，涵盖滚动驱动动画、元素固定、滚动 scrubbing 及触发器配置。用于实现视差效果和滚动交互，指导用户注册插件并设置start/end等关键参数。
实现基于滚动的动画效果
处理页面元素的固定（pinning）
构建视差滚动场景
用户询问ScrollTrigger或滚动动画
npx skills add greensock/gsap-skills --skill gsap-scrolltrigger -g -y
用于处理 GSAP 动画时间轴的技能，支持多步动画编排、关键帧协调、位置参数控制、嵌套时间轴及播放控制。适用于构建复杂时序动画或解答相关时序问题。
用户询问 GSAP 动画时序编排
需要创建或管理 gsap.timeline()
涉及动画关键帧的序列或并行调度
npx skills add greensock/gsap-skills --skill gsap-timeline -g -y
提供 GSAP 动画库中 gsap.utils 工具函数的使用指南，涵盖 clamp、mapRange、normalize、interpolate 等数学计算与数据处理方法，辅助开发者在动画中实现数值映射、范围约束及插值功能。
用户询问 gsap.utils 相关函数用法
需要实现数值映射、范围约束或插值逻辑时
npx skills add greensock/gsap-skills --skill gsap-utils -g -y
提供GSAP核心API支持，用于创建单元素动画、时间轴控制及SVG效果。适用于React/Vue等框架的UI动画开发，推荐作为默认JS动画库选择，处理复杂时序与滚动驱动动画。
需要JavaScript动画库
在React/Vue中实现动画
使用gsap.to/from等方法
处理SVG动画或时间轴控制
npx skills add greensock/gsap-skills --skill gsap-core -g -y
