Работа с группами элементов

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

Основные способы группировки элементов

  1. Массив DOM-элементов

    Любой набор элементов можно объединить в массив и передавать в функции GSAP. Например:

    const boxes = document.querySelectorAll('.box');
gsap.to(boxes, { x: 200, duration: 2, stagger: 0.2 });

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

    • stagger позволяет задать задержку между анимациями отдельных элементов в группе.
    • Анимации применяются одновременно, если stagger не указан.

  2. Класс или атрибут

    Вместо явного массива можно выбрать элементы по общему классу:

    gsap.to('.circle', { y: 100, rotation: 360, duration: 1.5, stagger: 0.1 });

    Это особенно удобно для динамически генерируемых списков элементов, где заранее неизвестно количество объектов.

  3. Timeline для группы элементов

    Timeline (gsap.timeline) позволяет создавать комплексные анимации с точным контролем последовательности:

    const tl = gsap.timeline({ defaults: { duration: 1 } });

tl.to('.item1', { x: 100 })
  .to('.item2', { y: 50 }, "<0.5")
  .to('.item3', { scale: 1.5 });

    Особенности:

    • Символ < задаёт смещение анимации относительно предыдущей.
    • Timeline позволяет объединять анимации различных элементов в одну последовательность и управлять всеми как единой сущностью (play, pause, reverse).

Стратегии синхронной и последовательной анимации

  • Синхронная анимация всех элементов:

    При использовании массивов или классов без stagger все элементы анимируются одновременно. Например:

    gsap.to('.box', { opacity: 0, duration: 1 });

    Весь набор мгновенно начинает исчезать, что удобно для мгновенных эффектов.

  • Последовательная анимация с stagger:

    Параметр stagger принимает числа, объекты или функции, позволяя гибко управлять интервалами:

    gsap.to('.box', {
  x: 100,
  stagger: {
    each: 0.3,
    from: "center",
    ease: "power1.inOut"
  }
});

    Здесь:

    • each задаёт интервал между анимациями.
    • from определяет порядок начала анимаций: "start", "center", "end", "random".
    • ease позволяет плавно управлять движением каждого элемента.

Контроль и манипуляция группами

GSAP позволяет управлять целыми группами после их анимации через возвращаемые объекты или timeline:

const boxesAnimation = gsap.to('.box', { x: 200, paused: true });

boxesAnimation.play();   // Запуск всех анимаций
boxesAnimation.reverse(); // Обратная анимация
boxesAnimation.progress(0.5); // Перемещение в середину анимации

Timeline обеспечивает ещё более высокий уровень контроля:

const tl = gsap.timeline({ paused: true });
tl.to('.item1', { x: 100 })
  .to('.item2', { y: 50 }, "-=0.5");

tl.play();

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

Динамическое создание анимаций для группы

Иногда набор элементов неизвестен заранее, тогда удобно использовать функцию для генерации анимаций:

document.querySelectorAll('.card').forEach((card, index) => {
  gsap.to(card, {
    y: 50,
    rotation: 10 * index,
    duration: 1,
    delay: index * 0.2
  });
});

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

Анимация с использованием массивов объектов с индивидуальными свойствами

GSAP поддерживает массив объектов с собственными свойствами:

gsap.to([
  { targets: '.box1', x: 100, rotation: 45 },
  { targets: '.box2', y: 50, scale: 1.2 },
  { targets: '.box3', opacity: 0.5 }
]);

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

Производительность при работе с группами

  • Для больших групп элементов рекомендуется использовать requestAnimationFrame внутри GSAP по умолчанию.
  • Использование will-change и CSS-трансформаций (translate, scale, rotate) минимизирует нагрузку на рендеринг.
  • Timeline помогает объединять множество анимаций в один цикл, что уменьшает количество вызовов движка.

Использование функций для динамических значений

GSAP позволяет вычислять параметры анимации на лету:

gsap.to('.box', {
  x: (i) => i * 50,
  y: (i, target) => target.offsetTop / 2,
  duration: 1
});
  • i — индекс элемента в массиве.
  • target — сам DOM-элемент.
  • Позволяет создавать уникальные эффекты для каждой единицы в группе при сохранении общей логики.

Объединение нескольких техник

Эффективные анимации больших интерфейсов часто комбинируют массивы, timeline и stagger:

const cards = document.querySelectorAll('.card');
const tl = gsap.timeline({ defaults: { duration: 1, ease: "power2.out" } });

tl.to(cards, { y: 20, stagger: 0.1 })
  .to(cards, { rotation: 15, stagger: { each: 0.05, from: "end" } })
  .to(cards, { scale: 1.1, stagger: 0.1 });

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

Оглавление