Синхронизация воспроизведения со скроллом

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

Сцена создаётся с помощью конструктора:

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",  // Элемент, от которого отсчитывается скролл
    duration: 300,               // Продолжительность сцены в пикселях скролла
    triggerHook: 0.5             // Положение триггера на экране (0 = верх, 1 = низ)
});

triggerElement задаёт точку, от которой начинается сцена, duration определяет, на сколько прокрученных пикселей сцена остаётся активной, а triggerHook — где на экране срабатывает триггер.

Добавление анимации к сцене

Для синхронизации анимаций со скроллом ScrollMagic часто используется вместе с GSAP. Например, плавное изменение прозрачности элемента:

var tween = gsap.to("#animate", {opacity: 1, duration: 1});

scene.setTween(tween)
     .addTo(controller);

Здесь setTween связывает сцену с анимацией. Когда пользователь прокручивает страницу, библиотека автоматически синхронизирует прогресс анимации с позицией скролла. Контроллер сцены создаётся так:

var controller = new ScrollMagic.Controller();

Контроллер управляет всеми сценами на странице и обеспечивает корректную синхронизацию при прокрутке.

Понимание прогресса сцены

Каждая сцена имеет свой progress — число от 0 до 1, показывающее, насколько пользователь продвинулся внутри сцены:

scene.on("progress", function(event) {
    console.log(event.progress); // Значение от 0 до 1
});

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

Использование классов для визуальных эффектов

ScrollMagic поддерживает автоматическое добавление CSS-классов при достижении сцены:

scene.setClassToggle("#element", "visible")
     .addTo(controller);

В момент, когда триггер достигает нужного положения, к элементу добавляется класс visible, а когда сцена заканчивается — класс удаляется. Это удобно для управления стилями без написания анимаций вручную.

Параллакс и движения элементов

Эффекты параллакса создаются путем синхронизации движения элементов с прогрессом скролла:

var tween = gsap.to("#parallax", {y: -200, ease: "none"});

new ScrollMagic.Scene({
    triggerElement: "#section",
    duration: 500
})
.setTween(tween)
.addTo(controller);

Элемент будет плавно смещаться вверх на 200 пикселей по мере прокрутки сцены. ease: “none” гарантирует линейное движение без замедлений и ускорений, что важно для точного контроля.

Множественные триггеры и сцены

На одной странице можно использовать десятки сцен, каждая со своими триггерами и анимациями:

var scene1 = new ScrollMagic.Scene({triggerElement: "#first", duration: 400})
                       .setTween("#first", {x: 100})
                       .addTo(controller);

var scene2 = new ScrollMagic.Scene({triggerElement: "#second", duration: 300})
                       .setTween("#second", {y: 50})
                       .addTo(controller);

Контроллер объединяет их в единую систему, автоматически синхронизируя анимации независимо друг от друга.

Интерактивность и обратные вызовы

ScrollMagic поддерживает события enter, leave, start, end, которые позволяют запускать функции в ключевых моментах сцены:

scene.on("enter", function() {
    console.log("Сцена началась");
});

scene.on("leave", function() {
    console.log("Сцена закончилась");
});

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

Привязка к динамическим элементам

Для элементов, которые создаются динамически или меняют размер, важно обновлять сцены:

scene.refresh();

Это пересчитывает позиции триггеров и корректно синхронизирует анимации с изменившейся разметкой страницы.

Синхронизация с горизонтальной прокруткой

ScrollMagic позволяет работать не только с вертикальной прокруткой. Для горизонтальных эффектов используется настройка контейнера:

var controller = new ScrollMagic.Controller({vertical: false});

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

Продвинутые трюки

  1. Pinning элементов — фиксация элемента на экране на время сцены:
scene.setPin("#pinned")
     .addTo(controller);

Элемент остаётся на экране, пока пользователь прокручивает сцену.

  1. Комбинированные анимации — последовательное воспроизведение нескольких tweens:
var timeline = gsap.timeline();
timeline.to("#box", {x: 100})
        .to("#box", {y: 50});

scene.setTween(timeline)
     .addTo(controller);
  1. Контроль скорости анимации — можно привязать скорость к прогрессу скролла:
scene.on("progress", function(e) {
    gsap.to("#fast", {x: e.progress * 300, duration: 0});
});

Оптимизация производительности

  • Использовать requestAnimationFrame внутри анимаций GSAP, чтобы избежать лагов.
  • Минимизировать количество сцен с длинной продолжительностью.
  • Группировать анимации в Timeline, чтобы уменьшить нагрузку на рендеринг.

ScrollMagic создаёт мощный инструмент для синхронизации любого визуального контента с прокруткой. Используя сцены, триггеры, tweens и события, можно создавать плавные, интерактивные интерфейсы, которые реагируют на движение пользователя по странице.

Оглавление