- Главная
- Javascript
- GSAP Stagger: анимация элементов с задержкой
GSAP Stagger: анимация элементов с задержкой
Stagger в GSAP — это один из наиболее эффектных и часто используемых инструментов библиотеки, который позволяет анимировать группы элементов с задержкой между началом анимации каждого из них. Вместо того чтобы запускать анимацию всех объектов одновременно или писать множество отдельных таймлайнов, вы можете одним параметром создать сложную, каскадную анимацию. Это незаменимо для работы со списками, галереями, карточками товаров, элементами навигации и любыми другими повторяющимися блоками. Использование stagger делает интерфейс динамичным, живым и профессиональным, значительно экономя время разработчика.
Базовый синтаксис и параметры stagger
Базовый синтаксис stagger предельно прост и интегрируется прямо в объект параметров tween. Основная идея заключается в том, что вы передаете значение stagger в метод, анимирующий коллекцию элементов. GSAP автоматически рассчитает задержку для каждого элемента в порядке их следования в DOM (или в соответствии с вашими настройками). Простейший формат — это число, которое задает фиксированную задержку в секундах между анимациями.
Пример 1
// Анимация всех элементов с классом .card
gsap.to('.card', {
opacity: 1,
y: 0,
duration: 0.8,
stagger: 0.2, // Каждая следующая карточка начнет анимацию на 0.2 секунды позже предыдущей
repeat: -1,
yoyo: true
});Однако настоящая мощь stagger раскрывается при использовании объекта конфигурации. Вот основные параметры, которые вы можете контролировать:
each: величина задержки между началами анимаций (в секундах). Аналог простого числового значения.from: точка, с которой начинается распространение эффекта задержки. Это ключевой параметр для управления направлением и порядком.grid: позволяет автоматически определять строки и столбцы в сетке элементов.axis: определяет ось, вд которой происходит распространение, если используетсяgrid.ease: функция плавности для распределения задержек, а не для самой анимации.repeatиyoyo: позволяют создать повторяющиеся колебательные эффекты.
Управление направлением анимации с параметром 'from'
'from' — это то, что превращает простую последовательность в осмысленную и управляемую анимацию.Параметр 'from' принимает различные значения, определяющие стартовую точку эффекта задержки. Это критически важный параметр, так как он диктует, в каком порядке элементы начнут «оживать». Без его указания используется значение 'start'.
Основные значения
"start"(по умолчанию): анимация начинается с первого элемента и идет к последнему."end": порядок обратный, начинает последний элемент."center": анимация расходится от центрального элемента к краям."edges": анимация начинается одновременно с крайних элементов и сходится к центру.- Число: индекс элемента, с которого начнется распространение.
- Массив координат
[x, y]или"random".
Пример 2
Анимация расходится от центра.
gsap.from('.letter', {
scale: 0,
stagger: {
each: 0.1,
from: "center" // Центральный элемент увеличится первым
}
});Пример 3
Анимация начинается со случайного элемента каждый раз.
gsap.to('.dot', {
backgroundColor: '#ff6b6b',
stagger: {
each: 0.05,
from: 'random' // Создает динамичный, непредсказуемый эффект
}
});Создание сложных сеточных анимаций с 'grid' и 'axis'
grid и axis. Раньше для анимации сетки элементов в разных направлениях (например, по строкам или по столбцам) приходилось вручную рассчитывать индексы. Теперь GSAP может автоматически определить сетку на основе расположения элементов в DOM и их визуального порядка. Вы просто указываете grid: "auto", и библиотека сама вычислит количество элементов в строке, основываясь на их изначальном позиционировании.
Пример 4
Анимация всех ячеек сетки. Эффект «волны» идет слева направо, построчно.
gsap.set('.grid-cell', {y: 0, backgroundColor: 'blue',opacity:1});
gsap.from('.grid-cell', {
opacity: 0,
y: - 30,
stagger: {
grid: 'auto',
from: 'start',
axis: 'x',
amount: 0.6,
}
});Параметр axis в этой связке определяет приоритетное направление распространения эффекта:
"x"(по умолчанию): задержка сначала распространяется по горизонтали (по строке), затем переходит на следующую строку."y": задержка сначала распространяется по вертикали (по столбцу), затем переходит на следующий столбец.
Продвинутые техники
stagger позволяют полностью кастомизировать логику задержек, выходя за рамки линейного распределения.Вместо фиксированного значения each или amount вы можете передать собственную функцию. Эта функция будет вызвана для каждого элемента в коллекции, и ее возвращаемое значение определит задержку для этого конкретного элемента. Это открывает безграничные возможности: от зависимостей на основе данных-атрибутов до сложных математических распределений.
Пример 5
Задержка зависит от значения data-speed, указанного в HTML.
gsap.to('.data-driven-item', {
x: 100,
stagger: function(index, target, list) {
// Читаем кастомный атрибут и используем его значение как задержку
return parseFloat(target.dataset.speed) || 0.1;
}
});Пример 6
Нелинейное распределение задержек (например, через ease-функцию).
gsap.from('.non-linear-item', {
rotation: 360,
stagger: {
each: 0.1,
from: 'center',
ease: 'power2.inOut' // Задержки будут распределены не линейно, а по кривой плавности
}
});Также можно комбинировать stagger с другими мощными возможностями GSAP, такими как scrollTrigger для создания анимаций, запускаемых скроллом, или timeline для построения сложных последовательностей, где stagger-эффект является лишь частью сцены.
Анимация на стероидах. Погрузись в GSAP!
Забудь об ограничениях CSS-анимаций. Изучив GSAP в нашем онлан-курсе "GSAP с нуля до профи" ты получишь полный контроль над временем, движением и последовательностями.
Создавай плавные скролл-триггеры, сложные сцены и кинематографичные переходы, которые цепляют внимание.
Оптимизация производительности
Несмотря на высокую эффективность GSAP, некорректное использование может привести к подтормаживаниям. Следуйте нескольким простым правилам: старайтесь анимировать только свойства, влияющие на композицию (transform и opacity), так как они не вызывают дорогостоящих перерасчетов макета. Избегайте в рамках одного stagger-набора анимации свойств вроде width, height или margin.
Кроме того, учитывайте общую длительность эффекта. Если у вас 50 элементов и stagger: 0.1, общее время, за которое завершится анимация последнего элемента, составит почти 5 секунд, что может быть слишком долго. Используйте параметр amount, чтобы жестко ограничить общее время распределения задержек, вне зависимости от количества элементов.
Пример 7
Правильная оптимизация: анимация только transform и opacity.
gsap.fromTo('.optimized-tile',
{ opacity: 0, scale: 0.8 },
{
opacity: 1,
scale: 1,
duration: 0.7,
stagger: {
each: 0.05,
from: 'edges',
grid: 'auto', // Автоматическая сетка
amount: 1.5 // Общее время stagger не превысит 1.5 секунды, даже если элементов много
}
}
);Всегда тестируйте анимацию на устройствах разной мощности. Используйте средства разработчика браузера (например, Performance в Chrome DevTools) для анализа частоты кадров. Помните, что грамотно примененный stagger — это не просто украшение, а инструмент для направления внимания пользователя и улучшения пользовательского опыта.
Часто задаваемые вопросы о stagger в GSAP
Можно ли применять stagger не только к to() и from(), но и к другим методам GSAP?
to() и from(), но и к другим методам GSAP?Да, параметр stagger можно использовать практически с любым методом анимации GSAP, включая fromTo(), set() и даже методы для работы с атрибутами или цветом. Это делает инструмент универсальным для создания последовательностей в самых разных сценариях.
Что произойдет, если я изменю свойство stagger на лету, в середине анимации?
stagger на лету, в середине анимации?GSAP не позволяет динамически менять параметры stagger после создания твина. Если вам нужно изменить логику последовательности, потребуется создать новую анимацию. Однако вы можете управлять временными параметрами всего твина, содержащего stagger, например, приостанавливать или перематывать его.
Как анимировать элементы в порядке, отличном от их следования в DOM?
Для этого нужно подготовить массив элементов в нужном вам порядке и передать его в GSAP вместо CSS-селектора. Вы можете отсортировать исходную коллекцию, полученную через document.querySelectorAll, по любому критерию: data-атрибуту, положению на странице или случайному числу.
Почему stagger не работает с моей коллекцией элементов?
stagger не работает с моей коллекцией элементов?Наиболее частые причины: передача в GSAP пустой коллекции элементов, ошибки в селекторе или попытка анимировать свойства, которые не могут быть анимированы (например, display). Всегда проверяйте консоль браузера на наличие ошибок и убедитесь, что ваши элементы существуют в DOM на момент выполнения кода.
Можно ли комбинировать stagger с Timeline?
stagger с Timeline?Конечно, и это очень мощная комбинация. Вы можете поместить твин с stagger на временную шкалу, чтобы точно позиционировать всю последовательность элементов относительно других анимаций. Это идеальный подход для построения сложных многоэтапных сцен.
Есть ли разница в производительности между stagger: 0.1 и stagger: {each: 0.1}?
Нет, разницы в производительности нет. Краткая запись (просто число) преобразуется внутри GSAP в объект с параметром each. Используйте тот формат, который удобнее для читаемости кода. Объектная нотация нужна только для доступа к расширенным настройкам, таким как from или grid.
Заключение
Освоили теорию и горите желанием применить stagger и другие мощные инструменты GSAP на практике? Чтобы не тратить месяцы на самостоятельные поиски и пробуксовки, приглашаем вас на наш комплексный онлайн-курс «Обучение GSAP с нуля до профи». В нем мы системно разбираем не только синтаксис, но и архитектуру сложных анимаций, оптимизацию и лучшие практики, позволяющие создавать по-настоящему впечатляющий и конкурентный digital-продукт. А если вам нужен готовый результат — сайт с безупречной динамикой и захватывающим пользовательским опытом — наша веб-студия готова реализовать ваш проект, взяв на себя все технические аспекты.