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

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

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

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

var controller = new ScrollMagic.Controller();

Для горизонтальной прокрутки необходимо использовать CSS-трюки с контейнером, чтобы прокрутка шла по оси X, либо использовать horizontal: true в случае адаптации сторонних расширений ScrollMagic.

Горизонтальная прокрутка с вертикальной сцены

Чтобы реализовать эффект горизонтальной прокрутки, управляемой вертикальным скроллом, создаётся контейнер с фиксированной высотой, внутри которого элементы располагаются горизонтально:


  

    
Секция 1

    
Секция 2

    
Секция 3

  


.horizontal-wrapper {
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.horizontal-container {
  display: flex;
  width: 300%; /* 3 секции */
  transition: transform 0.3s ease-out;
}

.panel {
  width: 100vw;
  flex-shrink: 0;
}

Далее создаётся сцена ScrollMagic для управления трансформацией контейнера:

var horizontalScene = new ScrollMagic.Scene({
  triggerElement: ".horizontal-wrapper",
  triggerHook: "onLeave",
  duration: () => document.querySelector(".horizontal-container").scrollWidth - window.innerWidth
})
.setPin(".horizontal-wrapper")
.setTween(TweenMax.to(".horizontal-container", 1, {x: "-66.666%" })) // смещение на 2 панели
.addTo(controller);

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

  • setPin фиксирует контейнер на время анимации.
  • duration рассчитывается исходя из ширины всех внутренних секций.
  • TweenMax.to (или GSAP) управляет горизонтальным смещением контейнера.

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

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

// Вертикальная анимация
new ScrollMagic.Scene({
  triggerElement: "#vertical-section",
  duration: 500
})
.setTween(TweenMax.from("#vertical-section h2", 1, {opacity:0, y:50}))
.addTo(controller);

// Горизонтальная анимация внутри вертикального скролла
new ScrollMagic.Scene({
  triggerElement: ".horizontal-wrapper",
  triggerHook: "onEnter",
  duration: () => document.querySelector(".horizontal-container").scrollWidth - window.innerWidth
})
.setPin(".horizontal-wrapper")
.setTween(TweenMax.to(".horizontal-container", 1, {x: "-66.666%"}))
.addTo(controller);

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

Анимация отдельных элементов внутри горизонтальной секции

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

document.querySelectorAll(".panel").forEach((panel, index) => {
  new ScrollMagic.Scene({
    triggerElement: panel,
    triggerHook: 0.5,
    duration: "50%"
  })
  .setTween(TweenMax.from(panel.querySelector(".content"), 1, {scale: 0.8, opacity:0}))
  .addTo(controller);
});

Особенности:

  • Триггер внутри каждой панели позволяет запускать анимацию по мере появления.
  • triggerHook: 0.5 означает середину экрана как точку активации.
  • Можно комбинировать с горизонтальной анимацией, чтобы создавать эффект параллакса.

Управление отзывчивостью и адаптивностью

Горизонтальные сцены требуют динамического расчёта ширины, чтобы анимация корректно работала на разных устройствах:

function updateHorizontalScene() {
  horizontalScene.duration(document.querySelector(".horizontal-container").scrollWidth - window.innerWidth);
}

window.addEventListener("resize", updateHorizontalScene);

Без этой адаптации горизонтальная прокрутка будет некорректно работать при изменении размеров окна.

Сложные паттерны: комбинированный скролл с несколькими уровнями

Можно создавать цепочки сцен, где:

  1. Первая секция — вертикальная анимация текста.
  2. Вторая секция — горизонтальный скролл с несколькими панелями.
  3. Третья секция — вертикальная анимация отдельных элементов параллельно с горизонтальной прокруткой.

Используется принцип вложенных сцен и setPin, чтобы фиксировать нужные блоки, а GSAP управляет всеми трансформациями. Это позволяет создавать эффект “скролл-истории”, где движения по обеим осям управляются одним контроллером.

Оглавление