Создание timeline

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

const tl = gsap.timeline();

Создание нового timeline начинается с вызова gsap.timeline(). Этот объект служит контейнером для всех анимаций, которые будут добавлены. Timeline может быть пустым, а анимации добавляются по мере необходимости.

Добавление анимаций в timeline

Методы добавления анимаций в timeline включают:

  • to()
  • from()
  • fromTo()

Пример последовательного добавления анимаций:

const tl = gsap.timeline();

tl.to(".box", { x: 100, duration: 1 })
  .to(".box", { y: 50, duration: 0.5 })
  .to(".box", { rotation: 360, duration: 1 });

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

Управление временем и позиционированием анимаций

GSAP Timeline позволяет точно управлять моментом старта каждой анимации. Для этого используется позиционный параметр:

tl.to(".box", { x: 100, duration: 1 })
  .to(".box", { y: 50, duration: 0.5 }, "-=0.25") // начинается на 0.25 секунды раньше окончания предыдущей
  .to(".box", { rotation: 360, duration: 1 }, "label1");
  • "-=0.25" — сдвиг относительно конца предыдущей анимации.
  • "label1" — использование метки (label), к которой можно привязать анимации.

Добавление меток:

tl.addLabel("startRotation", "+=0.5"); // добавляет метку через 0.5 секунды после предыдущей анимации
tl.to(".box", { rotation: 360, duration: 1 }, "startRotation");

Повторение и обратное воспроизведение

Timeline поддерживает автоматическое повторение и управление направлением анимации:

tl.repeat(2)       // повторяет 2 раза
  .yoyo(true);     // обратное воспроизведение на каждом повторе
  • repeat(-1) создаёт бесконечный цикл.
  • yoyo(true) делает анимацию “туда-обратно”.

Контроль анимации timeline

Timeline обладает методами управления, аналогичными отдельным анимациям:

tl.play();       // запуск
tl.pause();      // пауза
tl.reverse();    // воспроизведение в обратном направлении
tl.seek(1.5);    // перемотка к определённому времени (в секундах)

Также можно использовать прогресс:

tl.progress(0.5); // устанавливает прогресс на 50%

Вложенные timeline

Для сложных анимаций можно использовать вложенные timeline, что позволяет создавать многоуровневые анимации:

const mainTl = gsap.timeline();

const subTl = gsap.timeline();
subTl.to(".circle", { scale: 2, duration: 1 })
     .to(".circle", { rotation: 180, duration: 0.5 });

mainTl.add(subTl)
      .to(".box", { x: 300, duration: 1 });

Вложенные timeline автоматически синхронизируются с основным, что упрощает управление сложными сценами.

Важные свойства timeline

  • duration() — возвращает общую продолжительность timeline.
  • totalDuration() — учитывает повторения и замедления.
  • timeScale() — управление скоростью воспроизведения:
tl.timeScale(2); // ускорение в 2 раза
  • paused — позволяет создавать timeline, который стартует позже:
const tl = gsap.timeline({ paused: true });

Практические советы

  1. Использование меток облегчает синхронизацию множества анимаций.
  2. Вложенные timeline упрощают управление сложными сценами и повторяющимися эффектами.
  3. Позиционные параметры позволяют запускать анимации одновременно или с частичным перекрытием.
  4. Контроль через прогресс и timeScale обеспечивает гибкость управления в реальном времени.

Timeline GSAP является фундаментальным инструментом для создания анимаций любой сложности, от простых последовательностей до масштабных интерактивных сцен.

Оглавление