Callbacks в ScrollTrigger

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

Основные виды callbacks

В ScrollTrigger существует несколько типов callbacks, каждый из которых срабатывает в определённых ситуациях:

  • onEnter — вызывается, когда скролл достигает триггерного элемента с направления сверху вниз.
  • onLeave — срабатывает, когда элемент полностью выходит из видимой области вниз.
  • onEnterBack — активируется, когда скролл возвращается к элементу сверху вверх.
  • onLeaveBack — вызывается, когда элемент покидает видимую область сверху вверх.
  • onToggle — срабатывает при каждом изменении состояния активации триггера.
  • onUpdate — вызывается на каждом кадре при изменении скролла, передавая объект с информацией о прогрессе.
  • onRefresh — срабатывает после пересчета ScrollTrigger (например, при ресайзе окна).

Использование callbacks

Callbacks можно задавать непосредственно при создании ScrollTrigger или через методы ScrollTrigger.create() и ScrollTrigger.addEventListener().

Пример создания триггера с callbacks:

gsap.to(".box", {
  x: 400,
  scrollTrigger: {
    trigger: ".box",
    start: "top center",
    end: "bottom top",
    onEnter: () => console.log("Элемент вошёл в область видимости"),
    onLeave: () => console.log("Элемент покинул область видимости"),
    onEnterBack: () => console.log("Элемент вошёл обратно при скролле вверх"),
    onLeaveBack: () => console.log("Элемент вышел обратно при скролле вверх"),
    onUpdate: (self) => console.log("Прогресс:", self.progress)
  }
});

Передача параметров в callbacks

В callbacks ScrollTrigger передаётся объект self, который содержит всю информацию о текущем состоянии триггера:

  • self.progress — прогресс анимации от 0 до 1.
  • self.direction — направление скролла: 1 для вниз, -1 для вверх.
  • self.isActive — логическое значение, указывающее, активен ли триггер.
  • self.start и self.end — позиции начала и конца триггера относительно документа.
  • self.trigger — ссылка на DOM-элемент триггера.

Пример с использованием параметров:

scrollTrigger: {
  trigger: ".section",
  start: "top 80%",
  end: "bottom 20%",
  onUpdate: (self) => {
    console.log(`Прогресс: ${self.progress}, направление: ${self.direction}`);
    if (self.progress > 0.5) {
      self.trigger.style.backgroundColor = "lightblue";
    }
  }
}

Комбинирование анимаций с callbacks

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

gsap.from(".title", {
  y: -50,
  opacity: 0,
  duration: 1,
  scrollTrigger: {
    trigger: ".section",
    start: "top center",
    onEnter: () => gsap.to(".subtitle", { opacity: 1, y: 0, duration: 0.5 }),
    onLeaveBack: () => gsap.to(".subtitle", { opacity: 0, y: 20, duration: 0.5 })
  }
});

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

Оптимизация и производительность

  • Использование onUpdate требует аккуратности, так как она срабатывает на каждом кадре. Для сложных операций рекомендуется дебаунсинг или минимизация DOM-операций внутри callback.
  • Удаление триггеров с помощью ScrollTrigger.kill() автоматически убирает связанные callbacks, предотвращая утечки памяти.
  • Повторное использование функций через именованные callbacks улучшает читаемость и упрощает сопровождение кода.

Взаимодействие с другими методами ScrollTrigger

Callbacks можно комбинировать с методами управления триггером:

  • scrollTrigger.refresh() — пересчитывает позиции и повторно вызывает onRefresh.
  • scrollTrigger.kill() — удаляет триггер и все callbacks.
  • scrollTrigger.disable() и scrollTrigger.enable() — временно отключают или включают триггер без удаления.

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

Оглавление