Nested элементы и stagger

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

Селекторы для вложенных элементов

Для анимации вложенных элементов можно использовать как стандартные CSS-селекторы, так и функции GSAP:

gsap.to(".parent .child", { 
  x: 100, 
  duration: 1 
});

Здесь .parent .child выбирает все элементы с классом child, находящиеся внутри элементов с классом parent. GSAP корректно анимирует каждую найденную ноду. Для динамических или уникальных вложенных элементов часто используется функция gsap.utils.toArray:

const children = gsap.utils.toArray(".parent .child");
gsap.to(children, { y: 50, duration: 1 });

Функция возвращает массив элементов, что позволяет применять анимации индивидуально или группами.

Структурированные анимации с использованием Timeline

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

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

tl.to(".parent .child1", { x: 100 })
  .to(".parent .child2", { y: 50 })
  .to(".parent .child3", { rotation: 45 });

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

Stagger для последовательной анимации

Stagger — мощный инструмент GSAP для анимации группы элементов с интервалом. Он автоматически распределяет анимации по времени, создавая эффект цепочки или волны.

gsap.to(".parent .child", {
  x: 100,
  duration: 1,
  stagger: 0.2
});
  • stagger: 0.2 задает задержку 0.2 секунды между стартами анимаций элементов.
  • Можно использовать отрицательные значения для обратного эффекта или функции для динамического расчета задержки:
gsap.to(".parent .child", {
  x: 100,
  duration: 1,
  stagger: i => i * 0.1
});

Здесь i — индекс элемента в массиве, что позволяет создавать кастомные временные схемы анимации.

Вложенные Timeline с Stagger

Для сложных интерфейсов удобно объединять вложенные Timeline с stagger-анимациями:

const parentTimeline = gsap.timeline();

document.querySelectorAll(".parent").forEach(parent => {
  const tl = gsap.timeline();
  tl.to(parent.querySelectorAll(".child"), {
    y: 50,
    opacity: 1,
    stagger: 0.1
  });
  parentTimeline.add(tl, "+=0.2");
});
  • Каждый родительский элемент получает собственный внутренний Timeline.
  • Внешний Timeline управляет последовательностью родительских элементов.
  • Stagger применяется индивидуально для дочерних элементов, создавая комплексные визуальные эффекты.

Комбинирование Nested элементы и Stagger

В GSAP можно комбинировать вложенные элементы и stagger для создания анимации с глубокой иерархией:

gsap.utils.toArray(".parent").forEach((parent, parentIndex) => {
  gsap.to(parent.querySelectorAll(".child"), {
    x: 100,
    opacity: 1,
    stagger: { each: 0.15, from: "start", grid: "auto" },
    delay: parentIndex * 0.5
  });
});
  • each — интервал между элементами.
  • from — направление начала stagger-а (“start”, “center”, “end”, “edges”).
  • grid — позволяет создавать эффект сетки для элементов в нескольких рядах.
  • delay для каждого родителя добавляет синхронизацию между группами элементов.

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

  • Использовать gsap.utils.toArray для надежного выбора элементов, особенно в динамически создаваемых DOM-структурах.
  • Для комплексных вложенных анимаций применять вложенные Timeline, чтобы избежать конфликтов и сохранить контроль.
  • Stagger удобен для создания «живой» анимации списка элементов без ручного управления каждой анимацией.
  • Для больших структур рекомендуется разбивать анимацию на подгруппы и комбинировать stagger с Timeline.

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

Оглавление