Триггеры при горизонтальном скролле

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

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

Для работы с горизонтальным скроллом важно правильно подготовить контейнер. Обычно используется overflow-x: scroll и фиксированная ширина контента. Пример HTML-разметки:

<div class="scroll-container">
  <section class="panel" id="panel1"></section>
  <section class="panel" id="panel2"></section>
  <section class="panel" id="panel3"></section>
</div>

CSS для горизонтального скролла:

.scroll-container {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  width: 100%;
  height: 100vh;
}

.panel {
  flex: 0 0 100%;
  height: 100%;
}

Здесь каждый .panel занимает всю ширину окна, а контейнер обеспечивает горизонтальную прокрутку.

Инициализация ScrollMagic с горизонтальным скроллом

По умолчанию ScrollMagic использует вертикальный скролл страницы. Для горизонтальной прокрутки нужно задать контроллер с vertical: false и указать container:

var controller = new ScrollMagic.Controller({
  vertical: false,
  container: document.querySelector(".scroll-container")
});

Параметр vertical: false сообщает библиотеке, что движение будет происходить по оси X.

Создание сцен с горизонтальными триггерами

Сцена (Scene) — основной объект, который отслеживает позицию и запускает анимацию. Для горизонтального скролла важны следующие ключевые параметры:

  • triggerElement — элемент, относительно которого запускается триггер.
  • duration — длина сцены в пикселях горизонтального скролла.
  • offset — смещение начала сцены относительно triggerElement.

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

var scene = new ScrollMagic.Scene({
  triggerElement: "#panel2",
  triggerHook: 0.5, // середина контейнера
  duration: 300,    // 300px горизонтального скролла
  offset: 50
})
.setTween("#panel2", { x: -200 }) // сдвигаем блок по оси X
.addTo(controller);

Важное отличие от вертикального скролла — x и y координаты анимации ориентируются на горизонталь.

Использование setPin в горизонтальном скролле

Метод .setPin() позволяет закреплять элементы на месте во время прокрутки. При горизонтальном скролле setPin работает аналогично вертикальному:

new ScrollMagic.Scene({
  triggerElement: "#panel3",
  triggerHook: 0,
  duration: 500
})
.setPin("#panel3")
.addTo(controller);

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

Поддержка tween и GSAP-анимаций

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

var tween = gsap.timeline()
  .to("#panel1", { x: -100 })
  .to("#panel2", { x: -200 });

var scene = new ScrollMagic.Scene({
  triggerElement: ".scroll-container",
  duration: 800,
  triggerHook: 0
})
.setTween(tween)
.addTo(controller);

GSAP автоматически учитывает координаты по оси X, что упрощает создание сложных последовательностей анимаций.

Динамическое определение триггеров

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

var scene = new ScrollMagic.Scene({
  triggerElement: () => document.querySelector("#panel2"),
  duration: () => window.innerWidth / 2
})
.setTween("#panel2", { x: -150 })
.addTo(controller);

Это позволяет сцены адаптироваться к ширине экрана и размерам контейнера, делая анимацию отзывчивой.

Обработка событий и отладка

ScrollMagic предоставляет события enter, leave, start, end для отслеживания состояния сцены. Например:

scene.on("enter", () => console.log("Элемент достигнут по горизонтали"));
scene.on("leave", () => console.log("Элемент покинут"));

Для отладки удобно использовать .addIndicators(), который визуально показывает триггеры и длительность сцены:

scene.addIndicators({name: "panel2 horizontal"});

Практические советы при горизонтальном скролле

  • Устанавливать white-space: nowrap или display: flex для контейнера.
  • Контролировать ширину элементов, чтобы они корректно отображались при горизонтальной прокрутке.
  • Использовать triggerHook: 0 или 0.5 для точного позиционирования.
  • Проверять производительность на мобильных устройствах: горизонтальный скролл может быть ресурсоёмким.

Горизонтальные триггеры в ScrollMagic открывают возможность создания сложных интерфейсов: слайдеров, параллаксов, горизонтальных лендингов. Комбинация Controller с vertical: false, Scene, setPin и GSAP-анимаций позволяет гибко управлять поведением элементов и создавать динамичный пользовательский опыт.

Оглавление