Комбинированные анимации

Комбинированные анимации позволяют создавать сложные визуальные эффекты, синхронизируя несколько анимационных действий на одном или нескольких элементах при прокрутке страницы. В ScrollMagic это достигается за счёт объединения сцен (Scenes), таймлайнов (TimelineMax/TimelineLite из GSAP) и управления последовательностью событий.

Использование Timeline для объединения анимаций

В ScrollMagic интеграция с GSAP является стандартной практикой для создания комбинированных анимаций. Основная идея: вместо запуска отдельной анимации для каждого элемента создаётся Timeline, в котором задаются последовательные или параллельные анимации.

// Создание таймлайна с использованием GSAP
const timeline = gsap.timeline();

// Последовательная анимация двух элементов
timeline
  .from(".element1", { duration: 1, x: -100, opacity: 0 })
  .from(".element2", { duration: 1, y: 50, opacity: 0 });

Пояснение:

  • .from() задаёт начальное состояние элемента.
  • Элементы будут анимироваться последовательно, если явно не использовать смещение по времени.
  • Для одновременной анимации можно использовать смещение "<0" или "-=0.5".
timeline
  .from(".element1", { duration: 1, x: -100, opacity: 0 })
  .from(".element2", { duration: 1, y: 50, opacity: 0 }, "-=0.5"); // начнется за 0.5 секунды до конца предыдущей

Интеграция Timeline с ScrollMagic Scene

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

const controller = new ScrollMagic.Controller();

const scene = new ScrollMagic.Scene({
  triggerElement: ".trigger", // элемент, при появлении которого запускается анимация
  duration: 500, // протяженность анимации по прокрутке
  triggerHook: 0.5 // точка срабатывания в середине экрана
})
.setTween(timeline)
.addTo(controller);

Ключевые моменты:

  • triggerElement определяет привязку анимации к элементу на странице.
  • duration задаёт длину анимации относительно скролла. При значении 0 анимация запускается мгновенно.
  • triggerHook варьируется от 0 (верх окна) до 1 (низ окна).

Комбинация нескольких сцен

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

const timeline1 = gsap.timeline();
timeline1.from(".block1", { duration: 1, x: -200, opacity: 0 });

const timeline2 = gsap.timeline();
timeline2.from(".block2", { duration: 1, scale: 0, opacity: 0 });

new ScrollMagic.Scene({ triggerElement: ".section1", duration: 400 })
  .setTween(timeline1)
  .addTo(controller);

new ScrollMagic.Scene({ triggerElement: ".section2", duration: 400 })
  .setTween(timeline2)
  .addTo(controller);

Примечание: сцены можно комбинировать через контроллеры, что позволяет управлять всеми анимациями централизованно.

Параллакс и многослойные эффекты

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

const bgTimeline = gsap.timeline();
bgTimeline.from(".background", { y: -50, opacity: 0.8 });

const fgTimeline = gsap.timeline();
fgTimeline.from(".foreground", { y: 50, opacity: 1 });

new ScrollMagic.Scene({ triggerElement: ".parallax-section", duration: 600 })
  .setTween(bgTimeline)
  .addTo(controller);

new ScrollMagic.Scene({ triggerElement: ".parallax-section", duration: 600 })
  .setTween(fgTimeline)
  .addTo(controller);

Особенности:

  • Элементы фона и переднего плана движутся с разной скоростью.
  • duration задаёт, насколько сильно анимация привязана к скроллу.

Управление событиями сцены

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

scene.on("enter", () => {
  console.log("Анимация начала воспроизводиться");
});

scene.on("progress", event => {
  console.log(`Прогресс анимации: ${event.progress}`);
});

scene.on("leave", () => {
  console.log("Анимация завершена или сцена покинута");
});

Преимущества использования событий:

  • Возможность синхронизировать аудио, подсветку элементов или запуск других сцен.
  • Создание динамичных интерфейсов с откликом на прокрутку.

Практические советы при комбинировании анимаций

  1. Использовать Timeline для последовательных и параллельных анимаций, чтобы не создавать отдельные сцены для каждого действия.
  2. Определять длительность сцены через duration, чтобы анимация была привязана к прокрутке, а не только к времени.
  3. События enter, leave, progress позволяют управлять дополнительными эффектами и интерактивностью.
  4. Контролировать сложность: слишком много одновременно работающих таймлайнов может вызвать падение FPS, особенно на мобильных устройствах.
  5. Синхронизация нескольких сцен через общий контроллер обеспечивает более предсказуемое поведение комбинированных анимаций.

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

Оглавление