SVG scroll animations
without GSAP.

// 1. stroke draws on scroll (fill starts transparent)
// 2. onComplete: fill floods in + right eye blinks

<ScrollDraw easing="ease-out" speed={0.95} once
  onComplete={handleComplete}>
  <svg viewBox="0 0 127.14 96.36">
    <path d="M107.7,8.07…"
      fill={filled ? '#5865F2' : 'transparent'}
      stroke="#5865F2" strokeWidth="2.5"
      style={{ transition: 'fill 0.45s ease' }} />

    {/* Left eye — floods white on complete */}
    <ellipse cx="42.45" cy="53.03" rx="11.42" ry="12.67"
      fill={filled ? 'white' : 'transparent'}
      style={{ transition: 'fill 0.45s ease' }} />

    {/* Right eye — blinks via scaleY */}
    <ellipse cx="84.69" cy="53.03" rx="11.42" ry="12.67"
      fill={filled ? 'white' : 'transparent'}
      style={{ transform: `scaleY(${blinking ? 0.05 : 1})`,
               transformBox: 'fill-box', transformOrigin: 'center',
               transition: 'fill 0.45s ease, transform 0.1s ease-in-out' }} />
  </svg>
</ScrollDraw>

<ScrollDraw
  easing="ease-out" speed={0.6}
  stagger={0.35} once
>
  <svg>
    {/* Static: "Authorized Signature" label, name, date */}
    {/* Animated path 1: cursive signature */}
    <path d="M 18 90 C 14 62…" stroke="#111" strokeWidth="2.2" />
    {/* Animated path 2: underline flourish (starts after sig) */}
    <path d="M 12 112 C 90 122…" stroke="#ff90e8" />
  </svg>
</ScrollDraw>

<ScrollDraw
  easing="ease-in-out" speed={0.75} once
  selector=".ink"
  strokeColor={['#fbbf24', '#ff90e8']}
>
  <svg>
    {/* Static: city blocks, street labels, distance badge */}
    {/* Static: start/end markers */}
    {/* Animated: route path only */}
    <path className="ink"
      d="M 44 175 L 44 132 L 90 132…"
      stroke="#fbbf24" strokeWidth="4" />
  </svg>
</ScrollDraw>

// src/pages/index.astro
---
// No server-side imports needed
---

<div
  data-scroll-draw
  data-scroll-draw-options='{"easing":"ease-out","fade":true,"once":true}'
>
  <svg viewBox="0 0 200 80" fill="none">
    <path d="M10 40 Q100 5 190 40"
      stroke="white" strokeWidth="2" />
  </svg>
</div>

<script>
  import { initScrollDraw } from 'svg-scroll-draw/astro';

  // Finds all [data-scroll-draw] on the page and
  // initialises each one — no React, no Vue needed.
  initScrollDraw();
</script>

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 unmount

<!-- 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>

import { scrollDraw } from 'svg-scroll-draw';

// One-liner for each common pattern
scrollDraw('#logo',    { preset: 'reveal'     }); // fade + ease-out, once
scrollDraw('#diagram', { preset: 'sketch'     }); // staggered ease-in
scrollDraw('#text',    { preset: 'typewriter' }); // fast linear stagger
scrollDraw('#hero',    { preset: 'cinematic'  }); // slow fade ease-in-out
scrollDraw('#icon',    { preset: 'spring'     }); // spring easing

// Override any preset value
scrollDraw('#logo', { preset: 'reveal', easing: 'spring' });

// Inspect presets
import { PRESETS } from 'svg-scroll-draw';
console.log(PRESETS.reveal);
// { easing: 'ease-out', fade: true, speed: 1.2, once: true }

import { scrollAnimate } from 'svg-scroll-draw';

// Each element gets its own trigger offset → natural cascade
scrollAnimate(badgeEl, {
  props: { opacity: [0, 1], transform: ['translateY(16px)', 'translateY(0)'] },
  trigger: { start: 'top 85%', end: 'top 45%' },
  easing: 'ease-out', once: true,
});

scrollAnimate(priceEl, {
  props: { opacity: [0, 1], transform: ['translateY(24px)', 'translateY(0)'] },
  trigger: { start: 'top 80%', end: 'top 40%' }, // starts 5% later
  easing: 'ease-out', once: true,
});

scrollAnimate(ctaEl, {
  props: { opacity: [0, 1], transform: ['translateY(12px)', 'translateY(0)'] },
  trigger: { start: 'top 74%', end: 'top 34%' }, // last to reveal
  easing: 'ease-out', once: true,
});

import { scrollVideo } from 'svg-scroll-draw/video';

// The full Apple / Stripe product scrub pattern.
// video.currentTime is tied directly to scroll position.
scrollVideo('#hero-video', {
  // Animate across the full sticky section
  trigger: { start: 'top top', end: 'bottom top' },

  // Optionally scrub only a clip of the video
  from: 0,    // seconds
  to:   12.5, // seconds (defaults to video.duration)

  easing: 'linear', // linear feels most natural for scrub
  once:   false,    // reverse on scroll-up

  onReady:    () => console.log('metadata loaded'),
  onProgress: p  => progressBar.style.width = p * 100 + '%',
  onComplete: () => console.log('reached end'),
});

import { scrollAnimateGroup } from 'svg-scroll-draw/group';

// All four cards animate simultaneously — same props,
// same trigger, one call.
const group = scrollAnimateGroup(
  [card1El, card2El, card3El, card4El],
  {
    props: {
      opacity:   [0, 1],
      transform: ['translateY(28px)', 'translateY(0)'],
    },
    easing: 'ease-out',
    once:   true,
  }
);

// Full instance API works across the entire group
group.replay();   // replay all
group.pause();    // pause all
group.destroy();  // cleanup on unmount

import { scrollReveal } from 'svg-scroll-draw/reveal';

// Fade up (default preset) with stagger
scrollReveal('.card');

// Custom from state
scrollReveal('.feature', {
  from:    { opacity: 0, y: 40, scale: 0.95 },
  stagger: 0.1,
  easing:  'ease-out',
  once:    true,
});

// Named presets: fadeUp | fadeDown | fadeLeft
//                fadeRight | scale | flip | flipX
scrollReveal('.badge',  { preset: 'scale'    });
scrollReveal('.panel',  { preset: 'flip'     });
scrollReveal('.sidebar',{ preset: 'fadeLeft' });

// Cleanup
const instance = scrollReveal('.card');
instance.destroy();

import { scrollSnap } from 'svg-scroll-draw/snap';

// Horizontal card carousel with custom easing
const snap = scrollSnap('.card', {
  direction:  'horizontal',
  duration:   400,
  easing:     'ease-out',
  threshold:  0.3,       // snap if user dragged >30% of card width
  onSnap:     (index) => setActiveCard(index),
});

// Vertical section snapping (fullscreen sections)
scrollSnap('.section', {
  duration: 600,
  easing:   'ease-in-out',
  onSnap:   (i) => history.replaceState(null, '', `#section-${i}`),
});

// Programmatic control
snap.snapTo(2);             // jump to index 2 with animation
snap.getCurrentIndex();     // → currently snapped index
snap.destroy();