Использование Timeline

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

Создание Timeline осуществляется с помощью GSAP Timeline, например:

const tl = gsap.timeline();

После этого к tl можно добавлять анимации через методы .to(), .from(), .fromTo(). Пример:

tl.to(".box", { x: 300, duration: 1 })
  .to(".circle", { y: 200, duration: 1 }, "-=0.5");

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

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

Чтобы Timeline реагировал на прокрутку, используется объект ScrollMagic.Scene. Основная структура выглядит так:

const scene = new ScrollMagic.Scene({
  triggerElement: "#trigger", // элемент, который запускает анимацию
  duration: 500,              // протяжённость действия анимации в px
  triggerHook: 0.5            // положение триггера на экране (0 — верх, 1 — низ)
})
.setTween(tl)
.addTo(controller);

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

  • triggerElement — элемент DOM, при достижении которого запускается сцена.
  • duration — длительность сцены, влияет на скорость прокрутки анимации.
  • triggerHook — точка экрана, в которой триггер активируется.
  • .setTween() принимает gsap.timeline или отдельную анимацию GSAP.
  • .addTo(controller) добавляет сцену в контроллер ScrollMagic для отслеживания скролла.

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

Timeline позволяет комбинировать несколько анимаций:

  • Последовательное выполнение — анимации идут одна за другой.
tl.to(".box1", { x: 100, duration: 1 })
  .to(".box2", { y: 50, duration: 1 });
  • Параллельное выполнение — с помощью смещения (position parameter) можно запускать одновременно несколько анимаций:
tl.to(".box1", { x: 100, duration: 1 })
  .to(".box2", { y: 50, duration: 1 }, "-=0.5"); // начало второй анимации за 0.5s до конца первой
  • Контроль времени — Timeline позволяет точно управлять началом каждой анимации, задавая абсолютное время:
tl.to(".box1", { x: 100, duration: 1 }, 0)  // старт в 0 секунду
  .to(".box2", { y: 50, duration: 1 }, 1);  // старт в 1 секунду

Использование обратной анимации

Timeline поддерживает автоматическое воспроизведение обратной анимации при прокрутке вверх, если сцена настроена с опцией reverse: true (по умолчанию true):

const scene = new ScrollMagic.Scene({
  triggerElement: "#trigger",
  duration: 400,
  reverse: true
})
.setTween(tl)
.addTo(controller);

При reverse: false анимация проигрывается только один раз при скролле вниз.

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

Можно использовать несколько Timeline в одной сцене или распределять их по разным сценам для сложных эффектов:

const tl1 = gsap.timeline();
tl1.to(".box1", { x: 200, duration: 1 });

const tl2 = gsap.timeline();
tl2.to(".box2", { y: 150, duration: 1 });

new ScrollMagic.Scene({
  triggerElement: "#section1",
  duration: 600
})
.setTween(tl1)
.addTo(controller);

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

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

Дополнительные возможности Timeline

  • Повторение и петли — GSAP Timeline поддерживает параметры repeat и yoyo для циклических анимаций:
const tl = gsap.timeline({ repeat: 2, yoyo: true });
tl.to(".box", { x: 300, duration: 1 });
  • События — Timeline поддерживает события onStart, onUpdate, onComplete для запуска дополнительных функций:
const tl = gsap.timeline({
  onStart: () => console.log("Анимация началась"),
  onComplete: () => console.log("Анимация завершена")
});
tl.to(".box", { x: 300, duration: 1 });
  • Масштабирование длительности сцены — можно синхронизировать скорость Timeline с прокруткой через scrub:
new ScrollMagic.Scene({
  triggerElement: "#trigger",
  duration: 500,
  triggerHook: 0.5,
  scrub: true // плавная привязка анимации к скроллу
})
.setTween(tl)
.addTo(controller);

При scrub: true прогресс Timeline зависит от положения скролла, создавая эффект “скролл-анимации” в реальном времени.

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

  • Группировка анимаций — объединение всех анимаций сцены в один Timeline облегчает управление.
  • Контроль по смещению — использование параметра position позволяет накладывать анимации без жесткой последовательности.
  • Синхронизация с несколькими сценами — можно комбинировать несколько сцен с разными Timeline для создания интерактивных эффектов, например параллакса, появления элементов и сложных переходов.

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

Оглавление