Вложенные элементы и классы

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

Выбор вложенных элементов

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

gsap.to(".parent .child", { duration: 1, x: 100 });
  • .parent .child — выбирает все элементы с классом child, находящиеся внутри элементов с классом parent.
  • duration задаёт длительность анимации.
  • x перемещает элемент по горизонтали.

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

Анимация всех дочерних элементов

Для применения анимации ко всем дочерним элементам используется метод children() через GSAP или стандартный выбор DOM:

const parent = document.querySelector(".parent");
gsap.from(parent.children, { duration: 1, opacity: 0, y: 50, stagger: 0.2 });
  • parent.children возвращает HTMLCollection всех прямых дочерних элементов.
  • stagger задаёт задержку между началом анимации каждого дочернего элемента, создавая эффект последовательного появления.
  • opacity и y задают начальные параметры для плавного появления и движения элементов.

Работа с классами

GSAP позволяет изменять свойства элементов, управлять классами и создавать анимации на основе динамически изменяемых классов:

gsap.to(".box.active", { duration: 1, scale: 1.2 });
  • .box.active анимирует только те элементы, у которых одновременно есть классы box и active.
  • Анимации можно комбинировать с добавлением и удалением классов через GSAP:
gsap.set(".box", { className: "+=highlight" });
gsap.set(".box.active", { className: "-=highlight" });
  • +=highlight добавляет класс к текущим классам элемента.
  • -=highlight удаляет указанный класс.

Цепочка анимаций с вложенными элементами

GSAP Timeline (gsap.timeline()) позволяет создавать последовательные или параллельные анимации для групп элементов, включая вложенные:

const tl = gsap.timeline({ defaults: { duration: 0.5, ease: "power1.out" } });

tl.from(".parent .child", { y: 50, opacity: 0, stagger: 0.2 })
  .to(".parent .child", { rotation: 360, stagger: 0.1 });
  • timeline управляет последовательностью анимаций.
  • Параметр defaults задаёт общие свойства для всех шагов анимации.
  • Комбинация from и to позволяет создавать сложные эффекты с постепенным появлением и последующим преобразованием элементов.

Особенности анимации динамически добавляемых элементов

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

function animateNewItems() {
  const newItems = document.querySelectorAll(".parent .child.new");
  gsap.from(newItems, { opacity: 0, y: 50, stagger: 0.2 });
}
  • Селектор .new позволяет изолировать только недавно добавленные элементы.
  • Повторный вызов функции animateNewItems() обеспечит анимацию новых дочерних элементов без повторного воздействия на старые.

Анимация вложенных элементов с разными скоростями

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

gsap.to(".parent .child", {
  y: 100,
  duration: 1,
  stagger: (index, target, list) => index * 0.3
});
  • index — позиция элемента в коллекции.
  • target — текущий элемент.
  • list — вся коллекция выбранных элементов.
  • Это позволяет создавать сложные каскадные эффекты с разной скоростью движения для каждого дочернего элемента.

Использование refs для вложенных компонентов в JavaScript

В современных фреймворках (React, Vue) удобно использовать ссылки на DOM-элементы (ref) для управления вложенными элементами:

const parentRef = document.querySelector("#parent");

gsap.to(parentRef.querySelectorAll(".child"), { x: 200, duration: 1 });
  • Использование querySelectorAll на parentRef ограничивает выборку только вложенными элементами.
  • Такой подход минимизирует конфликты с другими элементами страницы и повышает производительность.

Заключение по технике работы

  • Для точного контроля анимации вложенных элементов необходимо сочетать CSS-селекторы и возможности GSAP по управлению коллекциями.
  • Управление классами позволяет создавать динамические визуальные эффекты без изменения DOM.
  • Использование timeline и stagger облегчает создание последовательных и каскадных анимаций.
  • Для динамически создаваемых элементов важно обновлять коллекции перед запуском анимации.

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

Оглавление