Grid-распределение для двумерных массивов

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

Основы grid-распределения

Для построения двумерной сетки необходимо определить:

  • количество строк (rows)
  • количество столбцов (cols)
  • расстояние между элементами по горизонтали (gapX) и вертикали (gapY)

Каждый элемент сетки получает координаты x и y в зависимости от своей позиции в массиве:

const rows = 4;
const cols = 5;
const gapX = 100;
const gapY = 80;

elements.forEach((el, index) => {
  const row = Math.floor(index / cols);
  const col = index % cols;
  el.style.transform = `translate(${col * gapX}px, ${row * gapY}px)`;
});

В этом примере elements — это NodeList или массив DOM-элементов. Применение translate вместо прямого изменения left/top уменьшает нагрузку на рендеринг и повышает производительность анимации.

Анимация сетки с использованием GSAP

Для плавного появления элементов используется метод gsap.to или gsap.from. Наиболее часто применяется задержка, основанная на позиции в сетке, что создаёт эффект “волны” или “выпадения” элементов:

gsap.from(elements, {
  duration: 1,
  opacity: 0,
  y: 50,
  stagger: {
    grid: [rows, cols],
    from: "center",
    amount: 1.5
  },
  ease: "power2.out"
});

Ключевые моменты:

  • stagger.grid автоматически распределяет задержку по координатам сетки.
  • Параметр from задаёт точку старта анимации: "start", "center", "edges" или конкретный индекс.
  • amount регулирует суммарное время распределения задержки.

Продвинутая настройка распределения

Grid в GSAP поддерживает индивидуальные смещения и кастомные функции задержки:

gsap.from(elements, {
  duration: 0.8,
  opacity: 0,
  scale: 0.5,
  stagger: {
    grid: [rows, cols],
    from: "edges",
    each: 0.05,
    ease: "back.out(1.7)"
  }
});
  • each задаёт фиксированную задержку между элементами, а не общую.
  • Использование ease на уровне stagger позволяет получать более естественные кривые анимации при последовательном появлении элементов.

Создание анимации “по диагонали”

Для более сложных эффектов, таких как диагональное появление, используется кастомная функция stagger:

gsap.from(elements, {
  duration: 0.7,
  opacity: 0,
  y: 30,
  stagger: function(index, target, array) {
    const col = index % cols;
    const row = Math.floor(index / cols);
    return (row + col) * 0.1;
  }
});

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

Работа с динамическими сетками

При изменении количества элементов или размера контейнера часто требуется пересчёт координат:

function layoutGrid(elements, rows, cols, gapX, gapY) {
  elements.forEach((el, index) => {
    const row = Math.floor(index / cols);
    const col = index % cols;
    gsap.to(el, { x: col * gapX, y: row * gapY, duration: 0.5, ease: "power1.out" });
  });
}

Использование gsap.to для обновления позиции вместо прямого изменения стилей позволяет сохранить плавность анимации при динамических изменениях сетки.

Комбинирование с другими эффектами

Grid-распределение легко интегрируется с:

  • цветовыми эффектами: изменение фона или текста элементов по координатам
  • масштабированием и вращением: создание 3D-подобных сеток
  • клик-анимациями: реагирование на взаимодействие пользователя с элементами сетки

Пример цветовой анимации, зависящей от позиции:

elements.forEach((el, index) => {
  const col = index % cols;
  const row = Math.floor(index / cols);
  const hue = (row * 50 + col * 20) % 360;
  gsap.to(el, { backgroundColor: `hsl(${hue}, 70%, 50%)`, duration: 1 });
});

Такой подход позволяет создавать визуально сложные и согласованные паттерны с минимальным кодом.

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

Оглавление