Release history

Changelog

Every release of svg-scroll-draw, newest first.

v2.9.0LatestJune 2026
  • newscrollProgress (svg-scroll-draw/progress) — expose scroll progress as CSS custom properties (--scroll-progress, --scroll-progress-eased) on any element. Drive CSS animations, calc() expressions, and gradients with zero per-frame JS beyond the variable write.
  • newscrollHorizontal (svg-scroll-draw/horizontal) — drive translateX from vertical scroll. The Apple / Stripe horizontal scroll pattern. Supports distance, easing, trigger, onProgress, refresh().
  • new/vs-aos comparison page — svg-scroll-draw vs AOS vs ScrollReveal.js. 20-row feature matrix, side-by-side code, bundle bars.
  • new/vs-framer-motion comparison page — feature matrix, bundle comparison, side-by-side API, honest "when Framer Motion wins" section.
  • new/react-scroll-animation landing page — React-focused guide covering ScrollAnimate, ScrollText, ScrollCounter, ScrollPin components, hooks, and real-world patterns with copy-ready code.
  • new/nextjs-scroll-animation landing page — Next.js App Router guide covering SSR-safe usage, "use client" pattern, dynamic imports, and all v2 APIs.
  • newBlog post: "Horizontal scroll sections without GSAP" at /blog/horizontal-scroll-sections.
  • newBlog post: "Complete guide to scroll animations (2025)" at /blog/complete-guide-scroll-animations-2025. 12 patterns, all code included.
  • newBlog post: "Scroll animation performance" at /blog/scroll-animation-performance. Deep-dive on rAF budgets, native fast path, and avoiding layout thrash.
  • newHome page — "Compare" + "Framework guides" section linking to all comparison pages and the React/Next.js landing pages.
  • newLenis dist types — dist/lenis/index.d.ts and .d.mts shipped so svg-scroll-draw/lenis resolves TypeScript types without manual paths config.
  • new16 new tests — scrollProgress (8), scrollHorizontal (7), + velocity (1 updated). Total: 423.
v2.8.0June 2026
  • newscrollReveal (svg-scroll-draw/reveal) — one-line reveal animations. 7 presets (fadeUp/Down/Left/Right, scale, flip, flipX), custom from state (opacity, x, y, scale, rotate, rotateX, rotateY), stagger, easing, onEnter/onLeave. Drop-in replacement for AOS and ScrollReveal.js.
  • newvelocityScale on scrollAnimate — scale animation speed by scroll velocity. Pass true (default sensitivity) or a number. Forces JS engine.
  • newResizeObserver on scrollPin — auto-refresh pin dimensions when the element or document layout changes. No more manual refresh() calls on accordion/modal open.
  • newBlog post: "Replace AOS / ScrollReveal.js" at /blog/replace-aos-scrollreveal.
  • new19 new tests — scrollReveal (15), velocityScale (4). Total: 407.
v2.7.0June 2026
  • newScroll callbacks — onEnter, onLeave, onEnterBack, onLeaveBack added to both ScrollDrawOptions and ScrollAnimateOptions. Fire when scroll position crosses the trigger zone boundary in either direction. Forces JS engine.
  • newscrollPin (svg-scroll-draw/pin) — pin any element at a viewport position while the page scrolls past it. Wrapper-based layout (no layout shift). Supports pinDistance, top, all lifecycle callbacks, onProgress, refresh().
  • newscrollSnap (svg-scroll-draw/snap) — JS-powered section snapping with custom easing, configurable threshold, snapTo(index), getCurrentIndex(), and onSnap callback. Works on vertical and horizontal axes.
  • newcreateLenisAdapter (svg-scroll-draw/lenis) — Lenis v1 smooth-scroll adapter. Patches window.scrollY / window.pageYOffset with Lenis's virtual scroll value so all engines stay in sync. Lenis v2+ works out of the box without the adapter.
  • new/vs-gsap comparison page — bundle size bars, 20-row feature matrix, side-by-side API code for every major use case, license comparison, CTA.
  • newBlog post: "Pin sections on scroll without GSAP — scrollPin" at /blog/scroll-pin-without-gsap.
  • new30 new tests — scrollCallbacks (6), scrollPin (11), scrollSnap (7), lenis (6). Total: 388.
v2.6.0June 2026
  • newPlayground v2 tab — new "v2 ✦" tab in the SVG Playground with live interactive demos for scrollAnimate (5 effect presets, 5 easings, scrubber), scrollText (split/stagger/from-preset), and scrollCounter (4 format presets). Each panel has replay, scrubber, and a copy-ready code snippet.
  • newBlog post: "Animate multiple elements on scroll — one call" at /blog/scroll-animation-groups. Covers scrollAnimateGroup, scrollAnimateSequence, scrollParallaxGroup, scrollDrawGroup, scrollDrawSequence with real-world patterns for pricing grids, hero sections, and feature lists.
  • newREADME sub-path exports table updated — all v2 wrappers for Vue, Svelte, Solid, Angular, Astro, Nuxt, and group APIs documented.
  • fixJSON-LD structured data on home page: softwareVersion updated from 1.2.0 to 2.6.0.
v2.5.0June 2026
  • newscrollParallaxGroup — fan-out scrollParallax across multiple elements simultaneously. Same combined instance API as scrollAnimateGroup. Ships in svg-scroll-draw/group.
  • newDocsPage Angular v2 — full docs for ScrollAnimateRef, ScrollCounterRef, ScrollVideoRef, ScrollTextRef with Angular component examples.
  • newDocsPage Nuxt v2 — useScrollAnimate, useScrollText, useScrollCounter composables + component wrappers + createScrollDrawPlugin. Full parity with Vue/Svelte/Solid docs.
  • newDocsPage Astro v2 — initScrollAnimate, initScrollText, initScrollCounter, initAll data-attribute API with full code examples.
  • fixDesktop nav bug — burger menu was rendering on desktop across 7 pages (blog index, 5 blog posts, ExamplesPage). Wrapped all bare <MobileMenu /> in lg:hidden containers.
v2.4.0June 2026
  • newAngular v2 wrappers — ScrollAnimateRef, ScrollCounterRef, ScrollVideoRef, ScrollTextRef classes. Same class-based init(element, options)/destroy() pattern as ScrollDrawRef. Ships in svg-scroll-draw/angular.
  • newAstro v2 — initScrollAnimate(), initScrollText(), initScrollCounter() data-attribute auto-init functions. Plus initAll() convenience that runs all four inits in one call. Ships in svg-scroll-draw/astro.
  • newNuxt v2 — svg-scroll-draw/nuxt now re-exports all v2 Vue composables (useScrollAnimate, useScrollCounter, useScrollVideo, useScrollText) and components. createScrollDrawPlugin() globally registers all five components.
  • newscrollAnimateGroup — animate multiple HTML/SVG elements simultaneously with scrollAnimate options. Same fan-out + combined instance API as scrollDrawGroup. Ships in svg-scroll-draw/group.
  • newscrollAnimateSequence — animate multiple elements in strict sequence, each starting only after the previous reaches 100%. Ships in svg-scroll-draw/group.
  • newExamplesPage — three new v2 examples: Product Video Scrub (scrollVideo), Feature List Reveal (staggered scrollAnimate rows), Animate Group (scrollAnimateGroup fan-out).
  • newBlog post: "scrollAnimate in Vue 3, Svelte, and Solid.js — v2 framework guide" at /blog/vue-svelte-solid-v2. Covers composables, actions, hooks, component wrappers, real-world patterns, Nuxt plugin, Astro data-attributes.
v2.3.0June 2026
  • newVue 3 v2 composables — useScrollAnimate, useScrollCounter, useScrollVideo, useScrollText. Each returns a ref to bind to any element. Ships in svg-scroll-draw/vue alongside the existing useScrollDraw.
  • newVue 3 v2 components — <ScrollAnimate :options="...">, <ScrollCounter :to="...">, <ScrollVideo src="..." :options="...">, <ScrollText :options="..." tag="h2">. Ships in svg-scroll-draw/vue.
  • newSvelte v2 actions — scrollAnimate, scrollCounterAction, scrollVideoAction, scrollTextAction Svelte use: actions + createScrollAnimate, createScrollCounter, createScrollVideo, createScrollText helpers that expose getInstance(). Ships in svg-scroll-draw/svelte.
  • newSolid v2 hooks — useScrollAnimate, useScrollCounter, useScrollVideo, useScrollText returning ref setters + createScrollAnimate, createScrollCounter, createScrollVideo, createScrollText exposing getInstance(). Ships in svg-scroll-draw/solid.
  • newScrollTextInteractive demo — interactive home page section for scrollText: split mode picker (chars/words/lines), stagger slider (0–0.10), from-preset selector (Fade Up / Rotate In / Scale), scrubber, replay button, and live code block.
v2.2.0June 2026
  • newscrollVideo — tie <video>.currentTime to scroll position. Ships as svg-scroll-draw/video. The Apple / Stripe product-page scrub pattern. Supports from/to in seconds, preload strategy, onReady callback, and the full pause/resume/seek/replay/getProgress instance API.
  • newscrollText — split any element into chars, words, or lines and stagger-animate each unit on scroll. Ships as svg-scroll-draw/text. Free replacement for GSAP SplitText ($150+/yr). Accessibility: aria-label on container, aria-hidden on spans, destroy() restores original HTML.
  • newdevtools overlay — ships as svg-scroll-draw/devtools. Fixed panel showing all active animation types (draw/animate/counter/video/text), progress bars, trigger-start/end lines on the page, color-coded by type. enable(), disable(), toggle(), highlight(el). Cmd/Ctrl+Shift+S keyboard shortcut. Zero production bytes (dev-only guard).
  • newGlobal instance registry (src/core/registry.ts) — all engines (animate, counter, video, text) self-register on init and unregister on destroy. DevTools reads the registry.
  • newScrollVideo + ScrollText React components added to svg-scroll-draw/react.
  • new36 new tests — scrollVideo.test.ts (17), scrollText.test.ts (19). 358 total across 12 suites.
  • newDemo site — DocsPage v2.0–2.2 nav group with full option tables. Examples page: Pricing Card Reveal (scrollAnimate), Social Proof Strip (scrollCounter), Hero Headline Reveal (scrollText). Blog post: "Replace GSAP ScrollTrigger with scrollAnimate".
v2.0.0June 2026
  • newscrollAnimate — animate any CSS property (opacity, transform, color, background-color, filter, or any unit-based value) on any HTML or SVG element driven by scroll. Direct replacement for gsap.to + ScrollTrigger for the 80% case. Interpolates numbers, hex/rgb colors, transform functions (multi-function string parsing), and CSS unit values.
  • newNative CSS fast path — for opacity/transform with named easing and default trigger, scrollAnimate injects animation-timeline: view() CSS instead of running JS on every frame. Automatically falls back to the JS engine when native is unsupported or the config uses callbacks, custom triggers, once, etc.
  • newscrollCounter — animate a number from from to to as the element scrolls into view. Custom format function, decimals shorthand, all standard easing. Ships in the main bundle.
  • newscrollParallax — move any element at speed × elementHeight pixels of travel. Negative speed reverses direction. Thin wrapper over scrollAnimate. Ships in the main bundle.
  • newScrollAnimate + ScrollCounter React components added to svg-scroll-draw/react.
  • new50 new tests — scrollAnimate.test.ts (30), scrollCounter.test.ts (20). 322 total across 10 suites.
  • newinterpolateValue utility exported — public helper for CSS value interpolation (numbers, colors, transforms, unit values).
v2.0 — The Platform ShiftJune 2026

svg-scroll-draw grew from an SVG path drawing tool into a full scroll animation platform. Six new APIs — scrollAnimate, scrollCounter, scrollParallax, scrollVideo, scrollText, and devtools — added in v2.0–v2.2. Everything below this line is the original SVG draw library.

v1.8.0June 2026
  • newChangelog page — v1.4.0–v1.7.0 entries added with full release notes; "Latest" tag updated to v1.7.0.
  • newExamples page — new Presets card (14 examples total); PresetShowcase component shows all 5 presets side by side on the same SVG.
  • newPlayground — Preset shortcut dropdown at the top of the Motion tab. Selecting a preset instantly applies its options to the current state.
  • newBlog post: "5 scroll animation patterns in under 10 lines" at /blog/5-patterns-under-10-lines. Covers all 5 presets with Vanilla JS + React code. Blog index now shows 4 posts.
v1.7.0June 2026
  • newscrollDrawTimeline loop option — after the scroll-driven animation completes, automatically replay as a time-driven loop with no further scroll input needed. loop: true = infinite, loop: number = N additional iterations.
  • newscrollDrawTimeline loopDuration option — duration of each time-driven loop iteration in ms (default 1500).
  • fixdoReset() now correctly resets currentAlpha to 0, so getProgress() returns 0 immediately after replay().
  • newDocsPage updated — preset in Core Options, new Presets section, new CLI init section, timeline options fully documented (repeat, repeatDelay, loop, loopDuration, debug, label).
  • newREADME updated — Presets section with table, CLI in Install section, preset in options table, timeline table with all new options.
  • new272 passing tests (5 new loop tests).
v1.6.0June 2026
  • newpreset option — apply a named option bag as the base config. Five presets: sketch (staggered ease-in), reveal (fade + ease-out + once), typewriter (fast linear stagger), cinematic (slow ease-in-out + fade), spring (spring easing). User options always override.
  • newPRESETS export — the preset definitions are exported from the main package for inspection and extension.
  • newCLI init tool — npx svg-scroll-draw init scaffolds a ready-to-use starter file for React, Vue, Svelte, Solid, or Vanilla JS. Asks for framework, preset, easing, and selector.
  • newBlog post: "Scroll-driven SVG path morphing with morphTo" at /blog/scroll-path-morphing.
  • new267 passing tests (5 new preset tests).
v1.5.0June 2026
  • newscrollDrawTimeline repeat option — replay N times (or 'infinite') after completion with once: true. After delay, paths reset and animate again on next scroll-into-view.
  • newscrollDrawTimeline repeatDelay option — ms to wait before each repeat.
  • newscrollDrawTimeline debug option — inject a fixed HUD panel into document.body showing each track's scroll window as a coloured progress bar with live fill and global progress. Removed on destroy().
  • newscrollDrawTimeline label option — label shown in the debug panel header.
  • newBlog post: "Zero-JS SVG scroll animations with native CSS" at /blog/native-css-svg-scroll-animations.
  • new262 passing tests (8 new timeline tests).
v1.4.0May 2026
  • newCinematic class — the runtime bridge for Cinematic Studio. Reads a story.json and wires a scroll-scrubbed timeline with zero JS on the author's side. Import from svg-scroll-draw/cinematic.
  • newloadStory(story) — builds a sticky-stage scroll structure from the story, strokes draw paths across their scroll range, fades layers in. Honors prefers-reduced-motion.
  • newStory protocol types exported: Story, StoryScene, StoryAnimation, DrawAnimation, FadeAnimation, StoryEasing.
  • new254 passing tests (5 new cinematic tests).
v1.3.0May 2026
  • newautoplay option — trigger the animation on viewport enter instead of scroll. Draws over duration milliseconds, replays on each re-entry. Use once: true to play only the first time.
  • newduration option (number, default 1000ms) — controls how long the autoplay animation runs. Only used when autoplay: true.
  • newAll existing visual options work in autoplay mode — easing, stagger, fade, strokeColor, strokeWidth, fillOpacity, clip, morphTo, waypoints, repeat, repeatDelay, direction, onStart, onComplete, onProgress.
  • newFull instance API in autoplay mode — pause/resume freeze/unfreeze elapsed time; seek(0–1) jumps to a fraction of duration; replay restarts from scratch.
  • new249 passing tests (8 new) — autoplay draw, onStart, onComplete, seek, replay, destroy, clip mode, and once covered.
v1.2.0May 2026
  • newcreateBounce({ bounces, decay }) — bounce-out easing that rises to 1 then makes N dips before settling. Also available as the named string 'bounce'. Values stay within [0, 1]
  • newcreateElastic({ amplitude, period }) — elastic-out easing that overshoots past 1 and oscillates back. Also available as the named string 'elastic'. Based on the Penner elastic-out formula
  • newEasingName type updated — 'bounce' and 'elastic' are now valid TypeScript string values for the easing option
  • new241 passing tests (20 new) — createBounce and createElastic covered across boundary values, curve shape, overshoot, and factory parameterization
  • newSolid.js gallery demo on /examples — fine-grained reactivity graph (createSignal → createMemo → createEffect) in Solid brand blue
  • newFramework filter on /examples — pill strip (All / React / Vue 3 / Svelte / Solid / Vanilla / API) filters the 13-demo gallery client-side
  • newPage-specific OG images for /playground and /changelog; display:inline-block Satori crash fixed across all five OG images
  • new/blog/gsap-drawsvg-alternative — full SEO comparison page with bundle size chart, side-by-side code, 19-row feature matrix, and migration guide
  • newPlayground easing dropdown now includes bounce and elastic with live parameter sliders (Bounces/Decay and Amplitude/Period)
v1.1.0May 2026
  • newNative CSS scroll-driven rendering — on supporting browsers (Chrome, Edge, Firefox) the simple draw case runs on the compositor via animation-timeline: view() with zero per-frame JavaScript and no scroll/resize listeners
  • newnative option (default true) — automatically uses the CSS fast path when eligible; pass false to always use the JS engine. The full instance API works on both paths
  • new221 passing tests across 7 suites — engine-native.test.ts added to cover the native CSS path and fallback logic
  • fixBundle size claim corrected to ~4.4 KB gzipped across all docs (stale "<3 KB" figure removed)
v1.0.0May 2026
  • fixscrollDrawSequence chain was broken — engines now created upfront and paused; each step resumes only when the previous fires onComplete. activeIdx tracks correctly so pause/resume/seek/getProgress always target the active step.
  • new194 passing tests across 6 suites — engine, engine-options, group, timeline, framework wrappers (Angular, Astro, Svelte, Solid), and utilities
  • newFramework wrapper tests — Angular ScrollDrawRef, Astro initScrollDraw, Svelte scrollDraw action + createScrollDraw, Solid useScrollDraw + createScrollDraw
  • newRoot workspace test runner — npx vitest run from the repo root works via vitest.workspace.ts
  • newCI coverage threshold enforcement — Node 20 + 22 matrix
  • newJSDoc improvements — clip, morphTo, and scrollDrawSequence document their non-obvious edge cases inline
v0.7.0May 2026
  • newcreateSpring({ tension, friction }) — parameterize the spring easing instead of the hardcoded preset
  • newsvg-scroll-draw/timeline — scrollDrawTimeline API for independent per-track scroll windows within a single range
  • new--scroll-draw-progress CSS custom property — set on the container every frame, drive CSS animations without JS callbacks
  • newDocs page (/docs) — full API reference with sidebar navigation and IntersectionObserver-based active tracking
  • newGroup & Sequence demos on the examples page
  • newTimeline API demo on the examples page
v0.6.2May 2026
  • newfillOpacity — animate fill opacity in sync with the stroke draw. Use [0, 1] to flood a fill as the outline traces itself
  • newuseScrollDrawProgress React hook — reactive 0–1 scroll progress for any element, same trigger/easing API
  • newsvg-scroll-draw/web-component subpath export — <scroll-draw> importable directly, not just via CDN
v0.6.0May 2026
  • newPause / Resume / Seek — full imperative playback control on every instance
  • newPath Morphing (morphTo) — interpolate a path's d attribute to a target shape on scroll
  • newVelocity Scale (velocityScale) — draw speed scales with scroll speed
  • newRepeat / RepeatDelay — replay N times or loop infinitely
  • newAstro adapter (svg-scroll-draw/astro) — data-attribute API with initScrollDraw()
  • newNuxt adapter (svg-scroll-draw/nuxt) — useScrollDraw() composable for Nuxt 3
  • newGroup API (svg-scroll-draw/group) — scrollDrawGroup and scrollDrawSequence
  • newWeb Component — <scroll-draw> custom element, auto-registers via CDN
v0.4.0May 2026
  • newSolid.js adapter (svg-scroll-draw/solid) — useScrollDraw and createScrollDraw hooks
  • newAngular adapter (svg-scroll-draw/angular) — ScrollDrawRef class for AfterViewInit lifecycle
  • newStroke color animation (strokeColor) — static or [from, to] interpolation
  • newStroke width animation (strokeWidth) — static or [from, to] interpolation
  • newAuto Reverse (autoReverse) — follows scroll direction automatically
  • newCustom scroll container (scrollContainer)
  • newWaypoints — fire callbacks at specific 0–1 progress thresholds
  • newDelay option — milliseconds before the engine starts observing
v0.3.0May 2026
  • newSvelte adapter (svg-scroll-draw/svelte) — use:scrollDraw action and createScrollDraw
  • newHorizontal scroll support (axis: "x")
  • newReplay API — instance.replay() to re-trigger imperatively
  • newSpring easing — physics-based overshoot-and-settle curve
  • newOnce mode (once) — draw once and stay drawn
  • newDebug overlay (debug) — visualizes trigger zones in dev mode
  • newonStart lifecycle hook
v0.2.0May 2026
  • newVue 3 adapter (svg-scroll-draw/vue) — <ScrollDraw> component and useScrollDraw composable
  • newSVG Playground at /playground — live SVG editor with all options
  • newInteractive demo with easing and speed controls
  • fixOpenGraph and Twitter preview card image URLs
v0.1.0Initial releaseMay 2026
  • newCore scrollDraw() function — zero dependencies, ~3 KB gzipped
  • newReact wrapper (svg-scroll-draw/react) — <ScrollDraw> component
  • newEasing curves — linear, ease-in, ease-out, ease-in-out
  • newTrigger system — element/viewport anchor strings
  • newStagger, fade, direction, once, speed options
  • newIntersectionObserver viewport culling
  • newSSR safe — window guards, Next.js App Router compatible
  • newrect and circle support via perimeter approximation
  • newCDN IIFE bundle at dist/cdn/svg-scroll-draw.global.js