Событие start

Событие start — одно из ключевых событий сцены в библиотеке ScrollMagic. Оно сигнализирует о том, что сцена достигла точки активации (trigger point) и начала своё выполнение. Это событие особенно важно при построении интерактивных сценариев, синхронизированных со скроллом.

Момент срабатывания

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

  • triggerElement
  • triggerHook
  • offset

Фактически, start означает переход сцены из состояния “до начала” (BEFORE) в “активное” (DURING или AFTER, в зависимости от продолжительности).

Базовый пример использования

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    triggerHook: 0.5
})
.on("start", function (event) {
    console.log("Сцена началась");
})
.addTo(controller);

В этом примере обработчик события start будет вызван в момент, когда элемент с идентификатором #trigger достигнет середины viewport.

Объект события

В обработчик передаётся объект event, содержащий важную информацию о состоянии сцены:

  • event.type — тип события ("start")
  • event.target — ссылка на сцену (ScrollMagic.Scene)
  • event.progress — прогресс выполнения сцены (от 0 до 1)
  • event.scrollDirection — направление скролла ("FORWARD" или "REVERSE")

Пример:

.on("start", function (event) {
    console.log(event.type); // start
    console.log(event.progress); 
    console.log(event.scrollDirection);
});

Направление прокрутки и повторное срабатывание

Событие start может срабатывать несколько раз:

  • при прокрутке вниз (вход в сцену)
  • при прокрутке вверх (возврат к началу сцены)

Это поведение зависит от направления скролла:

.on("start", function (event) {
    if (event.scrollDirection === "FORWARD") {
        console.log("Вход в сцену сверху вниз");
    } else {
        console.log("Возврат к началу сцены снизу вверх");
    }
});

Связь с параметром duration

Поведение события start зависит от того, задана ли длительность сцены:

Без duration

duration: 0
  • Сцена считается мгновенной
  • start и end происходят практически одновременно
  • Используется для триггерных эффектов

С duration

duration: 300
  • start фиксирует начало диапазона сцены
  • end срабатывает позже, после прохождения всей длительности

Практические сценарии применения

1. Инициализация анимации

.on("start", function () {
    document.querySelector("#box").classList.add("animate");
});

Запуск CSS-анимации в момент появления элемента в зоне видимости.

2. Ленивое выполнение логики

.on("start", function () {
    loadHeavyComponent();
});

Загрузка ресурсоёмких компонентов только при необходимости.

3. Логирование пользовательского поведения

.on("start", function () {
    analytics.track("Scene Started");
});

Фиксация взаимодействий пользователя со страницей.

4. Управление классами

Хотя для этого существует .setClassToggle(), иногда требуется более гибкая логика:

.on("start", function (event) {
    if (event.scrollDirection === "FORWARD") {
        element.classList.add("active");
    } else {
        element.classList.remove("active");
    }
});

Отличие от события enter

Важно различать start и enter:

  • start — срабатывает строго в момент начала сцены
  • enter — срабатывает при входе в активную область сцены

При наличии duration:

  • start — точка начала
  • enter — может совпадать с start, но логически обозначает “вход”

Комбинирование с другими событиями

Событие start часто используется вместе с:

  • end — завершение сцены
  • progress — изменение прогресса
  • leave — выход из сцены

Пример комплексного отслеживания:

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

Особенности при использовании с reverse

Параметр reverse влияет на повторное срабатывание:

reverse: false
  • событие start сработает только один раз
  • повторного срабатывания при прокрутке вверх не будет
reverse: true
  • событие будет срабатывать при каждом пересечении триггера

Производительность и рекомендации

  • Избегать тяжёлых вычислений внутри обработчика
  • Минимизировать DOM-операции
  • При необходимости — использовать дебаунс или флаги

Пример защиты от повторного выполнения:

let triggered = false;

scene.on("start", function () {
    if (!triggered) {
        initAnimation();
        triggered = true;
    }
});

Отладка события

ScrollMagic предоставляет встроенные инструменты:

scene.addIndicators();

Позволяет визуально увидеть:

  • точку старта сцены
  • положение триггера
  • диапазон действия

Это значительно упрощает понимание момента срабатывания start.

Взаимодействие с несколькими сценами

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

  • сцены обрабатываются в порядке их расположения
  • start может вызываться последовательно для нескольких сцен при быстром скролле

Пример:

scene1.on("start", () => console.log("Scene 1 start"));
scene2.on("start", () => console.log("Scene 2 start"));

Внутреннее состояние сцены

Событие start связано с изменением состояния сцены:

  • BEFORE → DURING (или AFTER, если duration = 0)

Проверка состояния:

scene.state(); // BEFORE, DURING, AFTER

Частые ошибки

1. Отсутствие addTo(controller)

Сцена не будет работать без добавления в контроллер.

2. Неверный triggerElement

Если элемент не существует или неправильно выбран, событие не сработает.

3. Неправильный triggerHook

Значения вне диапазона [0, 1] приводят к непредсказуемому поведению.

Резюме поведения

  • start фиксирует точку начала сцены
  • срабатывает при пересечении триггера
  • зависит от направления прокрутки
  • может вызываться повторно
  • тесно связан с параметрами сцены и её длительностью

Событие start служит отправной точкой для запуска логики, привязанной к положению прокрутки, и является основой для построения сложных интерактивных интерфейсов.

Оглавление