Морфинг и трансформации

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

Использование TweenJS и GSAP для анимаций

Для реализации трансформаций чаще всего применяется интеграция GSAP (GreenSock Animation Platform) с ScrollMagic. Tween’ы позволяют анимировать CSS-свойства или SVG-параметры, а ScrollMagic управляет моментом запуска анимации.

Пример создания базового Tween’а:

// Подключение GSAP
const tween = gsap.to(".box", {
  x: 300,
  rotation: 360,
  scale: 1.5,
  duration: 2,
  ease: "power1.inOut"
});

В данном примере .box плавно перемещается на 300 пикселей вправо, вращается на 360° и увеличивается в 1.5 раза. Tween создаёт основу для привязки к ScrollMagic-сцене.

Создание сцены ScrollMagic

Сцена отвечает за точку начала, конец и продолжительность анимации при скролле:

const controller = new ScrollMagic.Controller();

const scene = new ScrollMagic.Scene({
  triggerElement: "#trigger",
  duration: 500, // Длина анимации в пикселях прокрутки
  triggerHook: 0.5 // Начало анимации в центре экрана
})
.setTween(tween)
.addTo(controller);

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

  • triggerElement — элемент, при котором начинается анимация.
  • duration — длина анимации, определяет, на какой протяжённости прокрутки Tween будет полностью выполнен.
  • triggerHook — точка на экране (0 = верх, 1 = низ), в которой сцена активируется.

Морфинг SVG элементов

Для морфинга фигур SVG используется Tween с анимацией атрибутов d:

const svgTween = gsap.to("#svgPath", {
  duration: 1,
  attr: { d: "M10,80 C40,10 65,10 95,80 S150,150 180,80" },
  ease: "power1.inOut"
});

const svgScene = new ScrollMagic.Scene({
  triggerElement: "#svgTrigger",
  duration: 400
})
.setTween(svgTween)
.addTo(controller);

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

  • Начальный и конечный d должны иметь одинаковое количество контрольных точек.
  • Без согласования точек морфинг будет некорректным или резко дергаться.
  • Можно комбинировать с прозрачностью, масштабом и поворотом для сложных эффектов.

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

ScrollMagic позволяет объединять несколько Tween’ов в Timeline, создавая последовательные или параллельные трансформации:

const timeline = gsap.timeline();
timeline
  .to(".box", { x: 200, duration: 1 })
  .to(".box", { rotation: 180, scale: 1.2, duration: 1 }, "-=0.5");

const scene = new ScrollMagic.Scene({
  triggerElement: "#trigger",
  duration: 600
})
.setTween(timeline)
.addTo(controller);
  • "-=0.5" запускает вторую анимацию за 0.5 секунды до конца первой, создавая плавный переход.
  • Timeline упрощает управление сложными анимациями и синхронизацию морфинга нескольких элементов.

Трансформации CSS свойств

Помимо SVG, можно анимировать любые CSS-свойства:

  • transform: translate, rotate, scale — для движения и масштабирования.
  • opacity — для плавного появления/исчезновения.
  • filter: blur(), hue-rotate() — для динамических визуальных эффектов.

Пример:

const cssTween = gsap.to(".image", {
  x: 150,
  y: 50,
  rotation: 45,
  scale: 1.3,
  opacity: 0.8,
  duration: 2
});

const cssScene = new ScrollMagic.Scene({
  triggerElement: "#imageTrigger",
  duration: 500
})
.setTween(cssTween)
.addTo(controller);

Интерактивные морфинги с динамическими значениями

Использование функции вместо фиксированных значений позволяет менять свойства динамически:

gsap.to(".circle", {
  x: () => window.innerWidth / 2,
  scale: () => Math.random() * 2,
  duration: 1
});
  • ScrollMagic передает прогресс прокрутки к Tween’у, и свойства пересчитываются на лету.
  • Это даёт возможность создавать адаптивные, интерактивные трансформации.

Сложные комбинации: Pinning и Morph

Комбинирование pinning и морфинга позволяет фиксировать элемент и одновременно изменять его свойства при прокрутке:

const pinScene = new ScrollMagic.Scene({
  triggerElement: "#pinTrigger",
  duration: 800,
  triggerHook: 0
})
.setPin("#pinElement")
.setTween(gsap.to("#pinElement", { scale: 2, rotation: 360 }))
.addTo(controller);
  • setPin фиксирует элемент на экране.
  • В это время Tween плавно изменяет трансформации, создавая эффект «залипания с анимацией».
  • Продолжительность сцены определяет скорость и протяжённость эффекта.

Практические советы по морфингу

  1. Всегда использовать GSAP для сложных морфингов, так как нативные CSS-анимации не поддерживают атрибут d для SVG.
  2. Синхронизировать длительность Tween и длительность сцены.
  3. Для нескольких элементов лучше создавать Timeline вместо отдельных Tween’ов.
  4. Проверять соответствие контрольных точек при морфинге SVG.
  5. Комбинировать с фильтрами и opacity для усиления визуального эффекта.

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

Оглавление