Событие end

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

Общая логика работы

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

  • triggerElement — элемент, при достижении которого сцена активируется
  • duration — продолжительность сцены (в пикселях прокрутки)
  • offset — смещение относительно точки триггера

Событие end возникает, когда прокрутка достигает точки:

start + duration

Если duration равен 0, сцена считается мгновенной, и событие end практически совпадает с start.

Синтаксис использования

Подписка на событие end осуществляется через метод .on():

scene.on("end", function (event) {
    console.log("Сцена завершена");
});

Объект event содержит информацию о состоянии сцены в момент завершения.

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

При обработке end доступен объект события со следующими свойствами:

  • type — тип события ("end")
  • target — текущая сцена
  • progress — прогресс сцены (обычно равен 1)
  • state — состояние сцены (AFTER)
  • scrollDirection — направление прокрутки (FORWARD или REVERSE)

Пример:

scene.on("end", function (event) {
    console.log(event.state); // AFTER
    console.log(event.progress); // 1
});

Связь с состояниями сцены

Сцена в ScrollMagic может находиться в трёх состояниях:

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

Событие end соответствует переходу:

DURING → AFTER

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

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

Хотя end и leave часто используются вместе, между ними есть важное различие:

Событие Когда срабатывает
leave При выходе из сцены (в любом направлении)
end Только при достижении конца сцены

Пример:

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

scene.on("end", function () {
    console.log("Конец сцены");
});

При прокрутке назад событие leave сработает, а end — нет.

Работа с направлением прокрутки

Событие end особенно полезно в сочетании с направлением прокрутки:

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

Это позволяет различать поведение пользователя.

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

1. Завершение анимации

scene.on("end", function () {
    document.querySelector(".box").classList.add("finished");
});

Используется для добавления финального состояния после завершения анимации.

2. Запуск следующего этапа

scene.on("end", function () {
    nextScene.enabled(true);
});

Позволяет выстраивать последовательные сценарии.

3. Логирование и аналитика

scene.on("end", function () {
    console.log("Пользователь досмотрел секцию до конца");
});

Полезно для отслеживания поведения пользователя.

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

scene.on("end", function () {
    document.body.classList.remove("active-section");
});

Особенности при duration = 0

Если сцена имеет нулевую длительность:

new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 0
});
  • start и end происходят практически одновременно
  • событие end может быть сложно отследить визуально
  • чаще используется enter вместо end

Взаимодействие с pin и tween

При использовании setPin

Если сцена закрепляет элемент:

scene.setPin(".block");

Событие end означает момент, когда закрепление прекращается.

При использовании Tween

scene.setTween(".box", 1, { x: 200 });

Событие end соответствует завершению анимации (если синхронизирована с прокруткой).

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

1. Ожидание срабатывания при прокрутке вверх

Событие end не всегда вызывается при обратной прокрутке. Для отслеживания выхода лучше использовать leave.

2. Отсутствие duration

duration: 0

В этом случае end теряет практическую ценность.

3. Неправильное понимание момента срабатывания

end не означает «пользователь перестал скроллить» — это строго достижение конца сцены.

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

Часто используется вместе с другими событиями:

scene
    .on("start", () => console.log("Начало"))
    .on("progress", (e) => console.log(e.progress))
    .on("end", () => console.log("Конец"));

Такой подход позволяет полностью контролировать жизненный цикл сцены.

Внутренняя механика

ScrollMagic отслеживает позицию скролла и сравнивает её с границами сцены:

  • если scroll < start → BEFORE
  • если start ≤ scroll ≤ end → DURING
  • если scroll > end → AFTER

Переход в состояние AFTER инициирует событие end.

Роль в архитектуре ScrollMagic

Событие end:

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

Особенно важно в длинных интерактивных страницах, где поведение зависит от полного прохождения секции.

Оглавление