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

gsap

Справочник по GSAP для HyperFrames: создание анимаций через gsap.to(), from(), fromTo() с таймлайнами, easing и stagger. Полезен при написании анимаций в композициях HyperFrames для оптимизации производительности и управления воспроизведением.

HEHeyGen official Разработка ★ 56.7k

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

Навык предоставляет справочник по использованию GSAP в композициях HyperFrames, позволяя создавать анимации через методы gsap.to(), from(), fromTo() с поддержкой таймлайнов, easing и stagger. Он решает задачу оптимизации производительности и управления воспроизведением анимаций в рамках контракта HyperFrames.

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

  • Создание синхронных паузированных таймлайнов для анимации элементов композиции.
  • Управление воспроизведением анимаций через регистрацию таймлайна в window.__timelines.
  • Использование трансформ-алиасов (x, y, scale, rotation) и autoAlpha для повышения производительности.
  • Последовательная анимация нескольких элементов с помощью параметров позиции и вложенности таймлайнов.

Как работает

  1. Подключить библиотеку GSAP через CDN (версия 3.14.2).
  2. Инициализировать объект window.__timelines, если он еще не существует.
  3. Создать таймлайн gsap.timeline({ paused: true }) синхронно.
  4. Добавить анимации с помощью методов tl.from(), tl.to() или tl.fromTo(), указывая параметры easing, duration и позицию.
  5. Зарегистрировать созданный таймлайн в window.__timelines, используя ключ, равный data-composition-id корня композиции.

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

Как создать анимацию появления заголовка и масштабирования акцента в HyperFrames с помощью GSAP?
Пример кода для регистрации паузированного таймлайна GSAP в window.__timelines для композиции с id 'main'.
Как использовать трансформ-алиасы и autoAlpha для оптимизации производительности анимаций в HyperFrames?

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

  • Библиотека GSAP версии 3.14.2 (подключение через CDN).
  • Объект window.__timelines для хранения таймлайнов.
  • Атрибут data-composition-id на корне композиции.

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

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

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

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