Создание контекста: gsap.context()

gsap.context() является важным инструментом для управления анимациями в GSAP, особенно когда речь идет о динамических интерфейсах, компонентах фреймворков или повторном использовании анимаций. Он позволяет изолировать анимации и управлять их жизненным циклом, что особенно полезно при интеграции с React, Vue или другими современными библиотеками.

Основы gsap.context()

gsap.context() создаёт контекст анимаций, который позволяет:

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

Синтаксис базового использования:

let ctx = gsap.context(() => {
  gsap.to(".box", { x: 200, duration: 1 });
}, container);

Пояснения:

  • () => { ... } — функция, в которой создаются все анимации для данного контекста.
  • container — DOM-узел, относительно которого будут выполняться селекторы (.box будет искаться внутри container).
  • Возвращаемое значение ctx используется для управления и очистки анимаций.

Автоматическая очистка анимаций

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

ctx.revert();

Метод revert() отменяет все анимации, созданные внутри контекста, и возвращает элементы в исходное состояние. Это критически важно при работе с компонентами, которые часто монтируются и размонтируются, чтобы избежать утечек памяти и “висящих” анимаций.

Работа с локальными селекторами

Внутри контекста GSAP предоставляет возможность использовать локальные селекторы с помощью ctx.selector():

let ctx = gsap.context((self) => {
  let boxes = self.selector(".box");
  gsap.to(boxes, { x: 100, duration: 1 });
}, container);
  • self.selector(selector) выполняет поиск внутри контейнера, привязанного к контексту.
  • Это делает код более модульным и безопасным, особенно при наличии одинаковых классов в разных частях страницы.

Пример интеграции с React

import { useEffect, useRef } from "react";
import gsap from "gsap";

function AnimatedComponent() {
  const containerRef = useRef();

  useEffect(() => {
    const ctx = gsap.context(() => {
      gsap.to(".box", { x: 200, duration: 1 });
    }, containerRef);

    return () => ctx.revert();
  }, []);

  return (
    <div ref={containerRef}>
      <div className="box">Box</div>
    </div>
  );
}

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

  • Контекст создаётся в useEffect для безопасного доступа к DOM.
  • ctx.revert() вызывается при размонтировании компонента, что предотвращает зависание анимаций.
  • Все селекторы (.box) работают внутри containerRef, не влияя на другие элементы страницы.

Вложенные контексты

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

let ctx1 = gsap.context(() => {
  gsap.to(".outer", { x: 100, duration: 1 });

  let ctx2 = gsap.context(() => {
    gsap.to(".inner", { y: 50, duration: 0.5 });
  });
}, container);
  • ctx2 полностью независим от ctx1.
  • Каждый контекст можно очищать отдельно, что обеспечивает гибкость управления анимациями на разных уровнях интерфейса.

Дополнительные возможности

  • События жизненного цикла контекста: можно запускать функции при создании или уничтожении анимаций.
  • Поддержка GSAP timelines: любые gsap.timeline() внутри контекста автоматически привязываются к контейнеру.
  • Совместимость с ScrollTrigger: контекст помогает управлять scroll-анимациями для динамически создаваемых компонентов.
let ctx = gsap.context(() => {
  gsap.timeline({
    scrollTrigger: {
      trigger: ".box",
      start: "top center",
    }
  })
  .to(".box", { x: 300, duration: 2 });
}, container);

Практические рекомендации

  • Использовать контекст для каждого компонента или блока, где происходят анимации.
  • Применять ctx.revert() в методах очистки, чтобы избежать накопления анимаций.
  • Локальные селекторы упрощают поддержку больших проектов и предотвращают конфликты классов.
  • Для сложных интерфейсов строить иерархию контекстов, что улучшает читаемость и управляемость кода.

gsap.context() превращает управление анимациями из хаотичного процесса в структурированную систему, где каждая анимация живёт в своём изолированном пространстве и может быть безопасно создана и уничтожена без побочных эффектов.

Оглавление