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

GSAP Performance Skill.

Skill для Claude Code и Codex для анимации и видео: производительность GSAP: transforms, предотвращение layout thrash, will-change, пакетирование.

  • Анимация и видео
  • UI-код
Скачать OpenDesignИнструкция по использованию
greensock/gsap-skills · skills/gsap-performance/SKILL.mdSKILL.md
--- name: gsap-performance description: Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps. --- ## When to Use This Skill ## Prefer Transform and Opacity ## will-change ## Batch Reads and Writes ## Many Elements (Stagger, Lists) ## Frequently updated properties (e.g. mouse followers)
Метаданные и заголовки разделов считаны из исходного файла 2026-09-14 · 4 105 символов в полной версии

01 Что делает

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

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

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

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

Официальные рекомендации GSAP по поддержанию плавных 60 fps за счёт выбора «дешёвых» свойств и избегания работы с layout. В них сказано анимировать transform-свойства (x, y, scaleX, scaleY, rotation, rotationX, rotationY, skewX, skewY) и opacity вместо width, height, top, left, margin или padding, указывать will-change в CSS только для элементов, которые действительно анимируются, и выполнять все чтения DOM до записей, чтобы не вызывать layout thrashing.

Рекомендации по батчингу охватывают stagger вместо ручных задержек в твинах, виртуализацию для длинных списков, gsap.quickTo() для эффектов следования за курсором, настройку pin и scrub с дебаунсингом ScrollTrigger.refresh(), а также остановку твинов за пределами экрана. Это предназначено для дизайнеров и разработчиков, настраивающих уже существующие анимации GSAP, а не создающих их с нуля.

Что он выдаёт

  • Объявление will-change, которое нужно добавить в CSS анимируемого элемента.
  • Настройка gsap.quickTo() для x и y, управляемая слушателем mousemove на контейнере.
Смотрите пример запроса ↗

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

  1. 01
    Анимируйте свойства, совместимые с компоситором

    Ограничьте анимацию transform-свойствами и opacity, которые оставляют работу на компоситоре, не вызывая layout и paint.

  2. 02
    Позвольте GSAP батчить записи

    GSAP уже внутренне батчит обновления, поэтому риск заключается в том, что ваш собственный код DOM чередует чтения и записи вокруг этого механизма.

  3. 03
    Используйте один твин для «горячих» значений

    Для свойств, обновляемых при каждом движении указателя, gsap.quickTo() сохраняет один активный твин вместо выделения нового при каждом обновлении.

  4. 04
    Укротите работу, связанную со скроллом

    Небольшое значение scrub, например scrub: 1, может снизить объём работы во время скролла, но в файле сказано проверять эту настройку на слабых устройствах.

  5. 05
    Останавливайте анимацию, которую не видно

    Приостанавливайте или останавливайте анимации за пределами экрана и неактивные анимации, например когда пользователь уходит с раздела.

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

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

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

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

  • Существующая анимация GSAP пропускает кадры, и вы хотите снизить затраты на layout и paint.
  • Кто-то спрашивает про рывки, FPS или лучшие практики быстрой анимации в проекте на GSAP.
  • Вы анимируете длинный список и нуждаетесь в советах по виртуализации и избеганию сотен одновременных твинов.
  • Раздел со скроллом закрепляет элемент, и вам нужно ограничить то, что получает промоушен.

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

  • Установка will-change или force3D на всё «на всякий случай» явно неверна; они предназначены для элементов, которые действительно анимируются.
  • Сотни перекрывающихся твинов или ScrollTrigger считаются антипаттерном, если они не были проверены на слабых устройствах.

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

  • Свойства, которые сейчас изменяет ваша анимацияВам нужно знать, что анимируется, чтобы оценить, можно ли заменить затратные для layout свойства на transform и opacity.

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

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

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

  1. Избегайте свойств, вызывающих layout

    width, height, top, left, margin и padding вызывают layout и могут привести к дёрганью (jank), поэтому избегайте их, когда тот же эффект достигается через transform.

  2. Двигайте через X и Y, а не через Left и Top

    x и y в GSAP по умолчанию являются transform (translate), поэтому используйте их для перемещения вместо left или top.

  3. will-change только там, где что-то анимируется

    Задавайте will-change в CSS на элементах, которые будут анимироваться; это подсказывает браузеру продвинуть слой, поэтому применять его нужно только к анимируемым элементам.

  4. Stagger вместо ручных задержек

    Когда анимация одинакова для всех элементов, используйте stagger, а не множество отдельных tween'ов с вручную заданными задержками.

  5. Никогда не создавайте таймлайны на каждый кадр

    Переиспользуйте таймлайны; создание новых таймлайнов на каждый кадр называется расточительным.

  6. Обновляйте ScrollTrigger только при реальных изменениях layout

    Вызывайте ScrollTrigger.refresh() когда layout действительно меняется, например после загрузки контента, а не при каждом resize, и по возможности используйте debounce.

  7. Убирайте за собой то, что запустили

    Очищайте или останавливайте анимации за пределами экрана и обновляйте ScrollTrigger при изменении layout, с debounce где возможно, чтобы ничто не продолжало работать без необходимости.

04 Применение

Установите gsap-performance в Claude Code или Codex

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

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

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

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

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

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

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

Starter prompt
Here is my [product landing page] with a GSAP intro and a pinned ScrollTrigger section, and it drops frames on an [older Android phone]. Go through the animation and tell me which properties I should swap for transforms, which elements genuinely need will-change, and whether my ScrollTrigger.refresh() calls fire more often than the layout actually changes. I also have a [custom cursor] that follows the pointer and feels heavy.

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

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

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

  • Ищите чередующиеся чтения и записи в DOM, так как это вызывает повторный layout thrashing; все чтения должны идти первыми.
  • Убедитесь, что ничего не осталось запущенным: незавершённые tween'ы и ScrollTrigger продолжают работать и вредят производительности и корректности.
  • Убедитесь, что анимируемые свойства остаются transform и opacity, чтобы браузер выполнял только композитинг.

В OpenDesign gsap-performance включён по умолчанию: Plugins → Skills, выберите его в верхней панели.

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

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

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

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

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

Внутри SKILL.md

  1. Когда использовать этот skillПрименяйте при оптимизации анимаций GSAP для 60fps или устранения дёрганья; указывает на связанные skills.
  2. Предпочитайте Transform и OpacityАнимируйте свойства transform и opacity; избегайте свойств layout; x и y вместо left и top.
  3. will-changeДобавляйте will-change в CSS на элементы, которые будут анимироваться, чтобы подсказать продвижение слоя.
  4. Группируйте чтения и записиGSAP группирует записи; выполняйте все чтения DOM перед записями, чтобы избежать thrashing.
  5. Много элементов (Stagger, списки)Stagger лучше ручных задержек; виртуализируйте длинные списки; переиспользуйте таймлайны вместо создания новых.
  6. Часто обновляемые свойства (например, следование за курсором)Используйте gsap.quickTo с обработчиком mousemove для часто обновляемых значений x и y.
  7. ScrollTrigger и производительностьЗакрепляйте (pin) только то, что необходимо, используйте небольшое значение scrub, обновляйте (refresh) только при изменении разметки.
  8. Сократите объём одновременной работыПриостанавливайте или отключайте анимации за пределами экрана; упрощайте или выстраивайте в последовательность тяжёлую анимацию свойств.
  9. Лучшие практикиЧек-лист из четырёх пунктов: transform и opacity, точечное (scoped) will-change, stagger, очистка и обновление.
  10. Не делайте этогоАнтипаттерны: свойства layout для движения, повсеместное will-change или force3D, непроверенный объём, игнорирование очистки.
Собственное описание skill
«Официальный навык GSAP для производительности — предпочитайте transforms, избегайте layout thrashing, will-change, группировка. Используйте при оптимизации GSAP-анимаций, уменьшении рывков или когда пользователь спрашивает о производительности анимации, FPS или плавных 60fps.»

Описание из front-matter SKILL.md. Полный файл составляет около 4 105 символов. Читайте полный файл на GitHub.

06 Перед установкой

Вопросы о skill gsap-performance

Ответы взяты из SKILL.md в редакции от 2026-09-14, а не из записанного запуска.

Использовать этот skill вместо gsap-core?

Нет. Этот skill — слой производительности над обычной работой с GSAP: анимации строятся с помощью gsap-core (transform, autoAlpha) и gsap-timeline, а детали производительности ScrollTrigger описаны в gsap-scrolltrigger.

Как сделать курсор-следователь (mouse follower)?

Используйте gsap.quickTo() для значений x и y с заданной длительностью и ease, затем вызывайте возвращённые функции из слушателя mousemove. Это повторно использует один tween вместо создания нового при каждом обновлении.

GSAP Performance

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

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

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