Навигация по горизонтали

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

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

Настройка контейнера для горизонтальной прокрутки

Для корректной работы горизонтальной прокрутки необходимо:

  1. Задать контейнеру фиксированную ширину и включить горизонтальный скролл через CSS:
.scroll-container {
  display: flex;
  overflow-x: scroll;
  width: 100vw;
  height: 100vh;
}

.scroll-section {
  min-width: 100vw;
  height: 100%;
  flex-shrink: 0;
}
  1. Обеспечить, чтобы все секции были выровнены горизонтально, используя display: flex; и flex-shrink: 0. Это создаёт эффект бесконечного горизонтального листания.

Создание контроллера ScrollMagic

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

const controller = new ScrollMagic.Controller();

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

Основной элемент работы — это сцена (ScrollMagic.Scene). Для горизонтальной анимации используются следующие параметры:

  • triggerElement — элемент, при котором начинается анимация;
  • duration — длина сцены, в пикселях или проценте страницы;
  • triggerHook — положение триггера на экране (от 0 до 1).

Пример создания сцены с горизонтальной анимацией:

const tween = gsap.to(".scroll-section", {
  x: "-100%", // смещаем контейнер по оси X
  ease: "none"
});

const scene = new ScrollMagic.Scene({
  triggerElement: ".scroll-container",
  triggerHook: 0,
  duration: "400%" // продолжительность горизонтального скролла
})
.setTween(tween)
.setPin(".scroll-container") // фиксируем контейнер при анимации
.addTo(controller);

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

  • x: "-100%" означает, что контейнер сдвигается на ширину одной секции. При нескольких секциях значение может быть увеличено пропорционально количеству.
  • setPin фиксирует контейнер на экране, создавая эффект «прокрутки внутри контейнера».
  • duration задаёт общую длину анимации. Для горизонтальной прокрутки удобно задавать длительность в процентах от ширины контейнера.

Работа с несколькими секциями

Чтобы анимация выглядела плавной при большом количестве секций, можно использовать цикл GSAP и массив элементов:

const sections = document.querySelectorAll(".scroll-section");

sections.forEach((section, index) => {
  const tween = gsap.to(section, {
    x: `-${index * 100}%`,
    ease: "none"
  });

  new ScrollMagic.Scene({
    triggerElement: section,
    triggerHook: 0.5,
    duration: "100%"
  })
  .setTween(tween)
  .addTo(controller);
});

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

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

Горизонтальная прокрутка может создавать нагрузку на рендеринг, поэтому важно:

  • Использовать transform: translateX вместо изменения left или margin-left. Это позволяет GPU ускорять анимацию.
  • Минимизировать количество DOM-элементов внутри горизонтального контейнера.
  • При большом количестве секций использовать lazy-loading контента, чтобы не загружать всё сразу.

Управление прокруткой через события

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

scene.on("progress", function(event) {
  console.log(`Прогресс: ${event.progress * 100}%`);
});

scene.on("enter", function() {
  console.log("Сцена активирована");
});

scene.on("leave", function() {
  console.log("Сцена завершена");
});

Эти события полезны для синхронизации других эффектов, например, изменения фона, запуск анимации текста или SVG-графики.

Адаптивная горизонтальная прокрутка

Для корректного отображения на разных экранах важно:

  • Пересчитывать ширину секций при изменении окна:
window.addEventListener("resize", () => {
  controller.update(true);
});
  • Использовать относительные единицы (vw, %) вместо фиксированных пикселей.
  • Проверять, что длительность сцены (duration) соответствует ширине контейнера на текущем экране.

Интеграция с GSAP и сложными эффектами

ScrollMagic отлично интегрируется с GSAP, что позволяет создавать:

  • параллакс-эффекты внутри горизонтальной прокрутки;
  • постепенное появление элементов (opacity, scale);
  • одновременную анимацию нескольких элементов с разными скоростями.

Пример одновременной анимации двух элементов:

const tl = gsap.timeline();
tl.to(".section1", { x: "-100%", ease: "none" })
  .to(".section2", { x: "-50%", opacity: 1, ease: "power1.out" }, "<");

new ScrollMagic.Scene({
  triggerElement: ".scroll-container",
  triggerHook: 0,
  duration: "200%"
})
.setTween(tl)
.setPin(".scroll-container")
.addTo(controller);

Использование timeline GSAP позволяет синхронизировать сложные движения разных элементов, создавая впечатляющий горизонтальный эффект.

Горизонтальная навигация с ScrollMagic даёт полный контроль над прокруткой и анимацией. Ключевыми аспектами являются правильная организация контейнера, использование translateX, фиксация через setPin, настройка duration и интеграция с GSAP для сложных анимационных последовательностей.

Оглавление