Анимация графиков

Для работы с ScrollMagic необходимо подключить библиотеку и её зависимости. Основной файл библиотеки можно подключить через CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js"></script>

ScrollMagic тесно интегрируется с GSAP, что позволяет создавать плавные и динамичные анимации элементов при прокрутке страницы. Важно убедиться, что GSAP подключен перед плагином animation.gsap.

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

Контроллер (ScrollMagic.Controller) управляет всеми сценами на странице. Он отслеживает прокрутку и синхронизирует анимации.

const controller = new ScrollMagic.Controller();

Контроллер может принимать дополнительные параметры, например, vertical для направления прокрутки или globalSceneOptions для общих настроек всех сцен:

const controller = new ScrollMagic.Controller({
  vertical: true,
  globalSceneOptions: {
    triggerHook: 0.5
  }
});

triggerHook определяет точку, при которой сцена активируется:

  • 0 – верх страницы
  • 0.5 – середина экрана
  • 1 – нижняя часть экрана

Создание сцены для анимации графика

Сцена (ScrollMagic.Scene) связывает три ключевых элемента: триггер, длительность и анимацию. Для анимации графика чаще всего используется постепенное появление или рост элементов.

const scene = new ScrollMagic.Scene({
  triggerElement: "#chart", // элемент, при появлении которого активируется анимация
  duration: 300,             // длина эффекта прокрутки в пикселях
  triggerHook: 0.8           // точка активации на экране
})
.setTween(gsap.from("#chart .bar", { height: 0, duration: 1, stagger: 0.2 }))
.addTo(controller);

Ключевые моменты:

  • triggerElement — элемент DOM, который инициирует анимацию.
  • duration — протяженность эффекта. Если указано 0, анимация срабатывает мгновенно при достижении триггера.
  • setTween — метод для подключения анимации GSAP к сцене.

Использование stagger и timeline для сложных графиков

Для последовательной анимации нескольких элементов удобнее использовать timeline GSAP. Например, для столбчатого графика:

const tl = gsap.timeline();
tl.from("#chart .bar", { height: 0, duration: 0.5, stagger: 0.2 })
  .from("#chart .label", { opacity: 0, y: 20, duration: 0.3, stagger: 0.2 }, "-=0.3");

const scene = new ScrollMagic.Scene({
  triggerElement: "#chart",
  duration: 400,
  triggerHook: 0.7
})
.setTween(tl)
.addTo(controller);

Пояснения:

  • timeline позволяет комбинировать несколько анимаций в один эффект.
  • Отрицательные значения смещения ("-=0.3") задают перекрытие анимаций для более динамичного эффекта.
  • stagger — распределяет анимацию элементов с задержкой, создавая эффект последовательного появления.

Параллакс-эффекты для графиков

ScrollMagic также поддерживает создание параллакс-анимаций. Например, для перемещения фона или линий графика с разной скоростью:

gsap.to("#chart .line", {
  y: -100,
  scrollTrigger: {
    trigger: "#chart",
    start: "top 80%",
    end: "bottom 20%",
    scrub: true
  }
});

Параметры параллакса:

  • scrub: true — синхронизация анимации с прокруткой страницы.
  • start и end — контроль начала и окончания эффекта относительно экрана.

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

Анимация прогресса графика при скролле

Для линейных графиков удобно анимировать прогресс линии. Пример с использованием SVG:

const path = document.querySelector("#chart line");
const length = path.getTotalLength();

path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;

const scene = new ScrollMagic.Scene({
  triggerElement: "#chart",
  duration: 500,
  triggerHook: 0.8
})
.setTween(gsap.to(path, { strokeDashoffset: 0, duration: 1 }))
.addTo(controller);

Объяснение:

  • strokeDasharray и strokeDashoffset позволяют «рисовать» линию постепенно.
  • Анимация срабатывает при прокрутке и визуально отображает рост данных на графике.

Комбинация нескольких сцен для комплексной визуализации

Для одного графика может использоваться несколько сцен: отдельная для столбцов, отдельная для подписей, отдельная для линий или фона. Пример:

// Анимация столбцов
new ScrollMagic.Scene({
  triggerElement: "#chart",
  triggerHook: 0.8,
})
.setTween(gsap.from("#chart .bar", { height: 0, duration: 0.8, stagger: 0.1 }))
.addTo(controller);

// Анимация подписей
new ScrollMagic.Scene({
  triggerElement: "#chart",
  triggerHook: 0.8,
})
.setTween(gsap.from("#chart .label", { opacity: 0, y: 20, duration: 0.5, stagger: 0.1 }))
.addTo(controller);

// Параллакс линии
new ScrollMagic.Scene({
  triggerElement: "#chart",
  duration: 400,
  triggerHook: 0.7
})
.setTween(gsap.to("#chart .line", { y: -50, duration: 1 }))
.addTo(controller);

Такой подход позволяет разбивать сложную анимацию на логические части, обеспечивая плавность и контроль каждой анимации отдельно.

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

Для графиков с большим количеством элементов рекомендуется:

  • Использовать will-change: transform в CSS для ускорения рендеринга.
  • Объединять анимации через timeline вместо создания большого числа отдельных сцен.
  • Ограничивать длительность сцены (duration) до необходимого минимума.
  • Минимизировать количество тяжелых DOM-операций внутри анимации.

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

Оглавление