Порядок срабатывания событий

В основе работы библиотеки лежит связка Controller → Scene → события. Контроллер отслеживает положение прокрутки, сцены реагируют на изменения состояния и генерируют события в строго определённой последовательности.

Каждая сцена проходит через три ключевых состояния:

  • BEFORE — до точки старта сцены
  • DURING — в пределах длительности сцены
  • AFTER — после завершения сцены

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

Основные события Scene

ScrollMagic генерирует следующие события:

  • enter — вход в область сцены
  • leave — выход из области сцены
  • start — достижение начальной точки сцены
  • end — достижение конечной точки сцены
  • progress — изменение прогресса сцены (от 0 до 1)
  • update — обновление сцены при прокрутке
  • change — изменение параметров сцены
  • shift — изменение позиции сцены

Базовый порядок срабатывания

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

  1. enter
  2. start
  3. progress (многократно)
  4. end
  5. leave

При прокрутке вверх последовательность меняется:

  1. enter
  2. end
  3. progress (в обратном направлении)
  4. start
  5. leave

Детализация последовательности

1. Вход в сцену (enter)

Срабатывает в момент, когда сцена впервые становится активной.

Особенности:

  • Вызывается один раз при входе
  • Не зависит от направления (вверх или вниз)
scene.on("enter", function (event) {
    console.log("Вход в сцену");
});

2. Начало сцены (start)

Фиксирует достижение стартовой позиции.

Особенности:

  • Срабатывает сразу после enter при прокрутке вниз
  • При прокрутке вверх вызывается после progress

3. Прогресс (progress)

Самое часто вызываемое событие. Отражает текущее состояние сцены.

scene.on("progress", function (event) {
    console.log(event.progress);
});

Особенности:

  • Значение от 0 до 1
  • Вызывается при каждом изменении scroll-позиции
  • Может вызываться десятки раз за секунду

4. Конец сцены (end)

Фиксирует достижение конца сцены.

Особенности:

  • При прокрутке вниз вызывается перед leave
  • При прокрутке вверх — сразу после enter

5. Выход из сцены (leave)

Срабатывает при полном выходе из диапазона сцены.

scene.on("leave", function () {
    console.log("Выход из сцены");
});

Влияние направления прокрутки

Каждое событие получает параметр:

event.scrollDirection

Возможные значения:

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

Это позволяет различать сценарии:

scene.on("enter", function (event) {
    if (event.scrollDirection === "FORWARD") {
        console.log("Вход сверху");
    } else {
        console.log("Вход снизу");
    }
});

Порядок событий при разных типах сцен

Сцена без длительности (duration: 0)

Упрощённый порядок:

Прокрутка вниз:

  1. enter
  2. start
  3. leave

Прокрутка вверх:

  1. enter
  2. start
  3. leave

Особенность:

  • Нет событий progress и end

Сцена с длительностью (duration > 0)

Полный жизненный цикл:

Прокрутка вниз:

enter → start → progress → end → leave

Прокрутка вверх:

enter → end → progress → start → leave

Событие update и его место в цепочке

update вызывается каждый раз при изменении scroll-позиции, до остальных событий:

scene.on("update", function () {
    console.log("Обновление сцены");
});

Фактический порядок при прокрутке:

  1. update
  2. progress
  3. start / end
  4. enter / leave

События change и shift

change

Срабатывает при изменении параметров сцены:

scene.on("change", function (event) {
    console.log(event.what + " изменено");
});

Пример:

scene.duration(500); // вызовет change

shift

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

scene.on("shift", function () {
    console.log("Сцена смещена");
});

Причины:

  • изменение DOM
  • ресайз окна
  • изменение triggerElement

Практическая последовательность (пример)

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 300
})
.addTo(controller);

scene
.on("enter", () => console.log("enter"))
.on("start", () => console.log("start"))
.on("progress", e => console.log("progress:", e.progress))
.on("end", () => console.log("end"))
.on("leave", () => console.log("leave"));

При прокрутке вниз консоль покажет:

enter
start
progress: 0.1
progress: 0.2
...
progress: 1
end
leave

Важные нюансы порядка событий

1. enter и leave — границы активности

  • Используются для включения/выключения логики

2. start и end — точечные триггеры

  • Подходят для запуска анимаций

3. progress — непрерывное управление

  • Используется для синхронизации с прокруткой

4. update — самый ранний сигнал

  • Позволяет перехватывать изменения до остальных событий

Конфликты и гонки событий

При высокой скорости прокрутки события могут происходить почти одновременно. ScrollMagic гарантирует порядок, но:

  • progress может пропустить промежуточные значения
  • start и end могут сработать подряд без заметной задержки

Комбинирование событий

Часто используется комбинация:

scene.on("enter start", function () {
    // запуск логики
});

scene.on("leave end", function () {
    // завершение
});

Оптимизация обработки событий

Из-за высокой частоты вызовов:

  • избегается тяжёлая логика в progress
  • применяется throttling или debouncing
  • выносится логика в requestAnimationFrame

Итоговая схема порядка

Прокрутка вниз:

update → enter → start → progress → end → leave

Прокрутка вверх:

update → enter → end → progress → start → leave

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

Оглавление