Release history

Changelog

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

v2.10.0LatestAugust 2026
  • fixBoth native CSS fast paths ran a different easing curve from the JS engine they replace. ease-in and ease-out here are quadratics; the CSS keywords of the same name are fixed cubic-beziers, and they differ by up to 0.069 — around 7 points of progress mid-scroll. The fast path only engages where the browser supports animation-timeline: view(), so the same page animated one way in Chrome and Firefox and a measurably different way in Safari, which always falls back to the JS engine. scrollAnimate defaults to ease-out, so this was the default configuration. Both engines now emit a timing function that reproduces the JS curve exactly.
  • fixThe CDN bundle dropped the <scroll-draw> web component — caught before release, so no published version shipped without it. The sideEffects field added during this cycle listed only the built output, while the bundle is built from source, so the bundler tree-shook the custom element out of the very file the README tells CDN users to load. Verified against the published 2.9.0 tarball, which registers the element correctly.
  • fixImporting svg-scroll-draw/web-component on a server threw ReferenceError: HTMLElement is not defined, taking the whole render down. The class is now defined inside the same guard as the registration, so it degrades to a no-op like every other entry point.
  • fixA finished scrollDrawSequence or scrollAnimateSequence reported 0% progress: the active-step cursor walked past the end of the array, so getProgress() returned 0 at the exact moment everything had completed, and pause(), resume() and seek() became silent no-ops.
  • fixAny re-measure while scrolled shifted the trigger window for custom scrollContainer callers. The element offset inside a scroll container already includes the scroll position, and it was being added a second time — so a resize mid-scroll moved the window by however far the user had scrolled. A scrollHorizontal strip scrubbed halfway snapped back to its first panel with no scrolling at all. Three engines had their own copy of the arithmetic, and all three of it.
  • fixscrollHorizontal’s default distance ignored scrollContainer, subtracting the window width regardless — so inside a container narrower than the viewport the strip overshot the last panel and parked on empty space, and every nested-container caller had to pass distance by hand.
  • fixsplit: 'lines' in scrollText threw away the spaces between words. It groups word spans by offsetTop and moved only the words, leaving behind the whitespace spans the splitter creates to hold the gaps open, so "Every word here" rendered as "Everywordhere". Only visible with real layout, which is why jsdom never saw it.
  • fixscrollDrawTimeline.destroy() left every path frozen on its last frame, and with fade also half-transparent, for the rest of the page’s life. It now restores what it wrote, like every other module.
  • newrefresh() on scrollDraw, scrollDrawTimeline and the group APIs — re-measure path lengths and the trigger window after a layout change that fires no resize, such as a tab switching or a font swapping inside a fixed-height box. scrollPin and scrollHorizontal already had it.
  • newrespectReducedMotion on scrollDrawTimeline (default true), covering the time-driven loop only. Scroll scrubbing advances 1:1 with the user’s own input and keeps working; the loop replays off a timer with no scroll input at all, which is autonomous motion, and it had no check whatsoever.
  • newA development CDN build — svg-scroll-draw.dev.global.js. IS_DEV was derived from process.env.NODE_ENV, and process does not exist in a browser without a bundler, so every warning this library has was invisible to exactly the users with the fewest other diagnostics. The production CDN build now drops those warnings at build time instead of shipping and skipping them.
  • newBrowser coverage for all eight framework wrappers — React, Vue, Solid, Svelte, Angular, Astro, Nuxt and the web component — mounted for real and held to one contract: the engine runs, unmounting stops it (no leaked observers, no leaked frame loop), re-mounting works, and option changes reach the engine only where the wrapper says they do. Roughly a thousand lines that had been excluded from coverage because jsdom cannot mount them.
  • newAn SSR suite that runs with no DOM at all, covering every entry point: importing must not throw, and every public API must return an inert instance rather than reaching for document. Astro’s auto-init helpers defaulted their root to document at call time, so calling one from component frontmatter — on the server, which is Astro’s default — threw instead of doing nothing.
  • fixscrollHorizontal never moved the track in its own documented setup. The default trigger window was measured against the track, and a position:sticky stage pins that track at exactly one stage tall — so both ends resolved to the same scroll position, clamping progress at 0 forever. It had 100% line coverage in jsdom the whole time it was broken: every rect there is 0, so the window is equally degenerate and looks identical to a working one. The trigger is now measured from the container that actually holds the scroll room.
  • newtriggerElement on scrollHorizontal and scrollAnimate — measure the trigger window from an element other than the animated one. Needed when the animated element is sticky-pinned and cannot supply the scroll length itself. Setting it disables the native CSS fast path, since animation-timeline: view() can only measure its own subject.
  • newrespectReducedMotion on scrollAnimate (default true) and scrollHorizontal (default false). Horizontal scrubbing opts out deliberately: the transform advances only as the user scrolls, 1:1 with their input, so it is direct manipulation rather than motion that plays at them — and holding a final state instead would leave every panel but one unreachable inside the sticky overflow:hidden container, hiding the content from exactly the people who asked for less motion.
  • fixdestroy() left the last animated frame’s inline styles on the element. Destroying anything mid-animation froze it there permanently — a card destroyed at 34% stayed at opacity 0.34 and offset by 21px for the rest of the page’s life, which is worse than never having animated it. Affects scrollReveal, scrollAnimate and scrollParallax, and it also made scrollReveal’s documented "restore original styles" untrue.
  • fixscrollSnap fired onSnap twice for a single snap. The scroll event produced by its own animated scroll was treated as a fresh user gesture. Guaranteed under reduced motion and easing-dependent otherwise — a public callback that fires once or twice depending on the curve is worse than either.
  • newA zero-length trigger window is now a development warning rather than a silently inert element. That is the defect class above: everything looks configured and nothing ever moves.
  • newReal-browser coverage for every entry point — 30 to 175 tests per engine on Chromium, Firefox and WebKit. Every API and all eight framework wrappers are now exercised in a real browser rather than in jsdom, where getTotalLength() is stubbed and every rect is 0. scrollVideo verifies the painted frame against currentTime by canvas readback; scrollProgress drives real calc() widths off its custom properties instead of reading the values back in JS.
  • newMutation harness (scripts/mutation-check.mjs) — patches one line of source, rebuilds, and requires the single test named for that behaviour to fail. 56 mutations, all caught, including a regression guard for every fix in this release.
  • fixTwo test-harness faults that were producing false results: the "fixed" e2e viewport was silently overridden per browser project, leaving WebKit 100px shorter than the others, and the fixture server refused HTTP Range requests — which makes Chromium report media as non-seekable, so a correct scrollVideo looked completely inert.
v2.9.0June 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, a 2.5 KB alternative to GSAP SplitText. 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 — 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.

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).
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