83.3K+Скачать
Перейти к руководству
gsap-pluginsавтор GreenSock

GSAP Plugins Skill.

Скилл Claude Code и Codex для анимации и видео: плагины GSAP — ScrollTo, ScrollSmoother, Flip, Draggable, SplitText, SVG и физика.

  • Анимация и видео
  • UI-код
Скачать OpenDesignИнструкция по использованию
greensock/gsap-skills · skills/gsap-plugins/SKILL.mdSKILL.md
--- name: gsap-plugins description: Official GSAP skill for GSAP plugins — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Use when the user asks about a GSAP plugin, scroll-to, flip animations, draggable, SVG drawing, or plugin registration. --- ## When to Use This Skill ## Licensing & Install (important) ## Registering Plugins ## Scroll ## DOM / UI ## Text
Метаданные и заголовки разделов прочитаны из исходного файла 2026-09-14 · 21 477 символов полностью

01 Что делает

Что делает skill gsap-plugins в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Официальный skill GSAP, охватывающий регистрацию плагинов и все плагины кроме ScrollTrigger: ScrollTo, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, DrawSVG, MorphSVG, MotionPath, CustomEase, EasePack, CustomWiggle, CustomBounce, Physics2D, PhysicsProps, PixiPlugin и GSDevTools.

Начинается с лицензирования — каждый плагин бесплатен, без членства в Club GSAP или токена авторизации — затем даёт конфигурацию по каждому плагину: vars для Flip.from, опции Draggable, vars для SplitText.create, опции morphSVG, выравнивание motionPath. Рассчитан на дизайнеров и разработчиков, устанавливающих всё из публичного npm-пакета gsap и нуждающихся в правильном порядке вызовов, значениях по умолчанию и оговорках. Связанные skill: gsap-core, gsap-scrolltrigger, gsap-react.

Что он выдаёт

  • Scroll-твин, анимирующий окно или любой элемент со скроллом к позиции или цели.
  • Экземпляр SplitText, предоставляющий chars, words, lines и, если задан mask, — masks.
  • Преобразованный элемент path, заменяющий в DOM circle, rect, ellipse или line.
Смотрите пример запроса ↗

Как это работает

  1. 01
    Регистрируйте плагины один раз, заранее

    Каждый плагин регистрируется один раз, чтобы GSAP и сборщики знали о необходимости его включить, до того как он будет использован в каком-либо твине или вызове API.

  2. 02
    Фиксируйте, изменяйте, затем анимируйте с помощью Flip

    Flip — это последовательность из трёх шагов: считать старое состояние, изменить DOM, затем анимировать от зафиксированного состояния к новому.

  3. 03
    Создавайте взаимодействия drag и throw

    Draggable.create принимает type, опциональные bounds и inertia; InertiaPlugin обеспечивает инерцию после отпускания.

  4. 04
    Разбивайте текст на анимируемые единицы

    SplitText помещает символы, слова и/или строки каждый в свой отдельный элемент, чтобы их можно было анимировать по отдельности или со stagger.

  5. 05
    Рисуйте или трансформируйте SVG

    SVG-плагины анимируют значения stroke dash для эффектов рисования либо атрибут path d для трансформации одной формы в другую.

  6. 06
    Обращайтесь к плагинам easing и physics

    Плагины easing добавляют кастомные кривые или именованные easing-функции; плагины physics управляют движением на основе значений скорости, угла и гравитации.

02 Определите своё применение

Когда использовать gsap-plugins

Используйте skill gsap-plugins в Claude Code или Codex, когда задача касается анимации и видео такого рода. Возможности и ограничения взяты из файла самого skill.

Хорошо подходит

  • Прокрутка к элементу или к позиции в пикселях, когда ScrollTrigger не задействован.
  • Анимация между двумя состояниями макета, например переупорядоченные списки, сетки или развёрнутые и свёрнутые панели.
  • Слайдеры, карточки и переупорядочиваемые списки, которым нужно поведение drag, spin или throw для мыши и касаний.
  • Раскрытие текста с анимацией по символам, словам или строкам.
  • Морфинг иконки в иконку, переходы форм и другая SVG-анимация на основе путей.

Знайте границы

  • SplitText не может разбивать элементы SVG text.
  • DrawSVG анимирует только stroke, но не fill, и не может визуально изменить содержимое элемента use.
  • Работа с ScrollTrigger относится к отдельному skill, а не к этому.
  • Текст с text-wrap: balance плохо сочетается с разбиением.

Что предоставить

  • Список плагинов для регистрацииКаждый плагин, используемый в проекте, должен быть указан в одном вызове gsap.registerPlugin, чтобы бандлеры включили его.
  • DOM-структура ScrollSmootherScrollSmoother требует ScrollTrigger плюс обёртку содержимого внутри smooth-обёртки, при этом элементы с fixed-позиционированием допускаются снаружи.
  • Цель для SplitTextSplitText.create принимает селектор, элемент или массив в качестве цели вместе с параметрами split.
  • Форма для MorphSVGОбязательное свойство shape принимает селектор, элемент или сырую строку path в качестве конечной формы морфинга.
  • Шрифты и макет уже загруженыДля кастомных шрифтов разбивайте текст после их загрузки или используйте autoSplit с onSplit, чтобы повторное разбиение происходило в нужный момент.

03 Внутри скилла

Правила, которые skill gsap-plugins задаёт Claude Code и Codex

8 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт для агента — та часть файла, которая влияет на результат.

  1. Регистрируйте до того, как анимируете

    Плагин должен быть зарегистрирован до того, как он используется в любом tween или вызове API — регистрация это первый шаг, а не исправление ошибки.

  2. Устанавливайте из публичного пакета gsap

    Всё поставляется через npm install gsap и импортируется как gsap/SplitText, gsap/MorphSVGPlugin и так далее.

  3. Никогда не создавайте .npmrc с auth-token

    Не создавайте .npmrc с auth-токеном GreenSock, не указывайте на приватный реестр npm.greensock.com и не советуйте пользователям присоединяться к Club GSAP ради плагина.

  4. Регистрируйте на верхнем уровне в React

    Регистрируйте один раз в приложении, например перед первым вызовом useGSAP — никогда внутри компонента, который перерисовывается, а сам useGSAP должен быть зарегистрирован до использования.

  5. Разбивайте только то, что анимируете

    Разделяйте только то, что нужно для производительности: например, слова и символы, если строки не используются; разбивка только по символам требует smartWrap, чтобы избежать некорректных переносов строк.

  6. Создавайте анимации autoSplit внутри onSplit

    Если autoSplit равно true, анимации должны создаваться внутри onSplit, чтобы они применялись к новым разделённым элементам, и возвращаться из onSplit, чтобы SplitText мог откатить их и синхронизировать по времени.

  7. Дайте DrawSVG что рисовать

    У элемента должен быть видимый штрих, заданный через stroke и stroke-width в CSS или как атрибуты SVG, иначе ничего не будет отрисовано.

  8. Не включайте плагины только для разработки в продакшен

    GSDevTools предназначен для отладки во время разработки и не должен поставляться в продакшене; это же правило действует для других плагинов только для разработки.

04 Применение

Использовать скилл gsap-plugins нужно в Claude Code или Codex, когда задача связана с анимацией и видео такого рода. Область применения и ограничения ниже взяты из собственного файла скилла.

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавьте gsap-plugins в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

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

Общая форма CLI skills для skills/gsap-plugins/SKILL.md; репозиторий может документировать собственный путь.

Дайте skill первую задачу по motion и видео

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

Starter prompt
I'm building a filterable gallery in [framework]. Capture the state with Flip.getState() before the filter changes the DOM, then animate with Flip.from() using duration 0.5 and ease power2.inOut. Also make each card draggable inside [container selector] with inertia true so it throws when released, and register every plugin I use up front. Split the card captions into words and chars so I can stagger them.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

  • Откатывайте экземпляры плагинов, например SplitTextInstance.revert(), при демонтировании компонентов или удалении элементов.
  • Запустите shapeIndex: "log" один раз, чтобы получить автоматически рассчитанное значение, затем вставьте это число или массив в твин.
  • Измерьте штрих с помощью DrawSVGPlugin.getLength(element) и DrawSVGPlugin.getPosition(element).
  • Настройте MotionPath визуально в MotionPathHelper, затем считывайте helper.path или helper.getProgress() в анимации.
  • Прокручивайте и переключайте анимации с помощью GSDevTools во время разработки.

В OpenDesign gsap-plugins встроен: Plugins → Skills, выберите его в верхней панели.

Скачать OpenDesignЧитать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author
GreenSock
Repository
github.com/greensock/gsap-skills Ветка main
Файл skill
skills/gsap-plugins/SKILL.md Контрольная сумма содержимого записана при верификации; коммит aed9cfd
License
MIT Из LICENSE; SKILL.md указывает «MIT».
Звёзды репозитория
15 248 Снимок GitHub от 14 сентября 2026 года для всего репозитория greensock/gsap-skills, который содержит 8 навыков в этом каталоге. Не является рейтингом или счётчиком использования gsap-plugins.
Проверено OpenDesign
2026-09-14 Исходный файл, путь, текст лицензии и количество звёзд проверены. Включён в основной OpenDesign (проверено 2026-08-28); запись живого запуска на этой странице отсутствует.

Внутри SKILL.md

  1. Когда использовать этот skillПеречисляет сценарии использования плагинов и указывает на связанные skill'ы gsap-core, gsap-scrolltrigger и gsap-react.
  2. Лицензирование и установка (важно)Указывает, что все плагины бесплатны, и запрещает советы про токены авторизации .npmrc или регистрацию в Club GSAP.
  3. Регистрация плагиновРегистрируйте плагины один раз с помощью gsap.registerPlugin до любого твина, в том числе в React.
  4. ScrollТаблица конфигурации ScrollToPlugin и структура DOM обёртки ScrollSmoother.
  5. DOM / UIЗахват состояния Flip и from-переменные, параметры Draggable, отслеживание Inertia, жесты Observer.
  6. TextТаблица переменных SplitText.create с советами и предостережениями, а также эффект глитча ScrambleText
Собственное описание skill
«Официальный GSAP навык для плагинов GSAP — регистрация, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG и физические плагины, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Используйте, когда пользователь спрашивает о плагине GSAP, прокрутке к элементу, flip-анимациях, перетаскивании, рисовании SVG или регистрации плагинов».

Описание из front-matter SKILL.md. Полный файл содержит около 21 477 символов. Прочитайте полный файл на GitHub.

GSAP Plugins

Запустите gsap-plugins на реальной задаче по анимации и видео.

Навык gsap-plugins встроен в OpenDesign. Скачайте приложение, выберите навык в Plugins → Skills, вставьте промпт выше и прочитайте план перед результатом.

Загрузить OpenDesignВсе навыки
Терминал
npx skills add https://github.com/greensock/gsap-skills --skill gsap-plugins