Сложные траектории движения

Библиотека ScrollMagic позволяет создавать динамические анимации на основе прокрутки страницы, где ключевым элементом является сцена (Scene). Для работы со сложными траекториями движения используется комбинация сцен, кривых анимации и взаимодействия с внешними анимационными библиотеками, такими как GSAP.

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

В ScrollMagic сцена связывает элемент триггера с анимацией. Для реализации сложной траектории необходимо использовать объект tween, который управляет изменением CSS-свойств элемента во времени прокрутки.

Пример базового определения сцены с анимацией:

const controller = new ScrollMagic.Controller();

const tween = gsap.to("#box", {
  x: 500,
  y: 300,
  rotation: 360,
  duration: 1
});

const scene = new ScrollMagic.Scene({
  triggerElement: "#trigger",
  duration: 800,
  offset: 50
})
.setTween(tween)
.addTo(controller);

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

  • x и y задают смещение по осям;
  • rotation — вращение элемента;
  • duration сцены определяет протяженность анимации относительно прокрутки страницы;
  • offset позволяет сдвинуть момент начала сцены относительно триггера.

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

Для движения по кривым применяются GSAP PathPlugin или прямое управление координатами через массивы точек. Пример движения элемента по кривой Безье:

gsap.registerPlugin(MotionPathPlugin);

const tween = gsap.to("#box", {
  duration: 1,
  motionPath: {
    path: [
      {x: 0, y: 0},
      {x: 200, y: 100},
      {x: 400, y: 0},
      {x: 600, y: 150}
    ],
    curviness: 1.5
  }
});

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

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

  • curviness определяет степень плавности кривой;
  • motionPath позволяет задавать сложные траектории с несколькими контрольными точками;
  • Совместно с ScrollMagic сцена растягивает анимацию по прокрутке страницы.

Комбинация нескольких анимаций

Сложные траектории часто требуют комбинации параллельных анимаций. Для этого используется Timeline GSAP:

const timeline = gsap.timeline();
timeline.to("#box", {x: 300, duration: 1})
        .to("#box", {y: 200, duration: 1})
        .to("#box", {rotation: 180, duration: 1});

const scene = new ScrollMagic.Scene({
  triggerElement: "#trigger",
  duration: 1200
})
.setTween(timeline)
.addTo(controller);

Важные моменты:

  • Timeline позволяет объединять последовательные и параллельные движения;
  • Каждое действие может иметь индивидуальную продолжительность и задержку;
  • Сцена ScrollMagic синхронизирует прокрутку с прогрессом timeline.

Влияние скорости прокрутки на движение

ScrollMagic автоматически масштабирует анимацию в зависимости от прокрутки страницы. Для точного контроля используется tween.progress():

scene.on("progress", function(event) {
  gsap.to("#box", {x: 500 * event.progress});
});

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

  • event.progress — значение от 0 до 1, отражающее степень завершения сцены;
  • Позволяет создавать зависимые движения или управлять элементами с нелинейной прогрессией;
  • Можно комбинировать с easing-функциями для динамического ускорения и замедления.

Сложные эффекты: параллакс и вращение по траектории

Параллакс-эффекты реализуются через смещение элементов на разной скорости относительно прокрутки:

gsap.to("#background", {
  y: "-50%",
  ease: "none",
  scrollTrigger: {
    trigger: "#trigger",
    start: "top top",
    end: "bottom top",
    scrub: true
  }
});

Для вращения объекта по кривой используется комбинация motionPath и rotation:

gsap.to("#planet", {
  duration: 1,
  motionPath: {
    path: [{x:0,y:0},{x:200,y:100},{x:400,y:0}],
    align: "#planet",
    autoRotate: true
  }
});

Выводы:

  • autoRotate: true автоматически вращает объект вдоль пути;
  • Параллакс достигается через разное масштабирование y или x относительно прокрутки;
  • Сложные траектории комбинируют движение, вращение и масштаб.

Оптимизация сложных анимаций

Для больших страниц с множеством сцен рекомендуется:

  • Использовать Controller один на всю страницу;
  • Минимизировать количество DOM-элементов с тяжелыми анимациями;
  • Применять pin только при необходимости фиксирования элементов;
  • Для кривых и motionPath использовать заранее рассчитанные координаты, чтобы уменьшить нагрузку на рендеринг.

Практические приемы

  1. Локальные таймлайны для каждого блока — позволяют создавать независимые секции с собственной сложной траекторией.
  2. Комбинация pin + motionPath — эффективна для эффекта “летящего объекта по экрану”, закрепленного на определенном участке.
  3. События сцены (enter, leave, progress) — дают возможность менять траекторию или параметры анимации в реальном времени.
  4. Ease функции GSAP — обеспечивают реалистичное ускорение, замедление и сглаживание кривой движения.

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

Оглавление