用途:帮助在 React 项目中使用 GSAP 实现组件动画,重点是用 useGSAP() 钩子管理动画的生命周期、作用域与清理,替代手动使用 useEffect。
主要能力:useGSAP() 可自动清理动画与时间线;通过 scope 限定选择器作用范围,避免全局冲突;支持 dependencies 依赖数组,在数据变化时重跑动画;集成 ScrollTrigger 实现滚动触发、固定(pin)等效果;配合 gsap.matchMedia() 做响应式动画;提供 contextSafe 用于事件回调中安全创建动画;支持 Flip、SplitText 等插件;能处理 React 18 Strict Mode 的双重挂载。
使用方式:先安装 npm install gsap @gsap/react。导入 gsap、useGSAP 及所需插件,并执行 gsap.registerPlugin(ScrollTrigger, useGSAP)。在组件中用 useRef 创建容器引用,调用 useGSAP(() => { gsap.to('.box', { x: 200, duration: 1 }) }, { scope: container })。可用 dependencies 指定重跑条件,用 contextSafe 包装事件回调,用 matchMedia 添加媒体查询分支并返回 () => mm.revert()。滚动场景在补丁中写 scrollTrigger 配置,动态 DOM 变化后调用 ScrollTrigger.refresh()。
适用场景:React 组件进入/离开动画、列表与数据更新动画、滚动驱动动画、钉住区块、响应式动画、文字拆分动画及列表重排 Flip 动画。
限制与注意:未提供示例外的具体版本、收费、性能数据或浏览器兼容信息,暂未提供。未加 scope 的全局选择器可能影响其他组件;依赖数组缺失会导致数据变化时动画不更新;手动用 useEffect 易造成内存泄漏与残留动画;某些高级用法需注册对应插件并按资料中的清理方式释放,如 split.revert() 或 mm.revert()。