Проверка триггеров

В ScrollMagic триггеры являются ключевыми точками, которые определяют момент срабатывания анимации или события на странице при прокрутке. Основным элементом управления триггерами является объект Scene. Создание сцены включает в себя установку triggerElement, triggerHook и опционально duration, которые управляют точкой начала, расположением триггера относительно окна и длиной действия сцены.

var scene = new ScrollMagic.Scene({
  triggerElement: "#trigger", // элемент, при достижении которого срабатывает сцена
  triggerHook: 0.5,           // позиция триггера (0 — верх, 1 — низ, 0.5 — середина)
  duration: 200                // длина действия сцены в пикселях
});
  • triggerElement — DOM-элемент или селектор, относительно которого вычисляется позиция триггера.
  • triggerHook — значение от 0 до 1, где 0 — верх экрана, 1 — низ. По умолчанию 0.5.
  • duration — длина сцены, определяющая, сколько пикселей прокрутки будет активна сцена. Если не задано, сцена срабатывает мгновенно.

Проверка срабатывания триггеров

Для контроля триггеров используются события сцены:

  • enter — срабатывает при пересечении триггера при прокрутке вниз.
  • leave — срабатывает при выходе триггера из зоны видимости при прокрутке.
  • start и end — опциональные события для отслеживания начала и конца сцены.
scene.on("enter leave", function(event) {
  console.log("Событие:", event.type, "позиция:", event.scrollDirection);
});

События позволяют отлаживать триггеры, проверять их позиции и корректно привязывать анимации к прокрутке. Для визуальной проверки можно использовать addIndicators, подключаемый через плагин debug.addIndicators.js:

scene.addIndicators({
  name: "Тест триггера",
  colorStart: "#FF0000",
  colorEnd: "#00FF00",
  indent: 10
});

Это позволяет видеть на странице реальные позиции начала и конца сцены, а также направление срабатывания.

Расширенные проверки

Использование нескольких триггеров на одной странице

Сцены можно объединять и проверять их последовательное срабатывание. Для этого создается несколько объектов Scene с разными triggerElement или triggerHook:

var scene1 = new ScrollMagic.Scene({ triggerElement: "#section1" }).addTo(controller);
var scene2 = new ScrollMagic.Scene({ triggerElement: "#section2" }).addTo(controller);

scene1.on("enter", () => console.log("Секция 1 активна"));
scene2.on("enter", () => console.log("Секция 2 активна"));

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

Проверка позиции триггера вручную

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

  • scene.scrollOffset() — возвращает текущую позицию сцены относительно начала страницы.
  • scene.triggerPosition() — вычисляет точку срабатывания триггера с учетом triggerHook и triggerElement.
console.log("Текущий оффсет сцены:", scene.scrollOffset());
console.log("Позиция триггера:", scene.triggerPosition());

Управление активностью сцены

Для тестирования триггеров важно уметь включать и отключать сцены:

scene.enabled(false); // отключение сцены
scene.enabled(true);  // повторное включение

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

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

  1. Начинать проверку с простых сцен — один триггер, небольшой duration.
  2. Использовать индикаторы — визуальные подсказки сильно упрощают отладку.
  3. Логирование событий — enter и leave показывают, когда триггер реально сработал.
  4. Проверять динамическое позиционирование — если элементы загружаются после скрипта, триггер может сработать некорректно.
  5. Учитывать размеры окна — при изменении window.innerHeight положение триггера меняется, особенно для triggerHook.

Интеграция с анимациями

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

var tween = gsap.to("#animate", { x: 400, duration: 1 });

scene.setTween(tween);

Проверка триггеров позволяет убедиться, что анимация начнется именно в момент пересечения элемента с заданной точкой на экране, а не раньше и не позже.

Работа с прокруткой в обе стороны

ScrollMagic отслеживает направление прокрутки через свойство event.scrollDirection:

  • "FORWARD" — прокрутка вниз или вправо.
  • "REVERSE" — прокрутка вверх или влево.

Это позволяет создавать интерактивные эффекты, реагирующие на направление движения:

scene.on("enter leave", function(e) {
  if(e.scrollDirection === "FORWARD") {
    console.log("Движение вниз — триггер сработал");
  } else {
    console.log("Движение вверх — триггер сработал");
  }
});

Использование таких проверок делает сцены адаптивными и управляемыми в сложных анимационных схемах.

Оглавление