Состояние сцены

В библиотеке ScrollMagic сцена (Scene) является ключевым элементом, определяющим момент срабатывания анимаций или других эффектов при прокрутке. Каждая сцена обладает состоянием, которое отражает её текущее положение относительно видимой области браузера. Понимание состояния сцены критично для точного управления поведением элементов на странице.

Состояния сцены

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

  1. BEFORE Сцена находится выше точки триггера, то есть пользователь ещё не прокрутил страницу до момента её активации. В этом состоянии активные действия, привязанные к сцене, не выполняются.

  2. DURING Сцена находится в зоне действия, когда прокрутка пересекла точку триггера и ещё не достигла конца длительности (duration). В этом состоянии обычно происходит анимация прогресса, которая синхронизируется с положением скролла.

  3. AFTER Сцена полностью пройдена, скролл находится ниже зоны действия сцены. Любые анимации, настроенные на окончание сцены, остаются в конечном состоянии.

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

Свойство state()

Метод state() позволяет получить текущее состояние сцены:

var currentState = scene.state(); // Вернёт 'BEFORE', 'DURING' или 'AFTER'

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

События, связанные с изменением состояния

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

  • enter – вызывается при входе сцены в зону действия (состояние DURING).
  • leave – вызывается при выходе из зоны действия (состояние AFTER или BEFORE).
  • start – срабатывает при достижении начала сцены (точки триггера).
  • end – срабатывает при достижении конца сцены (конца длительности).

Пример использования:

scene.on("enter", function (event) {
    console.log("Сцена активна:", event.scrollDirection);
});

scene.on("leave", function (event) {
    console.log("Сцена покинута:", event.scrollDirection);
});

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

Влияние параметра duration на состояние

Длительность сцены (duration) определяет, как долго сцена находится в состоянии DURING.

  • Если duration = 0, сцена мгновенно переходит из BEFORE в AFTER. Такой режим полезен для триггеров без анимации прогресса.
  • Если duration > 0, состояние DURING продолжается на протяжении указанного количества пикселей прокрутки, что позволяет анимировать элементы плавно.

Триггер и смещение

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

  • triggerElement – HTML-элемент, относительно которого сцена активируется.
  • triggerHook – позиция на экране (от 0 до 1), в которой срабатывает триггер. Например, 0 — верх окна, 1 — низ окна, 0.5 — центр.
  • offset – смещение относительно точки триггера, которое позволяет точно подгонять момент активации.

Пример:

var scene = new ScrollMagic.Scene({
    triggerElement: "#section",
    triggerHook: 0.25,
    duration: 300
});

В этом примере сцена активируется, когда верх элемента #section достигает 25% высоты окна, и остаётся в состоянии DURING на протяжении 300 пикселей прокрутки.

Проверка состояния сцены в реальном времени

Состояние сцены удобно использовать для условного изменения интерфейса:

scene.on("update", function(event) {
    if (scene.state() === "DURING") {
        document.body.classList.add("scrolled-active");
    } else {
        document.body.classList.remove("scrolled-active");
    }
});

Метод update вызывается каждый раз при скролле, а проверка scene.state() позволяет точно определить, когда пользователь находится внутри зоны действия сцены.

Сочетание состояний с анимацией

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

var tween = gsap.to("#box", {x: 500, rotation: 360});

scene.setTween(tween);
  • Пока сцена находится в состоянии DURING, прогресс анимации синхронизируется с прокруткой.
  • В состоянии BEFORE анимация остаётся в начальном положении.
  • В состоянии AFTER анимация завершена.

Таким образом, состояние сцены напрямую управляет визуальным результатом.

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

  • Использовать enter и leave для единовременных действий, а update для плавных анимаций.
  • Проверять scene.state() перед запуском критических операций, чтобы избежать непредсказуемого поведения при быстром скролле.
  • Настраивать duration, triggerHook и offset для точной синхронизации с макетом страницы.

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

Оглавление