SuperAPI AI 工具集

gsap-react

前端与建站

查看项目

更新于 10-16 00:30

技能介绍

用途:在 React 项目中使用 GSAP 编写组件动画,并通过 @gsap/react 提供的 useGSAP() Hook 自动处理清理、作用域选择器与生命周期管理,避免手动 useEffect 清理导致的内存泄漏或僵尸动画。

主要能力:useGSAP 支持 scope(把选择器限定在容器内)、dependencies(数据变化时重跑动画)、自动清理(卸载时回收动画与时间线);可与 ScrollTrigger 联动实现滚动动画与 pin 固定;配合 contextSafe 处理事件回调;使用 gsap.matchMedia() 做响应式动画;支持 Flip、SplitText 等插件,并在 React 18 Strict Mode 双挂载下正确清理。

使用方式:先安装 npm install gsap @gsap/react;注册 import { useGSAP } from '@gsap/react' 并 gsap.registerPlugin(useGSAP)(用到 ScrollTrigger 等插件时一并注册)。在组件中用 gsap.to 等 API 编写动画,选择器默认作用于 scope 容器,动态内容需在 dependencies 中传入数据。事件回调建议用 contextSafe 包裹;滚动动画在数据变化后可调用 ScrollTrigger.refresh()。

适用场景:React 组件入场/出场动画、列表 stagger 动画、模态框过渡、受控时间线、可拖拽列表的 Flip 过渡、文字拆分动画、响应式与无限滚动场景。

限制:资料未提供收费、价格、平台支持范围与效果指标等事实;未提供具体版本要求与浏览器兼容信息。注意未设置 scope 时会全局匹配选择器,可能影响其他组件;遗漏 dependencies 会导致数据变化后动画不更新。