Морфинг SVG

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

Основные концепции

Для морфинга SVG в ScrollMagic важно понимать три ключевых момента:

  1. Сцена (Scene) — объект, который определяет область страницы, на которой запускается анимация.
  2. Контроллер (Controller) — объект, который отслеживает скролл и управляет сценами.
  3. Tween-анимация — изменение свойств DOM-элементов во времени, чаще всего с помощью библиотеки GSAP.

ScrollMagic сам по себе не анимирует SVG, поэтому для морфинга используется интеграция с GSAP и плагином MorphSVGPlugin.

Подготовка SVG для морфинга

Для корректного морфинга важно, чтобы:

  • Исходный и конечный пути (path) имели одинаковое количество точек. Если это не так, GSAP автоматически не сможет плавно интерполировать формы.
  • Элементы имели одинаковый тип (). Морфинг между и возможен только после конвертации круга в путь.
  • Пути были оптимизированы: лишние команды и сегменты нужно удалить для плавной анимации.

Пример подготовки:

Здесь d — атрибут, который будет морфиться в другой путь.

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

Создание контроллера ScrollMagic:

const controller = new ScrollMagic.Controller();

Создание сцены, которая запускается при скролле:

const scene = new ScrollMagic.Scene({
  triggerElement: "#trigger", // элемент, на котором начинается анимация
  duration: 500,              // длина скролла, на протяжении которого происходит морфинг
  triggerHook: 0.5            // точка срабатывания (0 — верх экрана, 1 — низ)
});

duration определяет, сколько пикселей скролла займет анимация, а triggerHook — где на экране будет начальная точка анимации.

Создание Tween для морфинга

Используется GSAP с плагином MorphSVGPlugin:

gsap.registerPlugin(MorphSVGPlugin);

const morphTween = gsap.to("#shape", {
  duration: 1,
  morphSVG: "M60,60 C80,30 120,30 140,60 S160,140 140,160 80,170 60,140 Z",
  ease: "power1.inOut"
});

Обратите внимание:

  • morphSVG принимает строку пути для конечной формы.
  • ease управляет динамикой морфинга.
  • duration используется для Tween, но ScrollMagic будет синхронизировать её с прокруткой.

Привязка Tween к ScrollMagic

После создания Tween его нужно привязать к сцене:

scene.setTween(morphTween)
     .addTo(controller);

Теперь морфинг будет плавно воспроизводиться по мере скролла. Чем больше duration, тем более растянутой по прокрутке будет анимация.

Дополнительные возможности

  • Pinning: можно закрепить SVG на экране, чтобы морфинг происходил в фиксированной области:
scene.setPin("#shape");
  • Множественные морфинги: можно создавать цепочки анимаций через Timeline:
const timeline = gsap.timeline();
timeline.to("#shape", {morphSVG: "path1", ease: "power1.inOut"})
        .to("#shape", {morphSVG: "path2", ease: "power1.inOut"});

scene.setTween(timeline).addTo(controller);
  • Интерактивный контроль: ScrollMagic позволяет анимации зависеть от текущей позиции скролла, создавая эффект синхронизации движения формы с прокруткой страницы.

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

  • Использовать will-change: transform на SVG для ускорения рендеринга.
  • Минимизировать количество точек в path.
  • Избегать анимации слишком сложных форм на мобильных устройствах.

Пример полного кода

Этот пример создаёт плавный морфинг SVG при прокрутке страницы, с гибкой настройкой скорости и точек начала/конца анимации.

Оглавление