ANIMATE SVG
PATHS AS YOU SCROLL.

css · any element

Animate opacity, transform, color — any CSS property on any element. Direct replacement for gsap.to + ScrollTrigger.

scrollAnimate('#card', {
  props: {
    opacity:   [0, 1],
    transform: [
      'translateY(40px)',
      'translateY(0)',
    ],
  },
  easing: 'ease-out',
  once: true,
});

numbers · format fn

Animate any number into view. Custom format function, decimals, easing. One call for an entire stats section.

scrollCounter('#revenue', {
  to:     1_250_000,
  format: n =>
    '$' + Math.round(n)
         .toLocaleString(),
  easing: 'ease-out',
  once:   true,
});

chars · words · lines

Split text and stagger-animate each piece on scroll. Free GSAP SplitText replacement — no Club GreenSock subscription.

scrollText('#headline', {
  split:   'words',
  stagger: 0.05,
  from: {
    opacity: 0,
    y: 24,
  },
  once: true,
});

currentTime · scrub

Tie <video> playback to scroll. The Apple/Stripe product page pattern — ships free.

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

scrollVideo('#hero-video', {
  trigger: {
    start: 'top top',
    end:   'bottom top',
  },
});

speed · depth

Move any element at a different rate than scroll. Speed multiplier, reverse direction. One line.

// 40% of scroll speed
scrollParallax('#bg', {
  speed: 0.4,
});

// Opposite direction
scrollParallax('#badge', {
  speed: -0.3,
});

overlay · dev-only

Visual panel showing every active animation's trigger window, progress, and type. Zero production bytes.

import { devtools }
  from 'svg-scroll-draw/devtools';

// Cmd+Shift+S to toggle
devtools.enable();

pin · sticky · fixed

Pin any element at a viewport position while the page scrolls past it. Wrapper-based — no layout shift. Full lifecycle callbacks.

import { scrollPin }
  from 'svg-scroll-draw/pin';

scrollPin('#panel', {
  pinDistance: 800,
  onEnter:    () => activate(),
  onLeave:    () => deactivate(),
  onEnterBack: () => activate(),
});

snap · sections · js

JS-powered section snapping with custom easing, configurable threshold, and onSnap callback. Vertical and horizontal.

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

scrollSnap('.section', {
  duration:  600,
  easing:    'ease-in-out',
  threshold: 0.3,
  onSnap: (i) =>
    console.log('section', i),
});

callbacks · lifecycle

Fire code when scroll enters or exits any trigger zone — in either direction. Works on scrollAnimate and scrollDraw.

scrollAnimate('#section', {
  props: { opacity: [0.3, 1] },
  onEnter:     () => activate(),
  onLeave:     () => deactivate(),
  onEnterBack: () => activate(),
  onLeaveBack: () => deactivate(),
});

css variable · calc()

Expose scroll progress as --scroll-progress CSS custom property. Drive opacity, transforms, backgrounds — anything — directly from CSS calc() with zero per-frame JS.

import { scrollProgress }
  from 'svg-scroll-draw/progress';

scrollProgress('#hero');

// Then in CSS:
// #hero {
//   opacity: calc(
//     var(--scroll-progress-eased)
//   );
// }

horizontal · apple-style

Drive horizontal translateX from vertical scroll. The Apple / Stripe "scroll sideways" pattern. One call — you handle the sticky CSS.

import { scrollHorizontal }
  from 'svg-scroll-draw/horizontal';

scrollHorizontal('.track', {
  distance: window.innerWidth * 3,
  easing:   'linear',
});

reveal · presets · stagger

One-line replacement for AOS and ScrollReveal.js. 7 presets, stagger, custom easing. No data attributes — pure JS.

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

// Fade up (default)
scrollReveal('.card');

// Custom from state
scrollReveal('.feature', {
  from: { opacity: 0, y: 40, scale: 0.95 },
  stagger: 0.1,
});