以 skill 自身的术语
这是官方的 GSAP skill，用于在 React 及基于 React 的框架（如 Next.js）中实现动画。它推荐使用 @gsap/react 提供的 useGSAP() 钩子，而不是 useEffect() 或 useLayoutEffect()，需要通过 gsap.registerPlugin 注册，并且要求提供一个 scope，使 .box 这类选择器只匹配组件内部的元素。
它涵盖了以 ref 作为目标、钩子可选的第二个参数（依赖数组，或是包含 dependencies/scope/revertOnUpdate 的配置对象）、用于钩子执行后在指针事件处理函数中创建动画的 contextSafe，以及针对普通 useEffect 的 gsap.context() 加 ctx.revert() 兜底方案。文件还说明了 SSR 规则：GSAP 只在浏览器中运行，因此服务端渲染期间不能执行任何相关代码。
它产出什么
- 一个 useGSAP 代码块，其中的动画和 ScrollTrigger 会在组件卸载时自动还原
- 一个 useEffect 函数体，返回的清理函数中调用了 ctx.revert()
- 一个用 contextSafe 包裹的点击处理函数，其事件监听器会在返回的清理函数中被移除
- 仅在客户端执行，可选地在 useEffect 内部使用动态导入以实现 tree-shaking 或减小包体积
工作方式
- 01安装 Gsap 和 @gsap/react
安装代码块中列出了两个包：GSAP 库本身，以及提供该钩子的 GSAP React 包。
- 02在任何 GSAP 代码之前注册 useGSAP
该钩子以插件形式注册，文件说明这一注册必须在运行 useGSAP 或任何其他 GSAP 代码之前完成。
- 03在 useGSAP 内部编写带 scope 的动画
通过传入一个 ref 或元素作为 scope，将选择器限制在组件根节点范围内。
- 04用 contextSafe 包裹渲染后触发的回调
之后创建的动画，例如在指针事件处理函数中创建的动画，位于 context 之外，因此需要用钩子返回值中的 contextSafe 进行包裹。
- 05兜底方案：使用 gsap.context() 加 ctx.revert()
当 useGSAP 不可用时，同样的模式可以在 useEffect 中运行，清理函数中始终调用 ctx.revert()。
- 06让所有 GSAP 代码只在客户端运行
useGSAP 或 useEffect 用来确保代码不会在服务端渲染时执行；当包体积成为问题时，可以选择在 useEffect 内部使用动态导入。