Работа с containerAnimation

containerAnimation представляет собой инструмент для управления анимациями, сгруппированными внутри контейнера. Он позволяет организовать сложные последовательности анимаций, обеспечивая синхронизацию и контроль над их воспроизведением.

Создание контейнера анимации

Контейнер создается с помощью объекта gsap.timeline(). В отличие от одиночной анимации через gsap.to() или gsap.from(), таймлайн позволяет объединять несколько анимаций в логическую последовательность.

const container = gsap.timeline({
  paused: true,
  defaults: { duration: 1, ease: "power2.out" }
});

Ключевые параметры:

  • paused: true — контейнер создается в состоянии паузы, а анимации запускаются вручную.
  • defaults — задает общие настройки для всех анимаций внутри контейнера, что упрощает код и обеспечивает единообразие.

Добавление анимаций в контейнер

Внутри контейнера можно добавлять анимации с помощью методов to, from, fromTo:

container
  .to(".box", { x: 300, rotation: 45 })
  .from(".circle", { scale: 0, opacity: 0 })
  .to(".text", { y: -50, opacity: 1 }, "-=0.5");
  • Параметр смещения ("-=0.5") позволяет накладывать анимации друг на друга, создавая плавные переходы.
  • Любая анимация, добавленная в таймлайн, автоматически наследует значения defaults, если не указано иное.

Управление воспроизведением

Контейнер анимации предоставляет удобные методы для контроля:

  • container.play() — воспроизведение с текущей позиции.
  • container.pause() — пауза.
  • container.reverse() — воспроизведение в обратном направлении.
  • container.seek(time) — переход к конкретной позиции в таймлайне.
  • container.timeScale(value) — управление скоростью воспроизведения.
container.timeScale(2); // ускорить анимацию в 2 раза
container.play();

Использование timeScale особенно полезно при динамическом изменении скорости анимации без корректировки каждой отдельной анимации.

Цепочки и повторения

Контейнер поддерживает повторение и циклы через параметры:

container.repeat(3).yoyo(true);
  • repeat(n) — количество повторов. Значение -1 означает бесконечный цикл.
  • yoyo(true) — возврат анимации в исходное состояние после завершения цикла, создавая эффект «обратного движения».

Вложенные таймлайны

Контейнер позволяет создавать вложенные таймлайны для сложных анимационных сцен:

const subTimeline = gsap.timeline();
subTimeline.to(".subBox", { x: 100, opacity: 1 });

container.add(subTimeline, "+=0.5");
  • Вложенные таймлайны наследуют управление из родительского контейнера.
  • Можно управлять всей группой анимаций одновременно, используя методы play, pause, reverse родительского контейнера.

События и колбэки

Контейнер поддерживает события для отслеживания состояния анимации:

container.eventCallback("onStart", () => console.log("Анимация началась"));
container.eventCallback("onComplete", () => console.log("Анимация завершена"));
container.eventCallback("onUpdate", () => console.log("Анимация обновилась"));
  • onStart — срабатывает при запуске таймлайна.
  • onUpdate — вызывается на каждом кадре анимации.
  • onComplete — вызывается после полного завершения всех анимаций контейнера.

Динамическое управление элементами

Контейнер позволяет добавлять или удалять анимации во время выполнения:

container.add(gsap.to(".dynamicBox", { x: 200 }), "+=1");
container.remove(".dynamicBox");
  • add() — добавляет новую анимацию или таймлайн.
  • remove() — удаляет анимацию по ссылке или селектору.
  • Такой подход позволяет создавать интерактивные анимации с динамическим контентом.

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

  1. Использовать defaults для повторяющихся параметров анимации, чтобы упростить поддержку.
  2. Для сложных интерфейсов группировать элементы в контейнеры для упрощения управления.
  3. Использовать вложенные таймлайны для отдельных компонентов страницы, чтобы избежать глобальной путаницы в анимациях.
  4. Для интерактивного контроля применять seek и timeScale, создавая адаптивные анимации под действия пользователя.
  5. Следить за производительностью: чем больше анимаций внутри одного контейнера, тем важнее оптимизация через will-change в CSS и минимизацию перерисовок.

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

Оглавление