Объект stagger: amount, each, from

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

Основные принципы работы stagger

С помощью stagger можно анимировать набор элементов с равномерной или распределённой задержкой. В простейшем виде это выглядит так:

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

Здесь каждая .box начнет движение с задержкой 0.2 секунды относительно предыдущей.

stagger может быть представлен как число или как объект с более сложными параметрами, такими как amount, each, from и другими.

Свойство amount

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

Пример:

gsap.to(".box", {
  x: 300,
  duration: 1,
  stagger: {
    amount: 2
  }
});
  • Предположим, что элементов 5.
  • amount: 2 означает, что задержка между первым и последним элементом распределяется равномерно на 2 секунды.
  • Задержка для каждого следующего элемента вычисляется как amount / (кол-во элементов - 1).
  • В данном случае: 2 / (5-1) = 0.5 сек.

То есть первый элемент начинает анимацию сразу, второй — через 0.5 сек, третий — через 1 сек и так далее, пока последний элемент не начнёт через 2 секунды.

Свойство each

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

Пример:

gsap.to(".box", {
  x: 300,
  duration: 1,
  stagger: {
    each: 0.3
  }
});
  • Первый элемент начинает сразу.
  • Второй — через 0.3 сек.
  • Третий — через 0.6 сек.
  • Задержка между элементами всегда равна 0.3 сек, вне зависимости от их количества.

Если нужно контролировать одинаковый интервал между элементами, удобнее использовать each.

Свойство from

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

  • 'start' — по умолчанию, задержка считается от первого элемента.
  • 'end' — начинается с последнего элемента.
  • 'center' — элементы анимируются от центра к краям.
  • Индекс (number) — отсчёт начинается с конкретного элемента.

Пример анимации от центра:

gsap.to(".box", {
  y: 100,
  duration: 1,
  stagger: {
    each: 0.2,
    from: "center"
  }
});
  • Если элементов 5, центр — третий элемент.
  • Анимация начнётся с него, второй и четвёртый элементы будут запускаться с задержкой 0.2 сек от него, первый и пятый — ещё через 0.2 сек.
  • Создаётся эффект симметричного «расходящегося» движения.

Комбинация amount, each и from

Эти свойства можно комбинировать для создания сложных последовательностей:

gsap.to(".box", {
  rotation: 360,
  duration: 1,
  stagger: {
    amount: 2,
    from: "end"
  }
});
  • amount: 2 распределяет задержку между элементами в 2 секунды.
  • from: "end" меняет направление, и последний элемент запускается первым.
gsap.to(".box", {
  scale: 1.5,
  duration: 0.5,
  stagger: {
    each: 0.1,
    from: 2
  }
});
  • each: 0.1 задаёт фиксированную задержку между элементами.
  • from: 2 указывает, что старт идёт с элемента с индексом 2.
  • Элементы до и после индекса 2 будут запускаться с одинаковым интервалом 0.1 сек.

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

  1. Использовать amount для равномерного распределения всей анимации по заданной длительности.
  2. Использовать each для точного контроля интервалов между элементами, когда нужна постоянная задержка.
  3. Использовать from для создания интересных эффектов, таких как анимация от центра, от конца или от конкретного элемента.
  4. Комбинировать amount и from для сложных последовательностей, особенно при работе с сеткой или списками элементов.
  5. Помнить, что stagger работает с любыми селекторами или массивами DOM-элементов, что делает его универсальным инструментом для динамичных интерфейсов.

Эти три свойства — amount, each и from — образуют ядро управления последовательностью анимаций в GSAP, позволяя задавать как общую динамику, так и тонкую настройку временных интервалов между элементами.

Оглавление