Stagger-эффекты

Stagger-эффекты позволяют создавать последовательные анимации для группы элементов, при которых каждый последующий элемент анимируется с задержкой относительно предыдущего. Это создаёт динамичное ощущение движения и визуальной глубины при прокрутке страницы. В ScrollMagic для реализации stagger-эффектов чаще всего используется комбинация TimelineMax/TimelineLite из библиотеки GSAP и сцены ScrollMagic.

Создание сцены с Timeline

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

// Создаем Timeline
var tl = new TimelineMax();

// Добавляем анимации с задержкой для элементов
tl.staggerFrom(".item", 0.5, {opacity: 0, y: 50}, 0.2);

Пояснения:

  • .staggerFrom — метод GSAP, позволяющий задавать анимацию появления элементов с задержкой.
  • ".item" — селектор элементов, которые будут анимироваться.
  • 0.5 — длительность анимации каждого элемента.
  • {opacity: 0, y: 50} — начальные значения свойств (элементы появляются снизу с нулевой прозрачностью).
  • 0.2 — интервал задержки между стартом анимации соседних элементов (stagger).

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

После создания Timeline необходимо связать его со сценой ScrollMagic:

// Создаем контроллер ScrollMagic
var controller = new ScrollMagic.Controller();

// Создаем сцену
var scene = new ScrollMagic.Scene({
  triggerElement: "#container", // элемент-триггер
  triggerHook: 0.8,            // точка срабатывания на экране
  reverse: false                // анимация не проигрывается обратно при скролле вверх
})
.setTween(tl)                  // привязка Timeline к сцене
.addTo(controller);            // добавляем сцену в контроллер

Ключевые моменты настройки:

  • triggerElement определяет блок, при достижении которого запускается анимация.
  • triggerHook управляет положением триггера относительно окна браузера (0 — верх, 1 — низ).
  • reverse: false предотвращает обратное проигрывание при прокрутке вверх, что часто используется для эффектов появления.

Продвинутые параметры Stagger

1. Изменение направления анимации

Можно комбинировать сдвиг по оси x или y для создания эффекта выезда с разных сторон:

tl.staggerFrom(".item", 0.6, {opacity: 0, x: -100}, 0.15);

2. Динамическая задержка через функцию

GSAP позволяет задавать функцию для расчёта индивидуальной задержки каждого элемента:

tl.staggerFrom(".item", 0.5, {opacity: 0, y: 50}, function(index, target) {
    return index * 0.1; // каждый элемент на 0.1 сек позже предыдущего
});

3. Анимация разных свойств для разных элементов

Можно задавать уникальные начальные значения для каждого элемента через массив объектов:

var items = document.querySelectorAll(".item");
var animProps = [
  {opacity: 0, y: 50},
  {opacity: 0, x: -50},
  {opacity: 0, y: -50}
];

tl.staggerFrom(items, 0.5, animProps, 0.2);

Связывание с прокруткой для длинных секций

Для эффектов, где элементы должны появляться не одновременно, а постепенно при прокрутке, используется duration сцены:

var scene = new ScrollMagic.Scene({
  triggerElement: "#container",
  triggerHook: 0.7,
  duration: "80%"  // анимация длится пока скролл проходит 80% контейнера
})
.setTween(tl)
.addTo(controller);

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

  • duration делает анимацию прогрессивной, синхронизированной с прокруткой.
  • Если duration не указан, анимация запускается сразу при пересечении триггера.

Комбинация с другими эффектами

Stagger-эффекты отлично сочетаются с:

  • scale — постепенное увеличение элементов.
  • rotation — создание эффекта вращения при появлении.
  • skew — визуальные деформации для динамики.

Пример комплексного эффекта:

tl.staggerFrom(".item", 0.6, {opacity: 0, y: 50, scale: 0.8, rotation: -10}, 0.2);

Оптимизация производительности

  • Использовать will-change: transform для анимируемых элементов в CSS.
  • Минимизировать количество одновременно анимируемых элементов.
  • Для длинных страниц использовать controller.scrollTo для плавной навигации и контроля прогресса.

Итоговый шаблон сцены со Stagger

var controller = new ScrollMagic.Controller();

var tl = new TimelineMax();
tl.staggerFrom(".item", 0.5, {opacity: 0, y: 50}, 0.2);

var scene = new ScrollMagic.Scene({
  triggerElement: "#container",
  triggerHook: 0.8,
  reverse: false
})
.setTween(tl)
.addTo(controller);

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

Оглавление