useScrollDraw hook · createScrollDrawSolid’s fine-grained reactivity means an animation library must not force re-renders to move a value, and this one does not — the draw runs outside the reactive graph entirely, driven by scroll position. The example animates a signal feeding two memos into an effect, which is a fitting subject: the diagram explains the model the code is written in.
A fine-grained reactivity graph — createSignal feeding two createMemo derivations into a createEffect — animates with ease-out on scroll. Uses the useScrollDraw hook; createScrollDraw gives access to the instance for replay and pause.
// Option 1: useScrollDraw hook (simplest)
import { useScrollDraw } from 'svg-scroll-draw/solid';
function Hero() {
const ref = useScrollDraw({
easing: 'ease-out',
fade: true,
once: true,
});
return (
<div ref={ref}>
<svg viewBox="0 0 200 80" fill="none">
<path d="M10 40 Q100 5 190 40"
stroke="#446B9E" stroke-width="2.5" />
</svg>
</div>
);
}
// Option 2: createScrollDraw — instance control
import { createScrollDraw } from 'svg-scroll-draw/solid';
function HeroWithReplay() {
const { ref, getInstance } = createScrollDraw({
easing: 'spring',
once: true,
});
return (
<>
<div ref={ref}>
<svg viewBox="0 0 200 80" fill="none">
<path d="M10 40 Q100 5 190 40"
stroke="#446B9E" stroke-width="2.5" />
</svg>
</div>
<button onClick={() => getInstance()?.replay()}>
Replay
</button>
</>
);
}npm 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 →
Vue 3 scroll animation
Scroll-driven SVG animation in Vue 3 with a component or a composable. Full ref control, SSR-safe, ~10 KB, no GSAP. Copy-paste Vue code.
Svelte scroll animation
Animate SVG on scroll in Svelte with a native action. use:scrollDraw needs no wrapper component, and createScrollDraw gives full instance control.