use:scrollDraw action · createScrollDraw

Svelte scroll animation

Svelte actions are the right primitive for this — no wrapper component, no extra element in the DOM, just use:scrollDraw on the node you want animated. This example animates a reactive store graph with spring easing, and reaches for createScrollDraw when the instance itself needs handling. Cleanup is automatic through the action lifecycle.

The code

A reactive store graph — $source driving three derived values — animates with spring easing on scroll. Uses the Svelte use:scrollDraw action; createScrollDraw gives access to the instance for replay/pause.

Hero.tsx

<!-- Option 1: use:scrollDraw action (simplest) -->
<script>
  import { scrollDraw } from 'svg-scroll-draw/svelte';
</script>

<div use:scrollDraw={{ easing: 'spring', fade: true, once: true }}>
  <svg viewBox="0 0 200 100" fill="none">
    <path d="M10 50 Q100 10 190 50"
      stroke="#ff3e00" stroke-width="2.5" />
  </svg>
</div>

<!-- Option 2: createScrollDraw for instance control -->
<script>
  import { createScrollDraw } from 'svg-scroll-draw/svelte';

  const { action, getInstance } = createScrollDraw({
    easing: 'spring',
    once:   true,
    speed:  1.2,
  });
</script>

<div use:action>
  <svg viewBox="0 0 200 100" fill="none">
    <path d="M10 50 Q100 10 190 50"
      stroke="#ff3e00" stroke-width="2.5" />
  </svg>
</div>
<button on:click={() => getInstance()?.replay()}>
  Replay
</button>

Live — scroll it

Svelte

Install

terminal

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 →

Related examples

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.

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.

← All examples