gsap-react · 在 React 中正确管理 GSAP 生命周期

作者提供的示例，实际效果取决于你的输入和使用工具。

输入

组件已有containerRef，内部含.item；挂载后淡入，卸载时清理。

输出

编辑示例 · 未运行

gsap.registerPlugin(useGSAP);
useGSAP(() => {
  gsap.from(".item", { opacity: 0, y: 8, duration: 0.25 });
}, { scope: containerRef });

containerRef绑定组件根节点；useGSAP负责上下文清理。

使用 ref、useGSAP 和上下文清理组织动画，减少重渲染、重复注册和卸载后的残留效果。

具体任务

管理组件动画生命周期：用作用域与清理机制防止卸载后残留动画。

处理交互回调动画：让点击等延迟执行的动画仍能被组件上下文回收。

必需材料

React组件与现有GSAP代码

挂载、更新和卸载行为

可选材料

项目React及GSAP版本

异常复现步骤

使用门槛

项目已有兼容的React、GSAP和@gsap/react依赖。

这个 Skill 额外提供的方法

把动画和组件寿命绑定，避免看似能动却在导航后泄漏或重复播放。

编辑示例（未运行）

只让当前卡片里的元素入场

任务：为React组件写一个有作用域的动画片段

输入：
组件已有containerRef，内部含.item；挂载后淡入，卸载时清理。

结果片段：
```javascript
gsap.registerPlugin(useGSAP);
useGSAP(() => {
  gsap.from(".item", { opacity: 0, y: 8, duration: 0.25 });
}, { scope: containerRef });
```

containerRef绑定组件根节点；useGSAP负责上下文清理。

以下为官方编辑构造的示例，未运行上游 Skill。片段依赖已有import与ref；未执行，需在项目内验证Strict Mode与无动画偏好。

首次任务

任务：管理组件动画生命周期。
任务重点：用作用域与清理机制防止卸载后残留动画。

必需材料：
- React组件与现有GSAP代码：[填写或粘贴我的材料；未具备则说明]
- 挂载、更新和卸载行为：[填写或粘贴我的材料；未具备则说明]

可选补充：
- 项目React及GSAP版本：[可填写，未提供不应假定存在]
- 异常复现步骤：[可填写，未提供不应假定存在]

请交付适配现有环境的代码或配置、必要说明及验证办法。仅依据这些材料处理；缺少决定结果的信息时先说明缺口，不补造事实。未执行的检查、修改或外部操作明确标为未执行。

使用前提：项目已有兼容的React、GSAP和@gsap/react依赖。
处理边界：不能用全局选择器误改其他组件；需验证重复挂载、依赖更新和减少动态效果偏好

验收要求：
1. 选择器限制在组件根内。
2. 卸载和依赖变化会清理旧动画。
3. 用户可见内容与键盘操作不依赖动画完成。

验收方法

选择器限制在组件根内

卸载和依赖变化会清理旧动画

用户可见内容与键盘操作不依赖动画完成

依赖与准备

React、gsap、@gsap/react与浏览器；Next.js需放在能使用DOM的客户端边界。

使用边界

不能用全局选择器误改其他组件

需验证重复挂载、依赖更新和减少动态效果偏好

排错

开发模式出现双重动画：检查是否使用生命周期清理及重复注册。

点击后动画无法回收：将后续回调绑定到contextSafe或显式上下文。

固定来源

https://github.com/greensock/gsap-skills/blob/aed9cfd3277740755f6bfc1155c7aa645403b760/skills/gsap-react/SKILL.md

先看看示例

输入

输出

方法说明