Жесты и свайпы

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

Подключение ScrollMagic и зависимостей

Для работы с жестами требуется подключить саму библиотеку ScrollMagic и, при необходимости, GSAP для анимаций:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js"></script>

Для сенсорного контроля часто используют Hammer.js или нативные события touchstart, touchmove и touchend.

Создание контроллера и сцены

Контроллер в ScrollMagic управляет всеми сценами, включая сцены с жестами:

const controller = new ScrollMagic.Controller();

Сцена создаётся с параметрами triggerElement, duration и triggerHook, которые задают условия активации анимации:

const scene = new ScrollMagic.Scene({
  triggerElement: "#section1",
  duration: 300,
  triggerHook: 0.5
});

Обработка свайпов

Для отслеживания свайпов используют события touchstart и touchend. Разница координат по оси X или Y определяет направление свайпа.

let startX = 0;
let startY = 0;

document.addEventListener('touchstart', function(e) {
  startX = e.touches[0].clientX;
  startY = e.touches[0].clientY;
}, false);

document.addEventListener('touchend', function(e) {
  const endX = e.changedTouches[0].clientX;
  const endY = e.changedTouches[0].clientY;

  const deltaX = endX - startX;
  const deltaY = endY - startY;

  if (Math.abs(deltaX) > Math.abs(deltaY)) {
    if (deltaX > 50) {
      handleSwipe('right');
    } else if (deltaX < -50) {
      handleSwipe('left');
    }
  } else {
    if (deltaY > 50) {
      handleSwipe('down');
    } else if (deltaY < -50) {
      handleSwipe('up');
    }
  }
}, false);

Функция handleSwipe может запускать ScrollMagic-сцены или анимации GSAP:

function handleSwipe(direction) {
  switch(direction) {
    case 'left':
      gsap.to("#box", {x: -200, duration: 1});
      break;
    case 'right':
      gsap.to("#box", {x: 200, duration: 1});
      break;
    case 'up':
      gsap.to("#box", {y: -200, duration: 1});
      break;
    case 'down':
      gsap.to("#box", {y: 200, duration: 1});
      break;
  }
}

Интеграция свайпов с сценами ScrollMagic

Сцену можно запускать не только по скроллу, но и по событию свайпа, используя метод scene.trigger():

const swipeScene = new ScrollMagic.Scene({
  triggerElement: "#section2",
  duration: 400
}).setTween(gsap.to("#circle", {scale: 1.5, rotation: 360}));

function handleSwipe(direction) {
  if (direction === 'up') {
    swipeScene.trigger();
  }
}

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

Можно реализовать кастомную прокрутку с плавным скроллом через свайпы, изменяя позицию контроллера ScrollMagic:

let scrollPosition = 0;

function handleSwipe(direction) {
  if (direction === 'up') scrollPosition += 200;
  if (direction === 'down') scrollPosition -= 200;

  controller.scrollTo(scrollPosition);
}

// Поддержка плавного скролла
controller.scrollTo(function(newPos) {
  gsap.to(window, {scrollTo: {y: newPos}, duration: 1});
});

Расширенные техники: комбинация с GSAP

Сочетание ScrollMagic, GSAP и жестов позволяет создавать сложные интерактивные сцены:

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

Пример параллакса:

function handleSwipe(direction) {
  const distance = direction === 'up' ? -100 : 100;
  gsap.to("#background", {y: "+=" + distance, duration: 0.8, ease: "power2.out"});
}

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

  • Минимизировать количество сцен, создаваемых для одного блока, объединяя анимации в одну сцену.
  • Использовать will-change для элементов, подвергающихся частой трансформации.
  • Оптимизировать обработчики touchmove, добавляя passive: true к событию:
document.addEventListener('touchmove', function(e){}, {passive: true});
  • Для сложных свайпов с жесткой анимацией предпочтительно интегрировать Hammer.js для распознавания направлений и скорости, чтобы снизить количество вычислений вручную.

Практическая схема

  1. Создать Controller.
  2. Создать сцены с привязкой к элементам.
  3. Настроить обработчики touchstart и touchend для определения направления свайпа.
  4. Привязать действия к сценам или GSAP-анимациям.
  5. При необходимости использовать кастомную прокрутку с controller.scrollTo().
  6. Оптимизировать производительность и плавность через passive события и will-change.

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

Оглавление