Методы управления: refresh(), enable(), disable()

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

Метод refresh()

Метод refresh() используется для повторного вычисления начальных и конечных значений анимации или прокрутки. Он особенно полезен при работе с ScrollTrigger или любыми анимациями, зависящими от размеров элементов.

Синтаксис:

ScrollTrigger.refresh();

Применение и особенности:

  • Пересчитывает позиции триггеров и размеры элементов, на которые они ссылаются.
  • Используется после изменения DOM, например, при динамическом добавлении элементов.
  • Гарантирует корректное срабатывание анимации после изменения контента страницы.

Пример:

gsap.to(".box", {
  x: 300,
  scrollTrigger: {
    trigger: ".box",
    start: "top center",
    end: "bottom top",
    scrub: true
  }
});

// После добавления новых элементов
ScrollTrigger.refresh();

В этом примере refresh() пересчитывает положение .box, учитывая новые размеры страницы.

Метод enable()

Метод enable() активирует ранее отключённую анимацию или триггер. Он позволяет временно приостанавливать анимацию без удаления её конфигурации.

Синтаксис:

scrollTriggerInstance.enable();

Применение и особенности:

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

Пример:

let trigger = ScrollTrigger.create({
  trigger: ".section",
  start: "top 80%",
  end: "bottom 20%",
  animation: gsap.to(".section", { opacity: 1 }),
  disabled: true
});

// Включение анимации после определённого события
trigger.enable();

После вызова enable() анимация вновь становится активной и реагирует на прокрутку.

Метод disable()

Метод disable() временно отключает анимацию или триггер. При этом конфигурация анимации сохраняется, что позволяет легко её восстановить с помощью enable().

Синтаксис:

scrollTriggerInstance.disable();

Применение и особенности:

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

Пример:

let trigger = ScrollTrigger.create({
  trigger: ".section",
  start: "top 80%",
  end: "bottom 20%",
  animation: gsap.to(".section", { opacity: 1 })
});

// Отключение анимации при малых разрешениях экрана
if(window.innerWidth < 768) {
  trigger.disable();
}

После вызова disable() анимация больше не реагирует на события прокрутки, но её настройки остаются в памяти для последующего включения.

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

  • Использовать refresh() при изменении размеров элементов или при динамическом добавлении/удалении контента, чтобы анимации оставались корректными.
  • enable() и disable() полезны для управления анимациями в зависимости от условий: устройства, пользовательских действий, состояния интерфейса.
  • Совмещение этих методов позволяет создавать адаптивные и производительные анимации без лишних перерасчётов и удаления анимаций.

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

Оглавление