Stroke-эффекты

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

Ключевая идея: изменение свойства stroke-dasharray и stroke-dashoffset у SVG-путей создает иллюзию «рисования» линии при прокрутке страницы.

Подготовка SVG для Stroke-анимации

  1. Определить путь в SVG:
<svg width="400" height="100">
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" 
        stroke="black" fill="transparent" stroke-width="2"/>
</svg>
  1. Рассчитать длину пути через JS:
const path = document.querySelector('path');
const pathLength = path.getTotalLength();
path.style.strokeDasharray = pathLength;
path.style.strokeDashoffset = pathLength;

Примечание: stroke-dasharray определяет длину сегмента линии, а stroke-dashoffset — сдвиг начала линии. Изначально линия полностью скрыта, offset равен длине пути.

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

const controller = new ScrollMagic.Controller();

const scene = new ScrollMagic.Scene({
    triggerElement: '#trigger', // элемент, с которого начинается анимация
    duration: 500,              // длина анимации в пикселях прокрутки
    triggerHook: 0.8            // точка срабатывания на экране (0 = верх)
})
.setTween(path.style, {strokeDashoffset: 0, ease: Linear.easeNone})
.addTo(controller);

Объяснение параметров:

  • triggerElement – элемент, относительно которого начинается анимация.
  • duration – длина прокрутки, за которую анимация завершается.
  • triggerHook – положение триггера на экране.

Tween устанавливает изменение strokeDashoffset от полной длины к нулю, создавая эффект «рисования».

Использование GSAP для более сложных эффектов

GSAP позволяет добавлять плавные кривые и синхронизировать несколько линий:

gsap.to(path, {
    strokeDashoffset: 0,
    duration: 1,
    ease: "power1.inOut",
    scrollTrigger: {
        trigger: "#trigger",
        start: "top 80%",
        end: "top 30%",
        scrub: true
    }
});

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

  • scrub: true синхронизирует анимацию с прокруткой страницы.
  • Можно объединять несколько линий в одну анимацию, используя массивы или селекторы.

Анимация нескольких Stroke-элементов

const paths = document.querySelectorAll('path');

paths.forEach(path => {
    const length = path.getTotalLength();
    path.style.strokeDasharray = length;
    path.style.strokeDashoffset = length;

    new ScrollMagic.Scene({
        triggerElement: '#trigger',
        duration: 400,
        triggerHook: 0.9
    })
    .setTween(path, {strokeDashoffset: 0, ease: Linear.easeNone})
    .addTo(controller);
});

Советы:

  • Устанавливать strokeDasharray индивидуально для каждого пути.
  • Длина duration может варьироваться для создания последовательной анимации.

Комбинирование Stroke с другими эффектами

Stroke-эффекты хорошо сочетаются с анимацией прозрачности, масштабирования и цвета:

gsap.to(path, {
    strokeDashoffset: 0,
    stroke: "#ff0000",
    opacity: 1,
    duration: 1.5,
    ease: "power2.out",
    scrollTrigger: {
        trigger: "#trigger",
        start: "top 75%",
        end: "top 25%",
        scrub: true
    }
});

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

  • stroke изменяет цвет линии динамически.
  • opacity позволяет плавно «проявлять» линию.
  • Можно комбинировать с .fromTo() для анимации от одного состояния к другому.

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

  • Минимизировать количество одновременно анимируемых путей.
  • Использовать will-change: stroke-dashoffset в CSS для GPU-ускорения.
  • Разбивать длинные SVG на сегменты для последовательной анимации.

Продвинутые техники

  1. Эффект «рисования по кривой» с несколькими сценами:
const sections = document.querySelectorAll('.svg-section');
sections.forEach(section => {
    const path = section.querySelector('path');
    const length = path.getTotalLength();
    path.style.strokeDasharray = length;
    path.style.strokeDashoffset = length;

    new ScrollMagic.Scene({
        triggerElement: section,
        duration: section.offsetHeight,
        triggerHook: 0.8
    })
    .setTween(path, {strokeDashoffset: 0, ease: Linear.easeNone})
    .addTo(controller);
});
  1. Синхронизация Stroke с прокруткой параллакса: линии могут идти в такт с движением фоновых элементов.

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

Оглавление