scrollDrawGroup · synchronizedOnce a page has more than one animated element, the problem stops being the animation and becomes coordination — three separate observers means three slightly different start times, which reads as sloppy. scrollDrawGroup binds any number of containers to a single scroll timeline so they move as one, with one observer rather than one per element.
Three separate SVG containers — Speed, Size, and Framework icons — all animate simultaneously the moment the section scrolls into view. scrollDrawGroup wires them to the same scroll timeline with one call.
import { scrollDrawGroup } from 'svg-scroll-draw/group';
// All three containers share the same options and
// start drawing at exactly the same scroll position.
const group = scrollDrawGroup(
[speedRef.current, sizeRef.current, frameworkRef.current],
{
easing: 'ease-out',
speed: 1.1,
fade: true,
once: true,
trigger: { start: 'top 88%', end: 'top 25%' },
}
);
// One call controls all instances
group.replay();
group.pause();
group.destroy(); // cleanup on unmountnpm i svg-scroll-draw
MIT licensed, zero runtime dependencies. Every API is a separate entry point, so you only ship what you import. Full API reference →
Animate one after another
Chain scroll animations so each starts only when the previous finishes. scrollDrawSequence handles the ordering — no manual delay maths.
Independent scroll timelines
Give every element its own slice of the scroll range. scrollDrawTimeline maps each track to a start and end percentage — like keyframes for scroll.