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

GSAP Timeline Skill.

Скилл Claude Code и Codex для анимации и видео: таймлайны GSAP — параметр position, вложенность и управление воспроизведением.

  • Анимация и видео
  • UI-код
Скачать OpenDesignИнструкция по использованию
greensock/gsap-skills · skills/gsap-timeline/SKILL.mdSKILL.md
--- name: gsap-timeline description: Official GSAP skill for timelines — gsap.timeline(), position parameter, nesting, playback. Use when sequencing animations, choreographing keyframes, or when the user asks about animation sequencing, timelines, or animation order (in GSAP or when recommending a library that supports timelines). --- ## When to Use This Skill ## Creating a Timeline ## Position Parameter ## Timeline Defaults ## Timeline Options (constructor) ## Labels
Метаданные и заголовки разделов прочитаны из исходного файла 2026-09-14 · 4 338 символов полностью

01 Что делает

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

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

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

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

Официальный skill GSAP для последовательного построения анимаций с помощью gsap.timeline(). Он охватывает создание таймлайна и цепочку твинов, которые по умолчанию добавляются друг за другом, а затем их перепозиционирование с помощью параметра position — абсолютные секунды, относительные смещения "+=0.5"/"-=0.2", метки (labels) и позиционирование "<"/">".

В нём описаны опции конструктора таймлайна (paused, repeat, yoyo, onComplete/onStart/onUpdate, defaults), расстановка меток с помощью addLabel() и переход по времени с play()/tweenFromTo(), вложение дочерних таймлайнов в мастер-таймлайн, а также методы воспроизведения, включая restart, time, progress и kill. В конце — лучшие практики GSAP и ловушки, которые нужно избегать, в частности цепочка с delay и размещение ScrollTrigger на твинах внутри таймлайна.

Что он выдаёт

  • Объект таймлайна, хранящийся в переменной, — tl в каждом примере, — к которому добавляются связанные твины и над которым выполняются методы воспроизведения.
  • Новый Tween, возвращаемый tweenFromTo, который анимирует плейхед между двумя метками, пока таймлайн на паузе, без ease.
  • Убитый (killed) таймлайн: вызов kill() удаляет таймлайн и по умолчанию также его дочерние элементы.
Смотрите пример запроса ↗

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

  1. 01
    Создание таймлайна и цепочка твинов

    Вызовите gsap.timeline() и свяжите вызовы .to() в цепочку. Если position не задан, каждый твин добавляется после завершения предыдущего, так что порядок соответствует порядку написания.

  2. 02
    Разместите каждый твин во времени

    Позиционирование задаётся третьим аргументом или свойством position в vars: абсолютные секунды, относительные смещения, названия меток, либо < и > относительно последней добавленной анимации.

  3. 03
    Задайте общие настройки по умолчанию для таймлайна

    Настройки по умолчанию, переданные в конструктор таймлайна, объединяются с настройками каждого дочернего твина, поэтому duration и ease объявляются один раз для всей последовательности.

  4. 04
    Отметка ключевых моментов

    addLabel() отмечает именованную точку на таймлайне, и эта метка затем может использоваться как позиционная цель для последующих твинов вместо обычного числа.

  5. 05
    Вложение таймлайнов в мастер-таймлайн

    Мастер-таймлайн может принимать дочерний таймлайн как единицу и размещать его в определённый момент времени, после чего дальнейшие твины добавляются относительно него.

  6. 06
    Управление всей последовательностью целиком

    После создания таймлайн воспроизводится и приостанавливается как единое целое, а не твин за твином.

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

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

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

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

  • Создание многошаговой анимации, в которой несколько твинов должны выполняться последовательно или параллельно.
  • Когда пользователь спрашивает про таймлайны, последовательность анимаций или кейфрейм-подобную анимацию в GSAP.
  • Таймлайны, управляемые скроллом, для которых файл сочетается со скиллом scroll-trigger.

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

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

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

  • Цель и vars для каждого дочернего твинаКаждый вызов .to() в цепочке принимает селектор и объект vars; таймлайн объединяет их в одну последовательность.
  • repeat и yoyo на уровне таймлайнаrepeat и yoyo ведут себя так же, как у твинов, но применяются ко всему таймлайну, а не к одному твину.
  • Callback-функции на уровне таймлайнаonComplete, onStart и onUpdate передаются на уровне таймлайна, поэтому они срабатывают для всей последовательности в целом.

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

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

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

  1. Без цепочек с delay

    Не соединяйте анимации через delay, когда таймлайн может выстроить их в последовательность; файл указывает на gsap.timeline() и параметр position для многошаговой анимации.

  2. Параметр position вместо угадывания

    Всегда используйте параметр position — третий аргумент — чтобы размещать твины в конкретные моменты времени или относительно меток.

  3. Называйте свои метки

    Добавляйте метки с помощью addLabel(), чтобы последовательность оставалась читаемой и удобной для поддержки.

  4. Значения по умолчанию в конструкторе

    Передавайте defaults в конструктор таймлайна, чтобы дочерние твины наследовали duration, ease и подобные vars вместо их повторения в каждом твине.

  5. ScrollTrigger размещается на таймлайне

    Размещайте ScrollTrigger на таймлайне или на твине верхнего уровня, но никогда на твинах внутри таймлайна.

  6. Никогда не вкладывайте анимацию ScrollTrigger

    Анимации, содержащие ScrollTrigger, не должны быть вложенными; ScrollTrigger допустим только на Tween или Timeline верхнего уровня.

  7. Длительность конструктора — не длина последовательности

    Не читайте duration у конструктора таймлайна как длительность твина — файл называет это распространённой ошибкой.

  8. Знайте позицию по умолчанию

    «>» запускает твин, когда завершается последняя добавленная анимация, и это позиция по умолчанию, а «<» выравнивает его по началу этой анимации.

04 Применение

Установить gsap-timeline в Claude Code или Codex

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

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

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

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

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

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

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

Starter prompt
I'm sequencing a [hero banner] animation: [the headline] slides up, then [the CTA button] appears 0.5s later, and [the product shot] scales in at the same start time as the button. I want shared duration and ease defaults on the timeline, and labels for the intro and outro so I can play from either one.

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

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

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

  • Переместите плейхед на конкретную секунду с помощью tl.time(2) и убедитесь, что каждый твин начинается там, где предполагает параметр позиции.
  • Проверьте, что значения по умолчанию действительно дошли до дочерних элементов: в примере из файла оба твина используют 0.5s и power2.out без их повторения.
  • Воспроизведите с названия метки, чтобы убедиться, что метка добавлена в нужный момент времени.
  • Воспроизведите в обратном порядке для предпросмотра последовательности назад; в файле показан progress(1) перед reverse(), чтобы таймлайн проигрывался полностью в обратную сторону.

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

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

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

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

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

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

Внутри SKILL.md

  1. Когда использовать этот skillПрименяется к многошаговой анимации и построению последовательностей; связан со skills core, scroll-trigger и React.
  2. Создание таймлайнаgsap.timeline() с цепочкой вызовов .to(); твины добавляются по умолчанию, если не задано другое положение.
  3. Параметр позицииТретий аргумент или свойство vars: абсолютные, относительные смещения, метки и размещение с угловыми скобками.
  4. Значения по умолчанию таймлайнаЗначения по умолчанию, переданные конструктору таймлайна, наследуются всеми дочерними твинами.
  5. Опции таймлайна (конструктор)paused, repeat, yoyo, callback-функции уровня таймлайна и объект defaults, передаваемый дочерним элементам.
  6. МеткиaddLabel(), затем play() и tweenFromTo() для запуска с отмеченных точек.
  7. Вложение таймлайновГлавный таймлайн может содержать дочерние таймлайны через master.add(child, 0).
  8. Управление воспроизведениемplay, pause, reverse, restart, time, progress и kill перечислены для таймлайна.
  9. Официальные best practices GSAPПять отмеченных практик: таймлайны вместо delay, параметр позиции, метки, значения по умолчанию, ScrollTrigger верхнего уровня.
  10. Не делайте такЧетыре отмеченные крестиком ошибки, включая цепочки delay, пропущенные значения по умолчанию и вложенные ScrollTrigger.
Собственное описание skill
«Официальный скилл GSAP для таймлайнов — gsap.timeline(), параметр position, вложенность, управление воспроизведением. Используйте при последовательной анимации, хореографии кейфреймов или когда пользователь спрашивает о последовательности анимаций, таймлайнах или порядке анимации (в GSAP или при рекомендации библиотеки с поддержкой таймлайнов).»

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

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

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

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

Как построить таймлайн, который не запускается, пока я его не активирую?

Создайте таймлайн с paused: true в конструкторе, чтобы он оставался на паузе, а затем вызывайте .play(), когда нужно его запустить.

GSAP Timeline

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

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

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