Blog

Guides & comparisons.

Guide

June 2026

15 min read

The complete guide to scroll animations in 2025

Every scroll animation pattern — fade reveal, parallax, sticky pin, section snap, text split, video scrub, horizontal sections, CSS variables — with copy-paste code. 12 patterns, one library.

Read →

Performance

June 2026

8 min read

Scroll animation performance — native CSS vs JavaScript

How svg-scroll-draw uses animation-timeline: view() for zero-JS scroll animations on the compositor. When native CSS wins, when JS wins, and how the eligibility check works.

Read →

How-To

June 2026

6 min read

Horizontal scroll sections without GSAP — scrollHorizontal

The Apple / Stripe product page pattern: vertical scroll drives horizontal movement. Build it with scrollHorizontal from svg-scroll-draw — one call, CSS setup, zero GSAP. Includes React example and sticky layout guide.

Read →

Migration

June 2026

6 min read

Replace AOS / ScrollReveal.js with one function call

scrollReveal from svg-scroll-draw: 7 presets, stagger, custom easing, no data attributes, no config files. Drop-in replacement for AOS and ScrollReveal.js — fully typed, part of a larger platform.

Read →

How-To

June 2026

7 min read

Pin sections on scroll without GSAP — scrollPin

How to pin any element at a viewport position while the page scrolls past it. Wrapper-based layout, zero layout shift, full lifecycle callbacks (onEnter/onLeave/onEnterBack/onLeaveBack). No GSAP. ~9 KB total.

Read →

Patterns

June 2026

7 min read

Animate multiple elements on scroll — one call

scrollAnimateGroup, scrollAnimateSequence, scrollParallaxGroup, scrollDrawGroup — the complete guide to fan-out, cascade, and parallax animations across multiple elements. Real-world patterns for pricing grids, hero sections, and feature lists.

Read →

Framework Guide

June 2026

9 min read

scrollAnimate in Vue 3, Svelte, and Solid.js — v2 framework guide

Full guide to using svg-scroll-draw v2 APIs in Vue 3, Svelte, and Solid.js. Composables, use: actions, hooks, component wrappers — with copy-paste examples for scrollAnimate, scrollText, scrollCounter, and scrollVideo.

Read →

Migration

June 2026

8 min read

Replace GSAP ScrollTrigger with scrollAnimate

Full migration guide: scrollAnimate covers 95% of ScrollTrigger use cases at 9× smaller bundle size. Side-by-side code for fade/slide, parallax, counters, text reveals, and video scrubbing.

Read →

Patterns

June 2026

5 min read

5 scroll animation patterns in under 10 lines

Logo reveal, sketch diagram, typewriter, cinematic hero, and spring icon — five production-ready patterns each in 3 lines using svg-scroll-draw presets. No config, no GSAP.

Read →

Deep Dive

June 2026

6 min read

Scroll-driven SVG path morphing with morphTo

How to interpolate SVG path shapes as you scroll using the morphTo option. Path compatibility, use cases, combining with fade and strokeColor, and a full API reference.

Read →

Performance

June 2026

7 min read

Zero-JS SVG scroll animations with native CSS

How svg-scroll-draw uses animation-timeline: view() to run SVG path animations on the browser compositor — zero per-frame JavaScript, no scroll listeners, 60fps guaranteed.

Read →

Comparison

May 2026

6 min read

svg-scroll-draw vs GSAP DrawSVG

Bundle size, licensing, side-by-side code, a full feature matrix, and a migration guide. The definitive comparison for developers choosing between the two.

Read →