События и коллбэки

ScrollMagic предоставляет мощный механизм управления событиями, который позволяет отслеживать изменения состояния сцены и выполнять действия в момент наступления определённых событий. Основные события делятся на события сцены (Scene) и события контроллера (Controller), каждое из которых имеет своё назначение и методы обработки.

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

Сцена (Scene) — это центральная единица управления анимацией при прокрутке. События сцены позволяют реагировать на её изменения и взаимодействие пользователя с элементами страницы.

1. start и end

События start и end происходят, когда скролл достигает начала или конца сцены.

var scene = new ScrollMagic.Scene({ triggerElement: "#trigger" })
    .on("start", function (event) {
        console.log("Сцена началась", event.scrollDirection);
    })
    .on("end", function (event) {
        console.log("Сцена завершена", event.scrollDirection);
    })
    .addTo(controller);
  • event.scrollDirection — указывает направление прокрутки ("FORWARD" или "REVERSE").
  • Эти события срабатывают однократно при пересечении границ сцены, но могут повторяться при возврате скролла назад.

2. enter и leave

Событие enter срабатывает, когда пользователь входит в область сцены, а leave — когда покидает её.

scene.on("enter", function (event) {
    console.log("Пользователь вошёл в сцену");
});

scene.on("leave", function (event) {
    console.log("Пользователь покинул сцену");
});

Особенность этих событий в том, что они учитывают направление скролла, поэтому можно различать вход при прокрутке вниз и вверх.

3. progress

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

scene.on("progress", function (event) {
    console.log("Прогресс сцены:", event.progress);
});
  • event.progress — число от 0 до 1, показывающее процент прохождения сцены.
  • Используется для анимаций, синхронизированных с прокруткой, например, для плавного изменения CSS-свойств.

Коллбэки при инициализации сцены

ScrollMagic позволяет добавлять коллбэки не только через .on, но и в методах цепочки:

  • .setClassToggle(element, className) — добавляет или убирает CSS-класс при пересечении сцены.
  • .setTween(tween) — автоматически привязывает анимацию к сцене и прогрессу.
var scene = new ScrollMagic.Scene({ triggerElement: "#trigger", duration: 300 })
    .setClassToggle("#animate", "visible")
    .setTween("#animate", { opacity: 1, y: 50, duration: 1 })
    .addTo(controller);

В этом примере коллбэки событий сцены управляют классами и анимациями без отдельного подключения обработчиков on.

События контроллера

Контроллер (Controller) управляет всеми сценами и может отслеживать глобальные события прокрутки.

1. update

Срабатывает при каждом изменении состояния прокрутки:

controller.on("update", function (event) {
    console.log("Обновление контроллера. Скролл:", event.scrollPos);
});
  • event.scrollPos — текущая позиция скролла в пикселях.
  • Полезно для динамической синхронизации нескольких сцен и анимаций.

2. change

Срабатывает при изменении свойства контроллера, например, вертикальной ориентации или размеров:

controller.on("change", function (event) {
    console.log("Свойство контроллера изменилось:", event);
});

Принципы работы коллбэков

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

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

  3. Цепочки вызовов Методы setTween и setClassToggle позволяют минимизировать ручное управление событиями, автоматически создавая внутренние коллбэки.

  4. Удаление обработчиков Для предотвращения утечек памяти или конфликтов можно удалять обработчики через .off(eventName, callback).

scene.off("enter");

Примеры продвинутого использования

Анимация при входе и выходе

scene.on("enter", function () {
    gsap.to("#box", { scale: 1.2, duration: 0.5 });
});

scene.on("leave", function () {
    gsap.to("#box", { scale: 1, duration: 0.5 });
});

Прогресс-анимация

scene.on("progress", function (event) {
    gsap.to("#line", { strokeDashoffset: 100 * (1 - event.progress) });
});

Комбинирование нескольких сцен

var scene1 = new ScrollMagic.Scene({ triggerElement: "#section1" }).addTo(controller);
var scene2 = new ScrollMagic.Scene({ triggerElement: "#section2" }).addTo(controller);

controller.on("update", function () {
    console.log("Сцены обновлены:", scene1.progress(), scene2.progress());
});

События и коллбэки в ScrollMagic обеспечивают гибкое управление анимациями и состояниями элементов на странице. Основные принципы — правильное использование enter, leave, progress и глобальных событий контроллера, а также оптимизация через встроенные методы setTween и setClassToggle. Это позволяет создавать сложные интерактивные эффекты, полностью синхронизированные с прокруткой.

Оглавление