Базовый stagger с числовым значением

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

Синтаксис и базовое использование

Базовая форма stagger выглядит следующим образом:

gsap.to(".box", {
  x: 200,
  duration: 1,
  stagger: 0.2
});

Здесь:

  • .box — CSS-селектор элементов, которые будут анимированы;
  • x: 200 — свойство, которое изменяется (сдвиг по оси X на 200px);
  • duration: 1 — длительность анимации каждого элемента в секундах;
  • stagger: 0.2 — числовое значение, обозначающее задержку между запуском анимации соседних элементов (в секундах).

Ключевой момент: каждое последующее значение задерживается на stagger секунд относительно предыдущего. В примере выше первый элемент начнет анимацию сразу, второй — через 0.2 секунды, третий — через 0.4 секунды и так далее.

Расширенные возможности числового stagger

Числовой stagger может быть как положительным, так и отрицательным. Это позволяет управлять направлением последовательной анимации:

gsap.to(".box", {
  y: 100,
  duration: 1,
  stagger: -0.1
});

Отрицательное значение заставляет анимации элементов начинаться раньше относительно предыдущего, создавая эффект «обгоняющих» элементов.

Использование с различными функциями времени

Числовой stagger можно комбинировать с ease, yoyo, repeat:

gsap.to(".box", {
  scale: 1.5,
  duration: 0.5,
  stagger: 0.1,
  ease: "back.out(1.7)",
  yoyo: true,
  repeat: 1
});
  • ease задаёт кривую ускорения для каждой отдельной анимации;
  • yoyo: true возвращает элемент в исходное состояние после завершения анимации;
  • repeat: 1 заставляет анимацию повториться один раз.

В этом случае элементы анимируются последовательно с задержкой в 0.1 секунды, каждая анимация имеет плавное ускорение и возвращается в начальное состояние.

Связь с массивами элементов

GSAP автоматически применяет stagger к коллекциям элементов, полученных через селектор или массив. Можно использовать stagger для сложных последовательностей:

const boxes = document.querySelectorAll(".box");

gsap.from(boxes, {
  opacity: 0,
  y: -50,
  duration: 0.8,
  stagger: 0.15
});

Каждый элемент появляется постепенно с вертикальной смещением, создавая эффект «каскада». Числовое значение обеспечивает равномерное распределение анимации между элементами.

Комбинация с функциями обратного отсчёта

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

gsap.to(".box", {
  rotation: 360,
  duration: 1,
  stagger: i => i * 0.2
});

Здесь каждый элемент получает задержку, равную произведению его индекса на 0.2 секунды. Таким образом, можно создавать сложные временные последовательности, сохраняя числовую основу для расчёта задержки.

Практические примеры

  1. Эффект «волны»:
gsap.to(".box", {
  y: 30,
  duration: 0.5,
  stagger: 0.1,
  repeat: -1,
  yoyo: true
});

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

  1. Ускоряющаяся анимация:
gsap.to(".box", {
  x: 100,
  duration: 0.5,
  stagger: 0.05
});

Короткая задержка между элементами визуально создаёт эффект ускорения потока.

Ограничения и рекомендации

  • Числовой stagger удобен для равномерных последовательностей, когда требуется фиксированный интервал.
  • Для более сложных сценариев лучше использовать функциональный stagger, который позволяет учитывать позиции, индексы или случайные значения.
  • Задержки в stagger складываются с delay и duration, поэтому важно учитывать общую синхронизацию всей последовательности анимаций.

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

Оглавление