Функция stagger для сложных паттернов

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

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

В этом примере каждый элемент с классом .box начинает движение с интервалом 0.2 секунды.

Базовые параметры stagger

1. amount Позволяет распределить анимацию всех элементов равномерно в течение заданного времени:

gsap.to(".box", {
  x: 100,
  duration: 1,
  stagger: {
    amount: 2
  }
});

Если есть 5 элементов, интервал между ними автоматически вычисляется как 2 / (5 - 1) = 0.5 секунды.

2. from Определяет точку старта каскада. Возможные значения: "start", "center", "end", "edges", "random".

gsap.to(".box", {
  y: 50,
  duration: 1,
  stagger: {
    each: 0.2,
    from: "center"
  }
});

В этом примере анимация начинается с центрального элемента и распространяется к краям.

3. each Указывает фиксированный интервал между анимациями элементов.

gsap.to(".box", {
  rotation: 360,
  duration: 1,
  stagger: {
    each: 0.1
  }
});

Каждый последующий элемент будет вращаться с задержкой в 0.1 секунды относительно предыдущего.

Сложные паттерны с stagger

GSAP позволяет создавать не только линейные последовательности, но и сложные паттерны, комбинируя функции stagger с callback-функциями.

1. Функция на основе индекса

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

gsap.to(".box", {
  x: 200,
  duration: 1,
  stagger: (index, target, array) => index * 0.3
});
  • index — порядковый номер элемента.
  • target — DOM-элемент.
  • array — массив всех анимируемых элементов.

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

2. Каскад с обратным порядком

Использование stagger с параметром from: "end" позволяет анимации идти в обратном направлении:

gsap.to(".box", {
  y: -50,
  duration: 1,
  stagger: {
    each: 0.15,
    from: "end"
  }
});

Элементы в конце массива стартуют первыми, создавая эффект “обратной волны”.

3. Анимации по кривой или шахматке

Функция stagger совместно с CSS Grid или flex-контейнерами позволяет создавать сложные визуальные паттерны.

gsap.to(".grid-item", {
  scale: 1.5,
  duration: 1,
  stagger: {
    grid: [3, 3],
    from: "center",
    amount: 1
  }
});
  • grid: [3, 3] — размер сетки, 3x3.
  • Анимация начинается из центра и распространяется к краям.
  • amount распределяет общее время анимации по всем элементам.

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

Функция stagger идеально интегрируется с gsap.timeline(), что позволяет строить сложные сцены с повторяющимися каскадами:

const tl = gsap.timeline();

tl.to(".box", { x: 100, duration: 1, stagger: 0.2 })
  .to(".box", { y: 50, duration: 0.5, stagger: { each: 0.1, from: "end" } })
  .to(".box", { rotation: 360, duration: 1, stagger: (i) => i * 0.15 });

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

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

1. stagger с функциями обратного вызова

gsap.to(".box", {
  x: 100,
  duration: 1,
  stagger: {
    each: 0.2,
    onStart: (index, target) => console.log(`Element ${index} started!`)
  }
});

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

2. Комбинирование с easings

gsap.to(".box", {
  y: 50,
  duration: 1,
  stagger: 0.2,
  ease: "power2.inOut"
});

Каждый элемент получает индивидуальное сглаживание движения, создавая естественные каскадные эффекты.

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

  • Для больших массивов элементов рекомендуется использовать amount, чтобы не перегружать рендеринг слишком большим числом одновременных анимаций.
  • При сложных паттернах удобно комбинировать stagger с timeline для последовательного контроля событий.
  • Использование функций с параметром index позволяет создавать уникальные индивидуальные движения для каждого элемента без написания отдельных анимаций.

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

Оглавление