GSAP React Integration 是面向 React 的 GSAP 动画集成参考，整理了在 React 组件中使用 GSAP 时的常见模式与最佳实践。
用途 用于在 React 应用中实现 GSAP 动画，包括入场动画、交互式动效、时间线控制与基于滚动的动画。文档强调 React 特有问题的处理：hook 用法、ref 引用、组件卸载时的清理以及作用域隔离。
安装与快速开始 安装命令为：npm install gsap @gsap/react。基本用法从 @gsap/react 引入 useGSAP、从 gsap 引入 gsap，在组件内创建 containerRef，通过 useGSAP 回调执行动画，并通过 { scope: containerRef } 将选择器查询限制在容器内。
主要能力
- useGSAP hook：基础用法、带依赖数组的用法（如 isOpen 变化时重新执行），以及返回 { context, contextSafe }。
- Ref 模式：单元素 ref、多元素 ref 数组、使用 Map 的动态 ref 列表，配合 dependencies 控制更新。
- 上下文与清理：useGSAP 在卸载时自动清理动画；不使用 useGSAP 时可手动使用 gsap.context 并在 useEffect 返回中调用 ctx.revert()；支持传入 containerRef 的 scoped context。
- 事件处理：用 contextSafe 包装事件回调；也给出 useCallback 加 tweenRef 并在卸载时 kill 的替代方案。
- 时间线管理：timeline ref 模式，支持 play、reverse、restart；受控时间线通过 useEffect 在 progress 属性变化时更新 tl.current.progress(progress)。
- ScrollTrigger：需 gsap.registerPlugin(ScrollTrigger)；给出基础滚动触发配置（trigger、start、toggleActions）以及手动创建 ScrollTrigger 后返回清理函数逐个 kill 的方式。
- 自定义 hooks：useAnimation、useFadeIn、useHoverAnimation 示例。
- 动画模式：Animated Countdown Digit（旋转 X 轴的数字翻转）与 Cosmic Pulse Effect（boxShadow 循环脉冲）。
使用方式 在组件中引入 useGSAP 与 gsap，动画逻辑写入 useGSAP 回调；需要限定选择器范围时传入 scope；需要随 props 更新时传入 dependencies；事件回调使用 contextSafe 包装；组件内的 timeline 用 useRef 保存以便外部按钮控制。
适用场景 React 项目中的 GSAP 动画开发，尤其是需要组件级作用域、卸载清理、依赖驱动更新、滚动触发动画和可交互时间线的场景。
限制与注意事项 文档给出的性能建议包括：为重动画使用 will-change、尽可能批量执行相似动画而非循环创建多个 tween、频繁动画的元素优先使用 ref 而非选择器、快速状态变化前 kill 之前的动画。参考部分指向 gsap-fundamentals、gsap-sequencing、gsap-scrolltrigger 相关主题。除上述内容外，其他信息暂未提供。