Динамическое изменение триггеров

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

Свойство triggerElement и его динамическое управление

Каждый Scene в ScrollMagic создается с определённым триггерным элементом (triggerElement). Этот элемент определяет, где именно начинается сцена относительно скролла:

var scene = new ScrollMagic.Scene({
  triggerElement: "#section1",
  duration: 300
})
.setTween("#animate", {opacity: 1})
.addTo(controller);

По умолчанию triggerElement фиксирован, но ScrollMagic позволяет его изменять в любое время с помощью метода .triggerElement():

scene.triggerElement("#section2"); // смена триггера на другой элемент

Особенности динамической смены:

  • Изменение триггера автоматически пересчитывает положение сцены относительно скролла.
  • Если сцена уже была активирована, ScrollMagic корректно обновит её состояние при следующей прокрутке.

Изменение позиции триггера через triggerHook

triggerHook определяет точку появления сцены на экране и может принимать значения от 0 (верх страницы) до 1 (низ страницы):

var scene = new ScrollMagic.Scene({
  triggerElement: "#section",
  triggerHook: 0.5 // сцена активируется в середине экрана
});

Динамическое обновление triggerHook:

scene.triggerHook(0.8); // сдвиг точки активации вниз

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

Работа с длительностью сцены и её влиянием на триггер

Длительность сцены (duration) определяет промежуток скролла, на котором сцена активна. Она также может быть динамически изменена:

scene.duration(500); // задаем новую длительность

Сочетание динамического triggerElement и duration позволяет создавать сцены, которые адаптируются к контенту, меняющемуся по высоте или добавляющемуся динамически через AJAX.

Программное обновление сцены при изменении DOM

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

scene.refresh();
  • Обновляет внутренние расчёты ScrollMagic.
  • Должен вызываться после любых изменений DOM, влияющих на позицию триггеров.
  • Часто используется совместно с window.resize:
window.addEventListener('resize', () => {
  scene.refresh();
});

Динамическая логика с помощью событий enter и leave

Иногда необходимо менять триггер в зависимости от прокрутки или других условий. ScrollMagic предоставляет события сцены:

scene.on("enter", function (event) {
  if (someCondition) {
    scene.triggerElement("#newSection");
    scene.duration(400);
  }
});
  • Событие enter срабатывает, когда сцена входит в область видимости.
  • Событие leave — когда сцена выходит из области видимости.
  • Внутри обработчиков можно динамически подстраивать триггер и длительность сцены, создавая адаптивные анимации.

Связывание нескольких сцен с разными триггерами

Часто возникает ситуация, когда несколько анимаций должны запускаться по мере прокрутки разных блоков. ScrollMagic позволяет динамически менять триггеры для каждой сцены или использовать один и тот же объект Scene, перепривязывая его:

var sections = document.querySelectorAll(".section");
sections.forEach((section, index) => {
  scene.triggerElement(section);
  scene.duration(section.offsetHeight);
  scene.refresh();
});

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

Практические советы

  • Для динамических сайтов рекомендуется вызывать scene.refresh() после любых изменений DOM, особенно если элементы загружаются асинхронно.
  • Избегать постоянного пересоздания сцены. Лучше менять триггер через .triggerElement() и обновлять длительность.
  • Использовать triggerHook для точной настройки момента активации, особенно при адаптивной верстке.
  • Для сложных условий можно комбинировать события enter, leave и динамическую смену триггеров, создавая интерактивный скролл с изменяющимся поведением.

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

Оглавление