Comparison

svg-scroll-draw
vs Framer Motion.

Framer Motion is excellent for React component animations. For scroll-driven effects specifically, svg-scroll-draw does more — at 4× smaller — and works in any framework.

Get started free →vs GSAP →

01

Bundle size.

svg-scroll-draw
~9 KB
yours
Framer Motion
~35 KB

Minified + gzipped. Framer Motion tree-shaking helps but scroll-specific APIs pull in most of the core.

02

Side-by-side API.

Fade + slide in on scroll

Framer Motion

Card.tsx
import { motion, useInView } from 'framer-motion';
import { useRef } from 'react';

function Card() {
  const ref = useRef(null);
  const inView = useInView(ref, { once: true });

  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 32 }}
      animate={inView
        ? { opacity: 1, y: 0 }
        : { opacity: 0, y: 32 }}
      transition={{ duration: 0.6, ease: 'easeOut' }}
    >
      Content
    </motion.div>
  );
}

svg-scroll-draw

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

// Works in React, Vue, Svelte,
// Solid, Astro, Nuxt, or vanilla
scrollReveal('.card', {
  from:   { opacity: 0, y: 32 },
  easing: 'ease-out',
  once:   true,
});

Scrub animation tied to scroll position

Framer Motion

Section.tsx
import { useScroll, useTransform,
  motion } from 'framer-motion';

function Section() {
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ['start end', 'end start'],
  });
  const opacity = useTransform(
    scrollYProgress, [0, 1], [0, 1]
  );
  return (
    <motion.div style={{ opacity }}>
      Content
    </motion.div>
  );
}

svg-scroll-draw

app.js
import { scrollAnimate }
  from 'svg-scroll-draw';

scrollAnimate('#section', {
  props: { opacity: [0, 1] },
  trigger: {
    start: 'top bottom',
    end:   'bottom top',
  },
});

CSS variable binding svg-scroll-draw only

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

// Set --scroll-progress (0→1) and --scroll-progress-eased on the element
scrollProgress('#hero', { easing: 'ease-in-out' });
styles.css
#hero {
  /* Drive CSS animations directly from the scroll variable */
  opacity: calc(var(--scroll-progress-eased));
  transform: translateY(
    calc((1 - var(--scroll-progress-eased)) * 40px)
  );
  background-size:
    calc(100% + var(--scroll-progress) * 20%)
    auto;
}

03

Feature matrix.

Feature
svg-scroll-draw
Framer Motion
Scroll-driven animations
✓
✓
Animate any CSS property
✓
✓
SVG path draw animation

Framer Motion has no stroke-dashoffset animation

✓
✗
Pin / sticky sections
✓
✗
Section snapping
✓
✗
Text split + stagger

Framer Motion needs SplitText manually

✓
✗
Animated counters

Framer Motion useTransform can do this but requires boilerplate

✓
~
Video scrub
✓
✗
scrollReveal (one-line preset)
✓
✗
scrollProgress (CSS variable)
✓
✗
Horizontal scroll sections
✓
~
Native CSS fast path

svg-scroll-draw uses animation-timeline: view() when eligible

✓
✗
Works outside React

Framer Motion is React-only

✓
✗
Vue / Svelte / Solid wrappers
✓
✗
Velocity-scaled animation
✓
✗
Lenis smooth scroll adapter
✓
~
MIT license
✓
✓
Bundle size (gzipped)
~9 KB
~35 KB

✓ supported · ✗ not supported · ~ partial

04

When Framer Motion is the right call.

Rich React component animations

Hover states, enter/exit transitions, layout animations, drag — Framer Motion's component model shines for interactive UI beyond scroll.

AnimatePresence

Exit animations when components unmount. Genuinely hard to do without Framer Motion's lifecycle integration.

Gesture animations

Drag, pan, tap, hover — Framer Motion's gesture system is unmatched.

Spring physics

Framer Motion's spring/inertia model is more physics-accurate for complex gesture responses.

Scroll animations, solved.

~9 KB. Framework-agnostic. MIT. Works everywhere Framer Motion doesn't.

$npm i svg-scroll-draw
Read the docs →vs GSAP →