Реактивность и обновления

ScrollMagic строится вокруг концепции сцен (Scenes) и контроллеров (Controllers), которые управляют поведением элементов при скролле страницы. Реактивность означает способность сцены автоматически реагировать на изменения состояния, положения элемента или прокрутки и запускать соответствующие анимации или события.

Каждая сцена имеет ряд ключевых свойств, влияющих на реактивность:

  • triggerElement — DOM-элемент, относительно которого вычисляется начало сцены.
  • duration — протяженность сцены в пикселях. Если указано 0, сцена срабатывает мгновенно, при этом события привязаны только к точке входа.
  • offset — смещение относительно triggerElement, позволяющее запускать сцену раньше или позже.
  • reverse — логическое значение, определяющее, будет ли сцена реагировать при обратной прокрутке. По умолчанию true.

Сцены автоматически отслеживают позицию скролла и могут вызывать callback-функции при изменении состояния (enter, leave, start, end), что делает их реактивными к динамическим изменениям страницы.

Обновление сцены и контроллера

ScrollMagic предоставляет методы для обновления сцены после изменения DOM или размеров окна:

scene.update();
controller.update();
  • scene.update() — пересчитывает позиции и размеры элементов для конкретной сцены. Особенно важно при динамическом изменении контента внутри сцены.
  • controller.update() — обновляет все сцены, зарегистрированные на контроллере. Используется, если изменилось положение элементов по всей странице или после ресайза.

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

Методы управления реактивностью сцены

Сцена ScrollMagic предоставляет API для гибкого контроля её состояния:

  • setTween(tween) — связывает сцену с анимацией (обычно через GSAP). Анимация синхронизируется с текущей позицией скролла.

  • setPin(element, options) — фиксирует элемент на время сцены, создавая эффект “липкого” контента. Реактивность обеспечивается за счёт динамического расчета позиции при прокрутке.

  • addIndicators() — инструмент для разработки, визуализирующий начало, конец и текущую позицию сцены. Обновляется автоматически при изменении параметров сцены.

  • on(event, callback) — подписка на события сцены:

    • enter — вход в сцену
    • leave — выход из сцены
    • progress — изменение прогресса сцены (0–1)
    • start / end — начало и конец сцены

Использование progress позволяет создавать динамически реагирующие анимации, которые изменяются в реальном времени вместе со скроллом.

Интеграция с динамическим контентом

ScrollMagic хорошо справляется с реактивностью при изменении контента страницы, но требует ручного обновления сцен в следующих случаях:

  • Загружается контент через AJAX.
  • Элементы сцены меняют размеры.
  • Изменяется порядок элементов или смещение (offset).

Пример динамического обновления сцены после загрузки контента:

// Загрузка нового контента
fetch('/api/content')
  .then(res => res.text())
  .then(html => {
    document.querySelector('#container').innerHTML = html;
    scene.refresh(); // обновление позиции и размеров сцены
  });

Метод scene.refresh() пересчитывает положение triggerElement и длительность сцены, обеспечивая корректную реактивность после изменений.

События прокрутки и прогресса

Сцены ScrollMagic могут реагировать на изменения прогресса скролла в реальном времени:

scene.on('progress', function(event) {
    // event.progress — значение от 0 до 1
    gsap.to('.box', {scale: 1 + event.progress});
});
  • event.progress изменяется синхронно с прокруткой, что позволяет создавать гладкие и отзывчивые анимации.
  • При обратной прокрутке значение прогресса уменьшается, обеспечивая обратную реактивность.

Советы по поддержке реактивности

  1. Следить за размерами элементов: любые изменения размеров могут нарушить синхронизацию сцены.
  2. Использовать scene.update() после динамических изменений: это гарантирует, что сцена отреагирует на новые параметры.
  3. Контролировать повторное срабатывание событий: reverse: true позволяет сцене реагировать на движение в обе стороны, но может вызвать лишние вызовы callback.
  4. Комбинировать с tween-анимациями для плавной реактивности, особенно при параллакс-эффектах.

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

Оглавление