Состояние направления в событиях

В ScrollMagic ключевым элементом управления анимациями является сцена (Scene). Каждая сцена может отслеживать положение скролла относительно целевого элемента и вызывать определенные действия, такие как запуск анимации или добавление CSS-классов. Для точного управления важны два аспекта: состояние сцены и направление скролла.

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

Состояние сцены отражает текущее положение скролла относительно trigger point — точки, в которой сцена должна активироваться. В ScrollMagic сцена может находиться в одном из двух основных состояний:

  1. BEFORE – скролл находится выше триггерной точки, сцена еще не активирована.
  2. DURING – скролл находится между началом и концом сцены, сцена активна.
  3. AFTER – скролл прошел конец сцены, сцена завершена.

Эти состояния можно отслеживать с помощью события update или enter/leave:

var scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: 500
})
.on("enter leave", function(e) {
    console.log("Событие:", e.type, "Состояние сцены:", scene.state());
})
.addTo(controller);

Метод scene.state() возвращает строку "BEFORE" или "AFTER". Для промежуточного состояния "DURING" можно использовать событие progress:

scene.on("progress", function(e) {
    console.log("Прогресс сцены:", e.progress);
});

e.progress — это число от 0 до 1, отражающее, насколько пользователь прокрутил сцену.

Направление скролла

ScrollMagic позволяет определять направление прокрутки, что критично для обратной анимации или запуска событий только при движении вниз или вверх. Направление передается через свойство scrollDirection в объекте события:

scene.on("enter leave", function(e) {
    if(e.scrollDirection === "FORWARD") {
        console.log("Пользователь скроллит вниз");
    } else if(e.scrollDirection === "REVERSE") {
        console.log("Пользователь скроллит вверх");
    }
});

Значения scrollDirection:

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

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

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

ScrollMagic предоставляет ряд событий для точного контроля:

  1. enter – срабатывает, когда сцена входит в активное состояние.
  2. leave – срабатывает, когда сцена покидает активное состояние.
  3. start – триггер срабатывает в начале сцены.
  4. end – триггер срабатывает в конце сцены.
  5. progress – отслеживает прогресс сцены в диапазоне от 0 до 1.

Пример использования для динамического изменения класса элемента в зависимости от направления:

scene.on("enter leave", function(e) {
    var element = document.querySelector("#animateBox");
    if(e.scrollDirection === "FORWARD" && e.type === "enter") {
        element.classList.add("active");
    } else if(e.scrollDirection === "REVERSE" && e.type === "leave") {
        element.classList.remove("active");
    }
});

Практическое использование состояний и направлений

1. Анимации с обратным ходом

Для анимаций, где объект должен исчезать при обратном скролле, можно использовать scrollDirection совместно с progress:

scene.on("progress", function(e) {
    var opacity = e.progress;
    if(e.scrollDirection === "REVERSE") {
        opacity = 1 - e.progress;
    }
    document.querySelector("#fadeBox").style.opacity = opacity;
});

2. Сложные последовательности

Для цепочек анимаций можно использовать несколько сцен с разными triggerElement и duration. Отслеживание состояния каждой сцены позволяет запускать анимации только при достижении нужного состояния:

var scene1 = new ScrollMagic.Scene({ triggerElement: "#step1" });
var scene2 = new ScrollMagic.Scene({ triggerElement: "#step2" });

scene1.on("enter", () => console.log("Начало первой сцены"));
scene2.on("enter", () => console.log("Начало второй сцены"));

3. События с динамическим триггером

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

scene.on("enter leave", function(e) {
    if(e.type === "enter") {
        scene.triggerElement("#newTrigger");
    }
});

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

Важные моменты и советы

  • Состояние сцены не меняется мгновенно, если используется duration. Нужно учитывать progress для плавной анимации.
  • Направление прокрутки учитывается только внутри событий, таких как enter, leave и progress. Использование scene.state() отдельно не даст информации о направлении.
  • Комбинирование состояний и направлений позволяет создавать сложные интерактивные эффекты, например, анимацию параллакса, появление/исчезание элементов, прокрутку фонов и текстовых блоков.
  • Производительность: использование слишком многих сцен с обработкой событий на каждом пикселе скролла может снижать FPS. Оптимально комбинировать несколько логических действий в одной сцене.

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

Оглавление