GSAP 动画工具包
React动画GSAPMotion用户体验更新于 2026-08-14
使用场景： 构建需要高性能动画的界面——英雄区出场、悬停效果、进度指示器，或需要精确时序控制的 UI 微动画。
安装
npx skills add gsap-animation-toolkit克隆
git clone https://github.com/skillhub-community/gsap-animation-toolkit.git描述
一套全面的 GSAP 动画工具包，覆盖核心 API：gsap.to()/from()/fromTo() 补间、带 position 参数的 gsap.timeline() 序列、缓动预设与自定义 cubic-bezier、列表与网格的 stagger 动画，以及用 gsap.defaults() 建立一致的动画基线。包含生产级实践：组件卸载清理、尊重减少动态偏好，以及只动画 transform 与 opacity 来避免布局抖动。
附带插件注册表，覆盖 ScrollToPlugin、Flip（FLIP 技术做布局动画）、Draggable、Observer 与 CSSRulePlugin。每个插件都配有可直接使用的 React 示例组件。性能指引：优先 transform/opacity 动画，用 gsap.matchMedia() 实现响应式动画行为，批量读写 DOM 以在低端设备上也保持 60fps。
AI Hub
跑 Skill 需要模型接口？
AI Hub 提供 OpenAI 兼容接口，给 Cursor / Claude Code / Agent 用。
打开 AI Hub元数据
作者@motion_kevin
许可证MIT
版本1.0.0
依赖0