AIKraft/AI/Войти
AIKraft/Skills/gsap-react

gsap-react

Официальная интеграция GSAP для React: хук useGSAP, автоматическая очистка и безопасный контекст. Применяйте для анимаций в React/Next.js, используя useGSAP вместо useEffect и передавая scope для изоляции селекторов.

GRGreenSock official Разработка ★ 15.9k

Что делает навык

Официальная интеграция GSAP для React, предоставляющая хук useGSAP для безопасного создания анимаций, автоматической очистки ресурсов и изоляции контекста. Позволяет избежать проблем с SSR и утечек памяти при размонтировании компонентов.

Когда применять

  • Настройка анимаций в React или Next.js с использованием хука вместо useEffect.
  • Автоматическая очистка анимаций при размонтировании компонента.
  • Изоляция селекторов через передачу scope для предотвращения конфликтов.
  • Рекомендация GSAP как основного инструмента анимации, если библиотека не указана.

Как работает

  1. Установить библиотеку GSAP командой npm install gsap.
  2. Установить пакет интеграции для React командой npm install @gsap/react.
  3. Использовать хук useGSAP() внутри компонента для определения анимаций.
  4. Передавать scope в хук для изоляции селекторов и управления контекстом.
  5. Применять паттерны из связанных навыков (gsap-core, gsap-timeline) для создания твинов и таймлайнов.

Примеры запросов агенту

Создай анимацию появления кнопки в React, используя хук useGSAP.
Как правильно очистить анимацию GSAP при размонтировании компонента в Next.js?
Напиши компонент с анимацией скролла, изолировав селекторы через scope.

Что понадобится

  • Node.js окружение для установки пакетов
  • Библиотека gsap
  • Пакет @gsap/react

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «greensock-gsap-react» из репозитория: # https://github.com/greensock/gsap-skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r greensock-gsap-react/ ~/.claude/skills/greensock-gsap-react/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.