Работа с SVG

Для работы с SVG в ScrollMagic необходимо сначала подключить библиотеку и создать контроллер:

// Подключение контроллера
var controller = new ScrollMagic.Controller();

Контроллер управляет всеми сценами, которые будут реагировать на прокрутку страницы. Сцены создаются отдельно для каждого эффекта анимации.

Создание сцены для SVG-анимации

Сцена (ScrollMagic.Scene) определяет участок страницы, в котором будет происходить анимация. Основные параметры:

  • triggerElement – элемент, при достижении которого начинается анимация;
  • duration – продолжительность анимации в пикселях прокрутки;
  • triggerHook – положение триггера относительно видимой области (0 – верх, 1 – низ).

Пример:

var scene = new ScrollMagic.Scene({
    triggerElement: "#svgSection",
    duration: 500,
    triggerHook: 0.5
})
.setTween("#mySVG path", {strokeDashoffset: 0, ease: Linear.easeNone})
.addTo(controller);

В этом примере используется анимация линии SVG (strokeDashoffset) с помощью Tween библиотеки (GSAP).

Анимация линий SVG

Для анимации обводки линии (stroke) применяется приём с stroke-dasharray и stroke-dashoffset. Алгоритм:

  1. Определить длину линии:
var path = document.querySelector("#mySVG path");
var pathLength = path.getTotalLength();
path.style.strokeDasharray = pathLength;
path.style.strokeDashoffset = pathLength;
  1. Создать анимацию, уменьшающую strokeDashoffset до нуля:
var tween = gsap.to(path, {strokeDashoffset: 0, duration: 1, ease: "none"});
  1. Привязать анимацию к сцене ScrollMagic:
var scene = new ScrollMagic.Scene({
    triggerElement: "#svgSection",
    duration: pathLength
})
.setTween(tween)
.addTo(controller);

Этот метод позволяет добиться эффекта “рисования линии” при прокрутке страницы.

Анимация SVG с несколькими элементами

Для анимации нескольких элементов одновременно используется массив элементов или селектор с классом. Пример:

var paths = document.querySelectorAll("#mySVG path");

paths.forEach(function(path) {
    var length = path.getTotalLength();
    path.style.strokeDasharray = length;
    path.style.strokeDashoffset = length;

    var tween = gsap.to(path, {strokeDashoffset: 0, duration: 1, ease: "none"});

    new ScrollMagic.Scene({
        triggerElement: "#svgSection",
        duration: length
    })
    .setTween(tween)
    .addTo(controller);
});

Каждая линия будет анимироваться индивидуально, создавая комплексный эффект рисования SVG.

Прокрутка и синхронизация с анимацией

ScrollMagic позволяет синхронизировать SVG-анимацию с прокруткой страницы. Для плавного эффекта рекомендуется использовать линейную интерполяцию (ease: "none" в GSAP) и правильно задавать duration. Если duration равен длине линии, анимация полностью завершится при прохождении этой длины через экран.

var scene = new ScrollMagic.Scene({
    triggerElement: "#svgSection",
    duration: pathLength
})
.setTween(tween)
.addIndicators() // полезно для отладки
.addTo(controller);

Комбинация трансформаций SVG

Можно анимировать не только линии, но и трансформации элементов SVG: перемещение, вращение, масштабирование. Пример с GSAP:

var tween = gsap.to("#mySVG circle", {x: 200, rotation: 360, scale: 1.5, duration: 1, ease: "none"});

var scene = new ScrollMagic.Scene({
    triggerElement: "#svgSection",
    duration: 500
})
.setTween(tween)
.addTo(controller);

Анимация будет привязана к прокрутке, создавая эффект, где круг смещается, вращается и увеличивается одновременно.

Параллакс-эффекты с SVG

ScrollMagic можно использовать для создания параллакс-эффектов, где элементы SVG движутся с разной скоростью относительно прокрутки:

gsap.to("#svgBackground", {y: 100, ease: "none"});
gsap.to("#svgForeground", {y: 200, ease: "none"});

new ScrollMagic.Scene({
    triggerElement: "#svgSection",
    duration: 500
})
.setTween(gsap.timeline()
    .add(gsap.to("#svgBackground", {y: 100, ease: "none"}))
    .add(gsap.to("#svgForeground", {y: 200, ease: "none"}))
)
.addTo(controller);

Элементы движутся независимо друг от друга, создавая глубину сцены.

Управление поведением при выходе из зоны видимости

ScrollMagic поддерживает события enter, leave, start, end. Это полезно для запуска или сброса SVG-анимации:

scene.on("enter", function() {
    console.log("SVG-анимация активирована");
});

scene.on("leave", function() {
    console.log("SVG-анимация приостановлена");
});

Можно использовать для запуска обратной анимации или скрытия элементов, создавая интерактивные эффекты.

Интеграция с другими библиотеками

Для сложных SVG-анимаций ScrollMagic хорошо сочетается с:

  • GSAP – управление анимациями и таймлайнами;
  • Vivus.js – специализированная библиотека для рисования SVG линий;
  • Snap.svg – анимации и трансформации отдельных SVG-элементов.

Пример интеграции с Vivus:

var vivus = new Vivus('mySVG', {duration: 200, type: 'delayed'});

new ScrollMagic.Scene({
    triggerElement: "#svgSection",
    duration: 500
})
.on("progress", function(event) {
    vivus.setFrameProgress(event.progress);
})
.addTo(controller);

Такой подход позволяет синхронизировать анимацию Vivus с прокруткой, сохраняя полный контроль над эффектами.

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

Оглавление