Анимация path

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

Для реализации анимации по пути чаще всего используют комбинацию ScrollMagic и библиотеки GSAP (GreenSock Animation Platform), так как ScrollMagic сам по себе отвечает за триггеры прокрутки, а GSAP — за анимацию объектов.

Подготовка path

Путь движения объекта определяется с помощью SVG path. Пример простого пути в HTML:

<svg width="800" height="600" viewBox="0 0 800 600">
  <path id="motionPath" d="M50,300 C200,100 600,500 750,300" stroke="transparent" fill="none"/>
  <circle id="object" r="20" fill="red"/>
</svg>
  • M50,300 — стартовая точка пути.
  • C200,100 600,500 750,300 — кубическая кривизна Безье, задающая плавное движение.
  • circle#object — объект, который будет двигаться по пути.

Важно, чтобы путь был недоступен визуально, если он служит только для расчёта координат. Для этого используют stroke="transparent" или fill="none".

Преобразование path в координаты

GSAP предоставляет плагин MotionPathPlugin, который позволяет двигать элемент вдоль path:

gsap.registerPlugin(MotionPathPlugin);

gsap.to("#object", {
  duration: 1,
  motionPath: {
    path: "#motionPath",
    align: "#motionPath",
    autoRotate: true,
    alignOrigin: [0.5, 0.5]
  }
});

Ключевые параметры:

  • path — селектор или массив координат для движения.
  • align — выравнивание объекта по пути.
  • autoRotate — автоматическая ориентация объекта по направлению пути.
  • alignOrigin — точка привязки объекта для правильной поворачиваемости.

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

Чтобы синхронизировать движение объекта с прокруткой, создается ScrollMagic.Scene и связывается с GSAP-анимацией:

const controller = new ScrollMagic.Controller();

const tween = gsap.to("#object", {
  duration: 1,
  motionPath: {
    path: "#motionPath",
    align: "#motionPath",
    autoRotate: true,
    alignOrigin: [0.5, 0.5]
  },
  ease: "none"
});

const scene = new ScrollMagic.Scene({
  triggerElement: "#trigger",
  duration: 1000,
  triggerHook: 0
})
.setTween(tween)
.addTo(controller);

Объяснение параметров:

  • triggerElement — элемент, с которого начинается анимация.
  • duration — протяженность анимации в пикселях прокрутки. Чем больше значение, тем медленнее движение.
  • triggerHook — положение триггера на экране (0 — верх, 1 — низ).
  • setTween — связывает GSAP-анимацию с сценой ScrollMagic.

Контроль и обратная связь

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

scene.addIndicators({name: "Path Animation"});

Индикаторы помогают видеть, когда анимация начинается и заканчивается при скролле. Это полезно при отладке сложных path.

Продвинутые техники

  1. Динамическая скорость движения Используя ключевые кадры GSAP или кривые ease, можно задавать ускорение и замедление вдоль пути:
gsap.to("#object", {
  duration: 1,
  motionPath: {
    path: "#motionPath",
    align: "#motionPath",
    autoRotate: true
  },
  ease: "power1.inOut"
});
  1. Множественные объекты Несколько элементов могут следовать по одному path с разной задержкой (delay) или offset:
gsap.to(".objects", {
  motionPath: {
    path: "#motionPath",
    align: "#motionPath",
    autoRotate: true
  },
  stagger: 0.2,
  ease: "none"
});
  1. Изменение пути на лету Через JavaScript можно менять атрибут d у path и анимация будет автоматически подстраиваться:
document.querySelector("#motionPath").setAttribute("d", "M50,300 C400,50 400,550 750,300");
  1. Связь с другими анимациями ScrollMagic позволяет комбинировать path-анимацию с изменением opacity, scale или rotation:
gsap.to("#object", {
  motionPath: { path: "#motionPath", align: "#motionPath", autoRotate: true },
  scale: 1.5,
  rotation: 360,
  ease: "none"
});

Практические советы

  • Всегда использовать ease: "none" при привязке анимации к прокрутке, чтобы движение строго соответствовало скроллу.
  • Настраивать alignOrigin для точной центровки элемента на пути.
  • Для сложных кривых лучше использовать SVG path, а не абсолютные координаты.
  • Разделять логические анимации: движение по пути и дополнительные эффекты (цвет, размер, rotation), чтобы проще управлять сценами ScrollMagic.
  • Проверять адаптивность: path и объекты могут требовать пересчета при изменении размеров экрана.

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

Оглавление