Рисование линий

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

Использование SVG для линий

Линии для анимации лучше всего задавать через SVG. SVG обладает преимуществом в масштабируемости и поддержке анимаций через атрибуты stroke-dasharray и stroke-dashoffset.

Пример базовой линии:

Для анимации линии создаются следующие шаги:

  1. Вычисление длины линии:

    const line = document.getElementById('line1');
const lineLength = line.getTotalLength();

  2. Установка начального состояния для анимации «рисования»:

    line.style.strokeDasharray = lineLength;
line.style.strokeDashoffset = lineLength;

  3. Анимация через ScrollMagic и GSAP:

    const controller = new ScrollMagic.Controller();

const scene = new ScrollMagic.Scene({
  triggerElement: '#line1', // элемент, при котором начинается анимация
  duration: 500 // длина скролла для полной анимации
})
.setTween(gsap.to(line, { strokeDashoffset: 0, ease: "linear" }))
.addTo(controller);

Работа с кривыми и сложными линиями

Для кривых используется элемент вместо . Атрибут d задаёт кривую линию или контур.

Принцип анимации аналогичен:

const path = document.getElementById('curve');
const pathLength = path.getTotalLength();

path.style.strokeDasharray = pathLength;
path.style.strokeDashoffset = pathLength;

const curveScene = new ScrollMagic.Scene({
  triggerElement: '#curve',
  duration: 600
})
.setTween(gsap.to(path, { strokeDashoffset: 0, ease: "linear" }))
.addTo(controller);

Важно: getTotalLength() корректно работает только с полностью определёнными линиями и кривыми. Для сложных SVG контуров с множеством сегментов длина суммируется автоматически.

Анимация последовательности линий

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

const timeline = gsap.timeline();

timeline
  .to('#line1', { strokeDashoffset: 0, duration: 1 })
  .to('#curve', { strokeDashoffset: 0, duration: 1 });

new ScrollMagic.Scene({
  triggerElement: '#animation',
  duration: 1000
})
.setTween(timeline)
.addTo(controller);

Преимущество Timeline — возможность синхронизации сложных последовательностей анимаций с одним контроллером ScrollMagic.

Дополнительные приёмы

  • Цветовые переходы: с помощью GSAP можно одновременно анимировать stroke и stroke-width.

    gsap.to(line, { stroke: "red", strokeWidth: 6, duration: 1 });

  • Множественные триггеры: одна линия может анимироваться при разных скролл-сценах, создавая эффект «дополняющегося рисунка».

  • События ScrollMagic: Используются .on("enter"), .on("leave") для запуска дополнительных действий при начале и окончании анимации.

    scene.on("enter", () => console.log("Начало рисования"));
scene.on("leave", () => console.log("Анимация завершена"));

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

  • Для плавной анимации использовать ease: "linear", чтобы скорость рисования линии была постоянной.
  • Оптимально использовать векторные линии, особенно для адаптивного дизайна.
  • Длительность сцены (duration) напрямую влияет на скорость анимации: большая длительность — медленное рисование.
  • Комбинируя ScrollMagic с GSAP Timeline можно создавать комплексные анимации с множеством линий и кривых, управляя всеми элементами через единую синхронизацию скролла.
Оглавление