Оптимизация для обоих направлений

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

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

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

Использование одного контроллера для разных направлений

Одним из ключевых подходов является создание отдельного контроллера для каждого направления:

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

Такой подход предотвращает конфликт сцен и позволяет точно управлять анимациями для каждой оси. При этом сцены связываются с нужным контроллером через метод .addTo(controller):

var verticalScene = new ScrollMagic.Scene({
  triggerElement: "#verticalTrigger",
  duration: 500
}).setTween("#verticalElement", {opacity: 1}).addTo(verticalController);

var horizontalScene = new ScrollMagic.Scene({
  triggerElement: "#horizontalTrigger",
  duration: 800
}).setTween("#horizontalElement", {x: 200}).addTo(horizontalController);

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

При одновременной работе вертикального и горизонтального скролла важно минимизировать нагрузку на прослушку событий scroll:

  1. Дебаунсинг и троттлинг событий Для сложных сцен с большим количеством анимаций рекомендуется использовать requestAnimationFrame или сторонние утилиты для троттлинга:
window.addEventListener('scroll', throttle(updateScenes, 16));
  1. Использование tweenChanges Свойство tweenChanges: true позволяет плавно обновлять значения анимации без лишних пересчетов, что особенно критично при больших сценах с параллакс-эффектами.
var scene = new ScrollMagic.Scene({
  triggerElement: "#element",
  duration: 600
})
.setTween("#animatedElement", {x: 300}, {tweenChanges: true})
.addTo(controller);
  1. Оптимизация DOM и CSS Для горизонтальных анимаций лучше использовать transform: translateX и translateY, а не left или top, чтобы задействовать GPU и минимизировать перерисовку.

Синхронизация сцен разных направлений

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

horizontalScene.on("progress", function(event) {
  var progress = event.progress;
  verticalScene.progress(progress); // синхронизируем прогресс вертикальной сцены
});

Это позволяет создавать координированные анимации, например, слайдеры с параллаксом или сложные интерактивные эффекты, где положение по X влияет на движение по Y.

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

Для горизонтального скролла часто используют кастомные контейнеры, где overflow-x: scroll. В этом случае контроллеру необходимо указать container:

var horizontalController = new ScrollMagic.Controller({
  vertical: false,
  container: "#scrollContainer"
});

Сцены внутри этого контейнера будут отслеживать прокрутку именно элемента #scrollContainer, а не всей страницы. Это позволяет создавать локальные горизонтальные секции без влияния на основной вертикальный скролл.

Практические рекомендации по структуре сцен

  • Разделять сцены по направлениям для упрощения отладки.
  • Использовать минимальное количество сложных анимаций на одной сцене, особенно для мобильных устройств.
  • Проверять производительность через DevTools, обращая внимание на FPS и нагрузку на главный поток.

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

ScrollMagic идеально работает с GSAP, особенно при анимациях для обоих направлений. Важные моменты:

  • Для горизонтального скролла применяются свойства x и xPercent.
  • Для вертикального — y и yPercent.
  • Использование gsap.timeline() позволяет объединять несколько анимаций и контролировать их через единую сцену.
var tl = gsap.timeline();
tl.to("#element", {x: 400, duration: 1})
  .to("#element", {y: 200, duration: 1});

var scene = new ScrollMagic.Scene({
  triggerElement: "#trigger",
  duration: 1000
})
.setTween(tl)
.addTo(controller);

Такой подход обеспечивает плавные и отзывчивые анимации независимо от направления скролла.

Поддержка мобильных и сенсорных устройств

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

  • Сенсорные события на мобильных устройствах (touchstart, touchmove) могут конфликтовать с горизонтальными контейнерами.
  • Использование passive: true для событий скролла улучшает отзывчивость и предотвращает лаги.
  • Минимизация DOM-изменений внутри сцен для снижения нагрузки на GPU.

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

Оглавление