Словами самого skill
Официальный skill GSAP для анимации в React и React-based фреймворках, таких как Next.js. Он продвигает хук useGSAP() из @gsap/react вместо useEffect() или useLayoutEffect(), зарегистрированный через gsap.registerPlugin, и требует scope, чтобы селекторы вроде .box совпадали только с элементами внутри компонента.
Он охватывает refs как цели, необязательный второй аргумент хука (массив зависимостей или объект конфигурации dependencies/scope/revertOnUpdate), contextSafe для анимаций, создаваемых в обработчиках указателя после запуска хука, и запасной вариант gsap.context() плюс ctx.revert() для обычного useEffect. Также указано правило SSR: GSAP работает в браузере, поэтому ничего не должно выполняться при серверном рендере.
Что он выдаёт
- Блок useGSAP, чьи анимации и ScrollTrigger автоматически откатываются при размонтировании
- Тело useEffect, которое возвращает cleanup, вызывающий ctx.revert()
- Обработчик клика, обёрнутый в contextSafe, с удалением обработчика события в возвращаемом cleanup
- Выполнение только на клиенте, с динамическим импортом внутри useEffect как опцией для tree-shaking или размера бандла
Как это работает
- 01Установите Gsap и @gsap/react
В блоке установки перечислены два пакета: библиотека GSAP, затем пакет GSAP React, предоставляющий хук.
- 02Зарегистрируйте useGSAP перед любым кодом GSAP
Хук регистрируется как плагин, и в файле указано, что эта регистрация должна произойти до запуска useGSAP или любого другого кода GSAP.
- 03Пишите анимацию внутри useGSAP с указанием scope
Селекторы ограничены корнем компонента путём передачи ref или элемента в качестве scope.
- 04Оборачивайте пост-рендер callback-и в contextSafe
Анимации, создаваемые позже, например в обработчиках событий указателя, находятся вне контекста, поэтому они оборачиваются в contextSafe, взятый из возвращаемого значения хука.
- 05Запасной вариант: gsap.context() плюс ctx.revert()
Когда useGSAP недоступен, тот же паттерн выполняется внутри useEffect, с cleanup, который всегда вызывает ctx.revert().
- 06Держите весь код GSAP на клиенте
useGSAP или useEffect — это то, что не даёт коду выполняться при серверном рендере; динамический импорт внутри useEffect предлагается как опция, когда важен размер бандла.