Targeting: выбор элементов для анимации

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

Основные способы указания элементов

GSAP позволяет работать с различными способами выбора элементов, включая селекторы CSS, DOM-элементы, NodeList и массивы элементов.

1. CSS-селекторы Использование селекторов является наиболее распространённым методом. GSAP поддерживает синтаксис querySelector/querySelectorAll.

gsap.to(".box", { x: 100, duration: 1 });
  • .box – класс элементов, к которым будет применяться анимация.
  • GSAP автоматически применяет анимацию ко всем найденным элементам, если селектор возвращает коллекцию.

2. DOM-элементы Можно передавать конкретные DOM-элементы напрямую:

const box = document.getElementById("box1");
gsap.to(box, { rotation: 45, duration: 2 });
  • Позволяет точечно управлять отдельными элементами.
  • Полезно, когда элемент динамически создается и не имеет уникального класса.

3. NodeList и массивы элементов NodeList (например, результат querySelectorAll) и обычные массивы тоже поддерживаются:

const boxes = document.querySelectorAll(".box");
gsap.to(boxes, { y: 50, duration: 1.5 });
  • GSAP автоматически обрабатывает каждое значение коллекции.
  • Можно комбинировать элементы разных селекторов в массиве:
gsap.to([document.getElementById("box1"), document.querySelectorAll(".box2")], {
  opacity: 0,
  duration: 1
});

Особенности выбора элементов

1. Динамические элементы Если элементы добавляются в DOM после инициализации скрипта, их выбор через селектор должен быть выполнен после создания элементов. Иначе GSAP не найдёт их.

const newBox = document.createElement("div");
newBox.classList.add("box");
document.body.appendChild(newBox);

gsap.to(".box", { x: 100, duration: 1 }); // теперь включит и новый элемент

2. Контекстный выбор GSAP поддерживает gsap.utils.toArray() для безопасного получения массивов элементов, особенно если нужно гарантировать работу с одной и той же коллекцией:

const boxesArray = gsap.utils.toArray(".box");
boxesArray.forEach(box => {
  gsap.to(box, { scale: 1.2, duration: 0.5 });
});
  • Преобразует NodeList или одиночный элемент в массив.
  • Обеспечивает единообразие при переборе элементов.

3. Функции для динамических целей GSAP позволяет использовать функцию для вычисления целей анимации на лету:

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

Взаимодействие с вложенными элементами

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

gsap.to(".container .item", { y: 20, duration: 1 });
  • Анимация применяется ко всем .item, находящимся внутри .container.
  • Поддерживаются любые уровни вложенности.

Совмещение с библиотекой jQuery

Если проект использует jQuery, GSAP корректно работает с jQuery-объектами:

gsap.to($(".box"), { rotation: 360, duration: 2 });
  • jQuery-объект автоматически преобразуется в массив DOM-элементов.
  • Сохраняется возможность использовать CSS-селекторы напрямую.

Селекторы в сложных сценах

При создании Timeline для последовательных анимаций выбор элементов может быть более динамичным:

const tl = gsap.timeline();
tl.to(".box1", { x: 100, duration: 1 })
  .to(".box2", { y: 50, duration: 1 });
  • Каждый шаг может использовать разные цели.
  • Timeline не требует заранее объединённого массива элементов.

Ключевые рекомендации

  • Использовать gsap.utils.toArray() для унификации работы с NodeList и массивами.
  • Для динамически создаваемых элементов выбирать цели после их добавления в DOM.
  • Функции как цели анимации позволяют создавать распределённые или случайные эффекты без ручного перебора.
  • Контекстные и вложенные селекторы помогают структурировать анимацию для сложных DOM-структур.

Выбор элементов — фундамент, от которого зависит эффективность и удобство анимации. Грамотно подобранная цель позволяет создавать плавные, масштабируемые и легко управляемые эффекты, минимизируя необходимость последующих исправлений кода.

Оглавление