stagger

В библиотеке Packery параметр stagger используется для создания плавной последовательной анимации при перестройке сетки элементов. Он задаёт задержку между началом анимации каждого элемента, что позволяет добиться эффекта «ступенчатого появления» или «волноподобного движения» элементов при изменении их положения.

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

Значение stagger задаётся в миллисекундах и передается как опция при инициализации Packery или при вызове метода layout():

var grid = document.querySelector('.grid');
var pckry = new Packery(grid, {
  itemSelector: '.grid-item',
  gutter: 10,
  stagger: 100 // задержка 100 мс между анимацией элементов
});
  • itemSelector — CSS-селектор для элементов сетки.
  • gutter — промежуток между элементами.
  • stagger — задержка в миллисекундах.

При задании stagger: 100 первый элемент начнёт анимацию сразу, второй — через 100 мс, третий — через 200 мс и так далее.

Использование с CSS-анимациями

Для корректного эффекта stagger важно настроить CSS-анимацию или переход:

.grid-item {
  transition: transform 0.4s ease;
}

Packery управляет позициями через CSS-свойство transform. Значение stagger регулирует момент применения новых трансформаций для каждого элемента.

Динамическое изменение значений

Опцию stagger можно изменять динамически при повторной перестройке сетки:

pckry.options.stagger = 50;
pckry.layout();

После вызова layout() элементы будут анимироваться с новой задержкой. Это удобно для создания адаптивной анимации при изменении количества элементов или размера контейнера.

Примеры комбинаций

  1. Stagger с разными эффектами движения Можно сочетать stagger с CSS-трансформациями типа scale или rotate для создания более выразительных анимаций:
.grid-item {
  transition: transform 0.5s ease, opacity 0.5s ease;
  opacity: 0;
}

.grid-item.is-positioned {
  opacity: 1;
}

Packery будет поочередно применять transform и изменять opacity в соответствии с задержкой stagger.

  1. Stagger при добавлении новых элементов При динамическом добавлении элементов в сетку можно использовать stagger для плавного «всплытия»:
var newItem = document.createElement('div');
newItem.className = 'grid-item';
grid.appendChild(newItem);

pckry.appended(newItem);
pckry.layout(); // анимация с учетом stagger

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

Совместимость с другими опциями

stagger хорошо работает совместно с опциями transitionDuration и gutter, но требует, чтобы:

  • Для элементов была настроена CSS-анимация или transition.
  • Packery применял transform для изменения позиции элементов.

Если transitionDuration меньше значения stagger, эффекта последовательной анимации может не быть заметно, так как элементы будут перемещаться слишком быстро.

Практические рекомендации

  • Значение stagger обычно выбирается в диапазоне 50–200 мс. Меньшие значения дают почти одновременное движение, большие — создают эффект волны.
  • При работе с большим количеством элементов чрезмерно высокий stagger может сделать анимацию слишком медленной.
  • Для мобильных устройств рекомендуется уменьшать stagger, чтобы не перегружать интерфейс и не замедлять отклик.

Взаимодействие с Masonry и Isotope

Packery совместим по архитектуре с Masonry и Isotope, и stagger работает аналогично в этих библиотеках, так как они используют аналогичный механизм расчёта позиций и CSS-трансформаций. Однако Packery обеспечивает более гибкую работу с свободным размещением элементов, поэтому эффект ступенчатой анимации выглядит естественнее, особенно при элементах разного размера.

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

Оглавление