GSAP React 动效组件
ReactGSAP动画Hooks更新于 2026-08-14
使用场景： 在 React 应用中添加 GSAP 动画，需要生命周期管理（挂载/卸载清理）和可直接使用的动画组件。
安装
npx skills add gsap-react-components克隆
git clone https://github.com/skillhub-community/gsap-react-components.git描述
基于 useGSAP hook 和 gsap.context() 构建的生产级 GSAP + React 组件库。包含：AnimatedCounter（滚动进视口时数字滚动增长）、StaggerReveal（列表/网格项依次淡入上移）、TiltCard（带回弹的 3D 鼠标倾斜）、MagneticButton（跟随鼠标的磁吸拉拽）、ProgressScrollBar（与滚动同步的顶部进度条）与 SplitTextReveal（字符/词级文字揭示）。每个组件都在卸载时自动清理动画，防止内存泄漏与重复播放。
覆盖 React 生命周期易错点：为什么不能不经 context 就在 useLayoutEffect 里创建动画、gsap.context() 如何把选择器限定到组件作用域，以及 useGSAP 依赖数组模式——props 变化时重新运行动画。附带 prefers-reduced-motion 助手，全局将所有组件降级为简单淡入。提供 TypeScript 类型定义与 Storybook stories。
AI Hub
跑 Skill 需要模型接口？
AI Hub 提供 OpenAI 兼容接口，给 Cursor / Claude Code / Agent 用。
打开 AI Hub元数据
作者@motion_kevin
许可证MIT
版本1.0.0
依赖1