Особенности touch-событий

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

Основные touch-события в ScrollMagic

Браузеры на мобильных устройствах используют следующие события для взаимодействия с сенсорным экраном:

  • touchstart — возникает при первом контакте пальца с экраном.
  • touchmove — возникает при движении пальца по экрану.
  • touchend — возникает при завершении контакта пальца с экраном.
  • touchcancel — возникает, когда системное событие прерывает текущий touch, например, входящий звонок или системная анимация.

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

Инициализация контроллера с поддержкой touch

Основной объект в ScrollMagic — это Controller. Для корректной работы на сенсорных устройствах важно правильно задать параметры:

var controller = new ScrollMagic.Controller({
    vertical: true,       // вертикальная прокрутка
    globalSceneOptions: {
        triggerHook: 0.5  // позиция триггера
    },
    container: window,    // элемент, который слушает события scroll/touch
});

ScrollMagic автоматически определяет, что устройство поддерживает touch, и заменяет события scroll на комбинацию touchmove + touchstart + touchend. Однако можно вручную контролировать этот процесс через слушатели на контейнере.

Проблемы с touch и их решение

1. “Дребезг” прокрутки

На мобильных устройствах часто возникает эффект дребезга (jittering) при быстром скролле пальцем. Он связан с частотой событий touchmove, которая может быть выше, чем частота перерисовки.

Решение:

Использовать requestAnimationFrame для оптимизации обновлений:

var latestScrollY = 0;
var ticking = false;

window.addEventListener('touchmove', function(e) {
    latestScrollY = window.scrollY;
    if (!ticking) {
        requestAnimationFrame(updateScene);
        ticking = true;
    }
});

function updateScene() {
    controller.update(true); // обновление сцен ScrollMagic
    ticking = false;
}

2. Проблемы с inertia (инерцией)

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

Методы компенсации:

  • Использовать duration: "100%" или динамическое вычисление длительности сцены для плавного триггера.
  • Подключать requestAnimationFrame для постоянного обновления состояния сцены, даже при инерционном движении.

3. Ограничения контейнера

Если ScrollMagic управляет сценами внутри прокручиваемого контейнера (не window), важно убедиться, что CSS свойства overflow и touch-action настроены корректно:

.scroll-container {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; /* плавная инерция в iOS */
    touch-action: pan-y; /* блокировка горизонтального жеста */
}
  • -webkit-overflow-scrolling: touch обеспечивает плавную инерцию на iOS.
  • touch-action: pan-y предотвращает конфликт с горизонтальными свайпами.

Специальные методы для touch в ScrollMagic

  1. .update(force) — обновляет состояние всех сцен. На мобильных устройствах рекомендуется вызывать после событий touchmove для устранения задержки.
  2. .enabled(true/false) — временно отключает обработку событий. Полезно при необходимости временно блокировать анимации во время быстрого свайпа.
  3. .scrollTo(position) — совместим с touch-контейнерами и позволяет программно прокручивать сцену, учитывая инерцию.

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

  • Минимизировать сложные анимации при быстром touch-scroll, так как мобильные устройства имеют ограниченные ресурсы.
  • Использовать сцены с triggerHook между 0 и 1 для гибкой адаптации под touch.
  • Комбинировать ScrollMagic с библиотеками оптимизации производительности (GSAP, Velocity) для плавного исполнения анимаций на мобильных устройствах.
  • Обновлять размеры триггеров через controller.update() при изменении ориентации экрана.

Touch-события в ScrollMagic — это не отдельный модуль, а адаптивная обработка стандартного scroll-потока для сенсорных экранов. Понимание особенностей событий touchstart, touchmove и инерционной прокрутки позволяет создавать гладкие, отзывчивые анимации на мобильных устройствах без дополнительной сложной логики.

Оглавление