Настройка горизонтального контроллера

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

Инициализация горизонтального контроллера

Для создания горизонтального контроллера используется конструктор ScrollMagic.Controller с указанием параметра vertical: false. Этот параметр сообщает библиотеке, что основной осью движения будет горизонтальная прокрутка.

var controller = new ScrollMagic.Controller({
    vertical: false, // Отключаем вертикальный режим
    globalSceneOptions: {
        triggerHook: "onEnter" // Триггер срабатывает при появлении элемента
    }
});

Ключевые моменты:

  • vertical: false — делает ось прокрутки горизонтальной. Без этого параметра библиотека будет работать только с вертикальным скроллом.
  • globalSceneOptions — позволяет задать общие настройки для всех сцен контроллера.

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

Сцены в ScrollMagic привязываются к элементам и триггерам, а также управляют временем анимации через свойство duration. Для горизонтального скролла необходимо учитывать смещение по оси X вместо Y.

var scene = new ScrollMagic.Scene({
    triggerElement: "#slide1", // Элемент, который запускает анимацию
    duration: 500,              // Длительность анимации в пикселях прокрутки
    offset: 0                   // Смещение от начала триггера
})
.setTween("#slide1", {x: 400}) // Перемещение по горизонтали на 400px
.addTo(controller);            // Добавление сцены в контроллер

Особенности работы:

  • Свойство x в setTween используется для горизонтального смещения элемента.
  • duration определяет, насколько «долго» будет действовать анимация по мере прокрутки.
  • offset смещает начало анимации относительно триггерного элемента.

Комбинация вертикального и горизонтального скролла

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

var horizontalController = new ScrollMagic.Controller({ vertical: false });
var verticalController = new ScrollMagic.Controller({ vertical: true });

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

Использование pin для фиксации элементов

Горизонтальный контроллер поддерживает фиксацию элементов на экране во время прокрутки. Параметр pin: true фиксирует элемент относительно окна просмотра, а pushFollowers управляет поведением следующих блоков.

var pinScene = new ScrollMagic.Scene({
    triggerElement: "#section",
    duration: 600
})
.setPin("#section", { pushFollowers: false })
.addTo(horizontalController);

Рекомендации:

  • pushFollowers: false — следующий контент не смещается, а элемент «накладывается» поверх.
  • Можно комбинировать с анимациями TweenMax или GSAP для плавного движения элементов по горизонтали.

Интеграция с GSAP

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

var timeline = gsap.timeline();
timeline.to("#slide1", {x: -300, duration: 1})
        .to("#slide2", {x: -300, duration: 1})
        .to("#slide3", {x: -300, duration: 1});

var scene = new ScrollMagic.Scene({
    triggerElement: "#slider",
    duration: 900
})
.setTween(timeline)
.addTo(horizontalController);

Пояснения:

  • timeline объединяет последовательные движения слайдов.
  • Длительность сцены duration должна соответствовать общей длине горизонтальной прокрутки.
  • Каждый .to() перемещает конкретный элемент по оси X, создавая эффект пролистывания.

Настройка чувствительности и плавности

Горизонтальный скролл может ощущаться «жестким» из-за низкой длины контента или слишком короткой сцены. Для улучшения пользовательского опыта можно:

  1. Увеличить duration сцены.
  2. Использовать функцию GSAP ease для сглаживания движения.
  3. Настроить CSS контейнера с overflow-x: scroll и white-space: nowrap, чтобы обеспечить горизонтальную прокрутку на мобильных и десктопах.
#slider {
    display: flex;
    overflow-x: scroll;
    scroll-behavior: smooth;
}

Отслеживание прогресса сцены

Для динамических интерфейсов полезно отслеживать прогресс горизонтальной анимации. ScrollMagic предоставляет метод .on("progress", callback):

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

Горизонтальный контроллер ScrollMagic открывает возможности для сложных слайдеров, анимационных лэндингов и интерактивных интерфейсов. Правильная настройка vertical: false, сцен, duration, offset и интеграция с GSAP позволяет добиться плавного и управляемого движения по оси X.

Оглавление