GSAP Skills — официальные AI-навыки для анимационной платформы GreenSock

· 2 мин чтения
gsap animation skills ai-agents frontend
📂 Исходный код на GitHub

Официальные AI-навыки для GSAP (GreenSock Animation Platform). Обучают AI-агентов корректному использованию GSAP: core API, таймлайны, ScrollTrigger, плагины, React/Vue/Svelte, производительность. Формат Agent Skills, поддержка Claude Code, Cursor, Copilot и 40+ агентов.

GSAP Skills — официальные AI-навыки для анимационной платформы GreenSock

GSAP (GreenSock Animation Platform) — одна из самых популярных JavaScript-библиотек для создания анимаций. После приобретения компанией Webflow GSAP стал полностью бесплатным, включая все ранее платные плагины (SplitText, MorphSVG и другие). Репозиторий GSAP Skills — это официальный набор AI-навыков, который учит AI-агентов правильно работать с GSAP: от базового API до продвинутых техник производительности.

12 тысяч звёзд на GitHub, 700+ форков. Поддержка Claude Code, Cursor, Copilot, OpenCode, Windsurf, Codex, Google Antigravity и 40+ других агентов через формат Agent Skills.

Почему это важно

AI-агенты по умолчанию не знают актуального API GSAP. Они генерируют код с gsap.to(el, {left: 100}) вместо x: 100, игнорируют ScrollTrigger.refresh(), не чистят анимации в React. GSAP Skills даёт агенту структурированные знания — не общие советы, а конкретные паттерны, антипаттерны и триггерные слова, при которых навык активируется автоматически.

Восемь навыков

Каждый навык — отдельный SKILL.md-файл, который агент загружает при обнаружении триггерных фраз (например, «scroll animation», «stagger», «animate on scroll»).

Навык Назначение
gsap-core Базовый API: gsap.to() / from() / fromTo(), easing, duration, stagger, defaults
gsap-timeline Таймлайны: секвенсирование, position-параметр, метки, вложенность, управление воспроизведением
gsap-scrolltrigger ScrollTrigger: скролл-анимации, pinning, scrub, триггеры, refresh() и очистка
gsap-plugins Плагины: ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG и физические плагины, CustomEase, EasePack, GSDevTools
gsap-utils gsap.utils: clamp, mapRange, normalize, interpolate, random, snap, toArray, selector, wrap, pipe и другие хелперы
gsap-react React: хук useGSAP, refs, gsap.context(), очистка при размонтировании, SSR
gsap-performance Производительность: transform вместо layout-свойств, will-change, батчинг, советы по ScrollTrigger
gsap-frameworks Vue, Svelte и другие: жизненный цикл, скоуп селекторов, очистка при размонтировании

Быстрый референс для AI-агентов

Канонический паттерн GSAP, который навыки учат генерировать:

// 1. Импорты и регистрация плагинов (один раз на приложение)
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

// 2. Одиночный tween — предпочитать transform-алиасы и autoAlpha
gsap.to(".box", { x: 100, autoAlpha: 1, duration: 0.6, ease: "power2.inOut" });

// 3. Timeline для секвенсирования (вместо цепочек delay)
const tl = gsap.timeline({ defaults: { duration: 0.5, ease: "power2" } });
tl.to(".a", { x: 100 })
  .to(".b", { y: 50 }, "+=0.2")
  .to(".c", { opacity: 0 }, "-=0.1");

// 4. ScrollTrigger — прикреплять к timeline или tween верхнего уровня
const tl2 = gsap.timeline({
  scrollTrigger: {
    trigger: ".section",
    start: "top center",
    end: "bottom center",
    scrub: true
  }
});
tl2.to(".panel", { x: 100 })
   .to(".panel", { rotation: 5, duration: 0.7 });
// После изменений DOM/лейаута: ScrollTrigger.refresh();

// 5. React: useGSAP + scope + очистка
// import { useGSAP } from S15;
// useGSAP(() => { gsap.to(ref.current, { x: 100 }); }, { scope: containerRef });

Установка

npx skills (рекомендуемый способ)

Работает с Cursor, Claude Code, Codex, Windsurf, Copilot, Google Antigravity и 40+ агентами:

npx skills add https://github.com/greensock/gsap-skills

CLI автоматически определяет установленного агента. Для явного указания:

npx skills add https://github.com/greensock/gsap-skills --agent antigravity

Claude Code

В Claude Code используется маркетплейс: /plugin marketplace add greensock/gsap-skills. Подробнее в документации Agent Skills.

Cursor

Settings → Rules → Add Rule → Remote Rule (Github), указать greensock/gsap-skills. Либо через npx skills add.

Ручное копирование

Склонировать репозиторий и скопировать папку skills/ в директорию навыков агента:

Агент Директория навыков Документация
Claude Code ~/.claude/skills/ docs
Cursor ~/.cursor/skills/ docs
OpenCode ~/.config/opencode/skills/ docs
OpenAI Codex ~/.codex/skills/ docs
Google Antigravity ~/.gemini/antigravity/skills/ или .agent/skills/ docs
Pi ~/.pi/agent/skills/ docs

GitHub Copilot

Copilot не загружает Cursor/Claude skill-файлы. Для получения рекомендаций GSAP в репозитории нужно скопировать или адаптировать .github/copilot-instructions.md (и опционально файлы из .github/instructions/). Подробнее в документации GitHub Copilot customization.

GSAP теперь полностью бесплатен

Важное изменение: после приобретения GSAP компанией Webflow все ранее эксклюзивные для Club GSAP плагины (SplitText, MorphSVG и другие) стали бесплатными для всех, включая коммерческое использование. Установка через публичный npm-пакет gsap — без Club-членства, .npmrc, токенов авторизации и приватного реестра.

Структура репозитория

gsap-skills/
  README.md
  AGENTS.md
  CLAUDE.md
  GEMINI.md
  .github/
    copilot-instructions.md
    instructions/
  .claude-plugin/
  .cursor-plugin/
  assets/
  skills/
    llms.txt
    gsap-core/       SKILL.md
    gsap-timeline/   SKILL.md
    gsap-scrolltrigger/ SKILL.md
    gsap-plugins/    SKILL.md
    gsap-utils/      SKILL.md
    gsap-react/      SKILL.md
    gsap-performance/  SKILL.md
    gsap-frameworks/ SKILL.md
  examples/

Уровень риска

НИЗКИЙ — GSAP это анимационная библиотека с минимальной поверхностью безопасности. Лицензия MIT.

Источник: https://github.com/greensock/gsap-skills

Похожие материалы