Вложенные timeline

GSAP (GreenSock Animation Platform) предоставляет гибкий инструмент управления анимацией через объект Timeline. Возможность создания вложенных timeline позволяет организовывать сложные анимационные последовательности, упрощать управление и повторное использование блоков анимации.

Создание вложенного Timeline

Вложенный timeline создается точно так же, как обычный, с помощью gsap.timeline(). Основное отличие заключается в том, что один timeline можно добавить внутрь другого с помощью метода .add().

const mainTimeline = gsap.timeline();

const nestedTimeline = gsap.timeline();
nestedTimeline.to(".box", { x: 200, duration: 1 });
nestedTimeline.to(".box", { y: 100, duration: 1 });

mainTimeline.add(nestedTimeline);
mainTimeline.to(".circle", { scale: 1.5, duration: 0.5 });

В этом примере анимация .box будет полностью выполнена в рамках nestedTimeline перед продолжением анимации .circle в mainTimeline.

Управление временем и смещениями

Метод .add() поддерживает второй аргумент — позицию вставки, которая может быть указана как:

  • Абсолютное время в секундах:
mainTimeline.add(nestedTimeline, 2); // вставка на отметку 2 секунды
  • Относительное смещение от конца предыдущего действия:
mainTimeline.add(nestedTimeline, "+=0.5"); // смещение на 0.5 секунды
  • Синтаксис с меткой:
mainTimeline.addLabel("nestedStart");
mainTimeline.add(nestedTimeline, "nestedStart+=0.3");

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

Повторное использование вложенных timeline

Вложенные timeline могут быть изолированы и переиспользованы в разных местах проекта. Это особенно полезно для модульных интерфейсов:

const hoverAnimation = gsap.timeline({ paused: true });
hoverAnimation.to(".button", { scale: 1.1, duration: 0.3 });
hoverAnimation.to(".icon", { rotation: 15, duration: 0.3 });

document.querySelector(".button").addEventListener("mouseenter", () => hoverAnimation.play());
document.querySelector(".button").addEventListener("mouseleave", () => hoverAnimation.reverse());

В этом случае hoverAnimation может быть добавлен как вложенный timeline к более сложной последовательности, сохраняя независимость управления.

Контроль вложенных timeline

GSAP предоставляет возможность управлять вложенными timeline через методы главного timeline:

  • play(), pause(), reverse(), restart() — применяются как к основному, так и к вложенному timeline.
  • seek() — позволяет перемещать главную анимацию к определенной позиции, включая вложенные timeline.
  • kill() — удаляет анимацию из memory и timeline, включая все вложенные блоки.
mainTimeline.seek(1.5); // перемещение на 1.5 секунды внутри всей последовательности
nestedTimeline.pause(); // приостанавливает только вложенную анимацию

Вложенные timeline и повторение

Вложенные timeline могут иметь собственные параметры повторения и задержки:

const nestedTimeline = gsap.timeline({ repeat: 2, yoyo: true });
nestedTimeline.to(".square", { x: 300, duration: 1 });

mainTimeline.add(nestedTimeline);

Главный timeline при этом будет учитывать общее время выполнения вложенного timeline с повторениями, что облегчает расчет длительности сложных анимаций.

Комбинирование с метками и событиями

Вложенные timeline легко интегрируются с метками и callback-функциями, что упрощает организацию сложной логики анимации:

nestedTimeline.addLabel("halfway", 0.5);
nestedTimeline.to(".text", { opacity: 1, duration: 0.5, onComplete: () => console.log("Текст появился") });

mainTimeline.add(nestedTimeline, "startPoint");
mainTimeline.add(() => console.log("Главная анимация завершена"), "+=0.1");

Метки и колбэки позволяют точно синхронизировать действия между основным и вложенными timeline.

Лучшие практики работы с вложенными timeline

  1. Изоляция логики — каждая вложенная анимация должна отвечать за конкретный блок элементов.
  2. Использование пауз и событий — облегчает тестирование и отладку последовательностей.
  3. Оптимизация повторного использования — хранение вложенных timeline в переменных для повторного применения в разных частях интерфейса.
  4. Четкое именование меток — упрощает навигацию и управление сложными цепочками анимации.
  5. Минимизация глубины вложенности — слишком глубокие вложения усложняют синхронизацию и управление временем.

Вложенные timeline превращают GSAP в инструмент не только для анимации отдельных элементов, но и для построения сложных иерархических и повторяемых анимационных структур, что делает библиотеку мощным инструментом для динамичных интерфейсов.

Оглавление