ScrollDraw component · useScrollDraw composableVue gets first-class treatment here rather than a vanilla escape hatch: a <ScrollDraw> component for the common case, and a useScrollDraw composable when you need the instance to pause, seek or replay it. Both ship in the same package — there is no separate Vue build to install, and both clean up on unmount so nothing leaks across route changes.
A Vue component tree animates its borders and prop-flow connections on scroll. Uses the <ScrollDraw> component — or the useScrollDraw composable for full ref control. Both are included in svg-scroll-draw/vue.
<!-- Option 1: <ScrollDraw> component -->
<script setup>
import { ScrollDraw } from 'svg-scroll-draw/vue';
</script>
<template>
<ScrollDraw easing="ease-out" :speed="0.9" fade once>
<svg viewBox="0 0 200 100" fill="none">
<path d="M10 50 Q100 10 190 50"
stroke="#42b883" stroke-width="2.5" />
</svg>
</ScrollDraw>
</template>
<!-- Option 2: useScrollDraw composable -->
<script setup>
import { useScrollDraw } from 'svg-scroll-draw/vue';
const containerRef = useScrollDraw({
easing: 'spring',
once: true,
trigger: { start: 'top 80%', end: 'center 20%' },
});
</script>
<template>
<div :ref="containerRef">
<svg viewBox="0 0 200 100" fill="none">
<path d="M10 50 Q100 10 190 50"
stroke="#42b883" stroke-width="2.5" />
</svg>
</div>
</template>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 →
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.
Solid.js scroll animation
Scroll-driven SVG animation in Solid.js with a hook that respects fine-grained reactivity. No re-renders, ~10 KB, zero dependencies.
Astro scroll animation
Add scroll animation to Astro with a data attribute and one init call. No framework wrapper, no hydration — options pass as a JSON attribute.