Scope для изоляции селекторов

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

Основное понятие scope

Scope — это область, в которой GSAP будет искать элементы по селекторам. По умолчанию, если передать строковый селектор в методы GSAP, поиск осуществляется по всему документу (document). Однако при сложных интерфейсах с повторяющимися классами или идентификаторами важно ограничить область действия анимации, чтобы избежать нежелательных эффектов.

Пример базового использования:

gsap.to(".box", {
  x: 100,
  duration: 2
});

В этом случае .box ищется по всему документу. Если на странице несколько секций с .box, все они анимируются одновременно.

Использование scope для ограничения области

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

gsap.to(".box", {
  x: 100,
  duration: 2,
  scope: document.querySelector("#section1")
});

Здесь .box будет найден только внутри элемента #section1. Элементы с таким же классом в других секциях не будут затронуты.

Анонимные функции и локальные контексты

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

const section = document.querySelector("#section2");

gsap.utils.toArray(".box", section).forEach(box => {
  gsap.to(box, {
    y: 50,
    duration: 1
  });
});

Метод gsap.utils.toArray принимает вторым аргументом контейнер, что позволяет сразу получать массив элементов в пределах конкретного узла.

Scope с таймлайнами

При работе с gsap.timeline() scope также можно задать через defaults или при инициализации отдельных анимаций:

const tl = gsap.timeline({
  defaults: { duration: 1 },
  scope: document.querySelector("#section3")
});

tl.to(".box", { x: 100 })
  .to(".circle", { y: 50 });

Все селекторы внутри этой таймлайна будут автоматически ограничены указанным контейнером.

Scope и компоненты UI

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

const container = this.$refs.componentRoot;

gsap.from(container.querySelectorAll(".item"), {
  opacity: 0,
  y: 20,
  stagger: 0.1,
  duration: 0.5
});

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

Преимущества использования scope

  1. Изоляция анимаций – гарантирует, что изменения коснутся только нужных элементов.
  2. Повышение производительности – поиск ограничен конкретным узлом, а не всем документом.
  3. Совместимость с компонентной архитектурой – упрощает интеграцию с React, Vue или Angular.
  4. Упрощение поддержки кода – меньше шансов на случайные конфликты при добавлении новых элементов.

Советы по практике

  • Для небольших проектов, где селекторы уникальны, scope можно не указывать.
  • Для сложных интерфейсов, повторяющихся блоков и динамических элементов использование scope критично.
  • Комбинируйте gsap.utils.toArray с локальными контейнерами для более чистого и понятного кода.
  • При работе с таймлайнами задавайте scope через defaults, чтобы избежать повторного указания контейнера в каждой анимации.

Использование scope в GSAP позволяет создавать управляемые, предсказуемые и изолированные анимации, значительно упрощая работу с большими и динамическими интерфейсами.

Оглавление