svg-scroll-draw 0.1.0 → 0.2.0

package/dist/cdn/svg-scroll-draw.global.js

@@ -1 +1 @@
-"use strict";var SvgScrollDraw=(()=>{var g=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var R=Object.prototype.hasOwnProperty;var V=(e,t)=>{for(var n in t)g(e,n,{get:t[n],enumerable:!0})},C=(e,t,n,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of N(t))!R.call(e,s)&&s!==n&&g(e,s,{get:()=>t[s],enumerable:!(i=z(t,s))||i.enumerable});return e};var B=e=>C(g({},"__esModule",{value:!0}),e);var j={};V(j,{scrollDraw:()=>_});var b={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e};function h(e="top bottom"){let t=e.trim().split(/\s+/).filter(Boolean),[n="top",i="bottom"]=t;return{element:n,viewport:i}}function T(e,t,n,i){switch(i){case"top":return e+n;case"center":return e+n+t/2;case"bottom":return e+n+t;default:return e+n}}function A(e,t){switch(e){case"top":return 0;case"center":return t/2;case"bottom":return t;default:return t}}function M(e,t,n){return Math.min(n,Math.max(t,e))}function x(e,t,n,i){return n===t?0:M((e-t)/(n-t)*i,0,1)}function I(e,t,n,i,s){let a=T(e.top,e.height,t,i.element)-A(i.viewport,n),c=T(e.top,e.height,t,s.element)-A(s.viewport,n);return{tStart:a,tEnd:c}}function k(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t)}function P(e){let t=e.getAttribute("stroke"),n=e.getAttribute("fill");!t||t==="none"?k("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&k("Element has a fill \u2014 it may obscure the stroke animation.",e)}function O(e,t={}){if(typeof window>"u")return{destroy:()=>{}};let{selector:n="path, polyline, line, polygon",speed:i=1,fade:s=!1,easing:a="linear",trigger:c={},onComplete:G}=t,L=typeof a=="function"?a:b[a]??b.linear,$=h(c.start??"top bottom"),F=h(c.end??"bottom top"),p=Array.from(e.querySelectorAll(n)),l=[],y=0,E=0,f=!1,u=0,d=!1;function v(){let r=e.getBoundingClientRect(),o=I({top:r.top,height:r.height},window.scrollY,window.innerHeight,$,F);y=o.tStart,E=o.tEnd}p.forEach(r=>{P(r);let o=r.getTotalLength();l.push(o),r.style.strokeDasharray=`${o}`,r.style.strokeDashoffset=`${o}`,s&&(r.style.opacity="0")}),v();function S(){if(!d)return;let r=L(x(window.scrollY,y,E,i));p.forEach((o,q)=>{o.style.strokeDashoffset=`${l[q]*(1-r)}`,s&&(o.style.opacity=`${r}`)}),r>=1&&!f?(f=!0,G?.()):r<1&&(f=!1),u=requestAnimationFrame(S)}let D=new IntersectionObserver(r=>{r.forEach(o=>{d=o.isIntersecting,d?u=requestAnimationFrame(S):cancelAnimationFrame(u)})});D.observe(e);let w;function m(){clearTimeout(w),w=setTimeout(()=>{p.forEach((r,o)=>{l[o]=r.getTotalLength(),r.style.strokeDasharray=`${l[o]}`}),v()},150)}return window.addEventListener("resize",m),window.addEventListener("orientationchange",m),{destroy(){cancelAnimationFrame(u),D.disconnect(),window.removeEventListener("resize",m),window.removeEventListener("orientationchange",m),clearTimeout(w)}}}function _(e,t){if(typeof window>"u")return{destroy:()=>{}};let n=typeof e=="string"?document.querySelector(e):e;return n?O(n,t):(console.warn("[svg-scroll-draw] Container not found:",e),{destroy:()=>{}})}return B(j);})();
+"use strict";var SvgScrollDraw=(()=>{var A=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var J=Object.prototype.hasOwnProperty;var K=(e,t)=>{for(var r in t)A(e,r,{get:t[r],enumerable:!0})},Q=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of j(t))!J.call(e,o)&&o!==r&&A(e,o,{get:()=>t[o],enumerable:!(n=_(t,o))||n.enumerable});return e};var U=e=>Q(A({},"__esModule",{value:!0}),e);var Z={};K(Z,{scrollDraw:()=>Y});var D={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e};function x(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return{element:"top",viewport:t};let r=t.split(/\s+/).filter(Boolean),[n="top",o="bottom"]=r;return{element:n,viewport:o}}function C(e,t,r,n){switch(n){case"top":return e+r;case"center":return e+r+t/2;case"bottom":return e+r+t;default:return e+r}}function G(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case"top":return 0;case"center":return t/2;case"bottom":return t;default:return t}}function I(e){let t=e.tagName.toLowerCase();if(t==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),n=parseFloat(e.getAttribute("height")??"0");return 2*(r+n)}if(t==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function W(e,t,r){return Math.min(r,Math.max(t,e))}function V(e,t,r,n){return r===t?0:W((e-t)/(r-t)*n,0,1)}function N(e,t,r,n,o){let a=C(e.top,e.height,t,n.element)-G(n.viewport,r),c=C(e.top,e.height,t,o.element)-G(o.viewport,r);return{tStart:a,tEnd:c}}function q(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t)}function X(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?q("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&q("Element has a fill \u2014 it may obscure the stroke animation.",e)}function w(e,t={}){if(typeof window>"u")return{destroy:()=>{}};let{selector:r="path, polyline, line, polygon, rect, circle",speed:n=1,fade:o=!1,easing:a="linear",trigger:c={},stagger:m=0,direction:p="forward",onProgress:z,onComplete:M}=t,P=typeof a=="function"?a:D[a]??D.linear,R=x(c.start??"top bottom"),B=x(c.end??"bottom top"),b=Array.from(e.querySelectorAll(r)),u=[],h=0,y=0,E=!1,f=0,v=!1;function k(){let s=e.getBoundingClientRect(),i=N({top:s.top,height:s.height},window.scrollY,window.innerHeight,R,B);h=i.tStart,y=i.tEnd}b.forEach(s=>{X(s);let i=I(s);u.push(i),s.style.strokeDasharray=`${i}`,s.style.strokeDashoffset=p==="reverse"?"0":`${i}`,o&&(s.style.opacity=p==="reverse"?"1":"0")}),k();function F(){if(!v)return;let s=y-h,i=!0;b.forEach(($,g)=>{let L=g*m*s,l=P(V(window.scrollY,h+L,y+L,n));$.style.strokeDashoffset=p==="reverse"?`${u[g]*l}`:`${u[g]*(1-l)}`,o&&($.style.opacity=p==="reverse"?`${1-l}`:`${l}`),g===0&&z?.(l),l<1&&(i=!1)}),i&&!E?(E=!0,M?.()):i||(E=!1),f=requestAnimationFrame(F)}let O=new IntersectionObserver(s=>{s.forEach(i=>{v=i.isIntersecting,v?f=requestAnimationFrame(F):cancelAnimationFrame(f)})});O.observe(e);let S;function d(){clearTimeout(S),S=setTimeout(()=>{b.forEach((s,i)=>{u[i]=I(s),s.style.strokeDasharray=`${u[i]}`}),k()},150)}return window.addEventListener("resize",d),window.addEventListener("orientationchange",d),{destroy(){cancelAnimationFrame(f),O.disconnect(),window.removeEventListener("resize",d),window.removeEventListener("orientationchange",d),clearTimeout(S)}}}function Y(e,t){if(typeof window>"u")return{destroy:()=>{}};let r=typeof e=="string"?document.querySelector(e):e;return r?w(r,t):(console.warn("[svg-scroll-draw] Container not found:",e),{destroy:()=>{}})}var T=class extends HTMLElement{constructor(){super(...arguments);this.instance=null}connectedCallback(){let r={},n=this.getAttribute("speed"),o=this.getAttribute("easing"),a=this.getAttribute("stagger"),c=this.getAttribute("direction"),m=this.getAttribute("selector");n&&(r.speed=parseFloat(n)),o&&(r.easing=o),a&&(r.stagger=parseFloat(a)),c&&(r.direction=c),m&&(r.selector=m),this.hasAttribute("fade")&&(r.fade=this.getAttribute("fade")!=="false"),this.instance=w(this,r)}disconnectedCallback(){this.instance?.destroy(),this.instance=null}};typeof customElements<"u"&&!customElements.get("scroll-draw")&&customElements.define("scroll-draw",T);return U(Z);})();

package/dist/index.cjs

@@ -1 +1 @@
-'use strict';var g={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e};function b(e="top bottom"){let t=e.trim().split(/\s+/).filter(Boolean),[n="top",i="bottom"]=t;return {element:n,viewport:i}}function D(e,t,n,i){switch(i){case "top":return e+n;case "center":return e+n+t/2;case "bottom":return e+n+t;default:return e+n}}function T(e,t){switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function q(e,t,n){return Math.min(n,Math.max(t,e))}function A(e,t,n,i){return n===t?0:q((e-t)/(n-t)*i,0,1)}function x(e,t,n,i,s){let a=D(e.top,e.height,t,i.element)-T(i.viewport,n),c=D(e.top,e.height,t,s.element)-T(s.viewport,n);return {tStart:a,tEnd:c}}function I(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function z(e){let t=e.getAttribute("stroke"),n=e.getAttribute("fill");!t||t==="none"?I("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&I("Element has a fill \u2014 it may obscure the stroke animation.",e);}function k(e,t={}){if(typeof window>"u")return {destroy:()=>{}};let{selector:n="path, polyline, line, polygon",speed:i=1,fade:s=false,easing:a="linear",trigger:c={},onComplete:O}=t,G=typeof a=="function"?a:g[a]??g.linear,L=b(c.start??"top bottom"),$=b(c.end??"bottom top"),p=Array.from(e.querySelectorAll(n)),l=[],h=0,y=0,f=false,u=0,d=false;function E(){let r=e.getBoundingClientRect(),o=x({top:r.top,height:r.height},window.scrollY,window.innerHeight,L,$);h=o.tStart,y=o.tEnd;}p.forEach(r=>{z(r);let o=r.getTotalLength();l.push(o),r.style.strokeDasharray=`${o}`,r.style.strokeDashoffset=`${o}`,s&&(r.style.opacity="0");}),E();function v(){if(!d)return;let r=G(A(window.scrollY,h,y,i));p.forEach((o,F)=>{o.style.strokeDashoffset=`${l[F]*(1-r)}`,s&&(o.style.opacity=`${r}`);}),r>=1&&!f?(f=true,O?.()):r<1&&(f=false),u=requestAnimationFrame(v);}let S=new IntersectionObserver(r=>{r.forEach(o=>{d=o.isIntersecting,d?u=requestAnimationFrame(v):cancelAnimationFrame(u);});});S.observe(e);let w;function m(){clearTimeout(w),w=setTimeout(()=>{p.forEach((r,o)=>{l[o]=r.getTotalLength(),r.style.strokeDasharray=`${l[o]}`;}),E();},150);}return window.addEventListener("resize",m),window.addEventListener("orientationchange",m),{destroy(){cancelAnimationFrame(u),S.disconnect(),window.removeEventListener("resize",m),window.removeEventListener("orientationchange",m),clearTimeout(w);}}}function B(e,t){if(typeof window>"u")return {destroy:()=>{}};let n=typeof e=="string"?document.querySelector(e):e;return n?k(n,t):(console.warn("[svg-scroll-draw] Container not found:",e),{destroy:()=>{}})}exports.scrollDraw=B;
+'use strict';var v={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e};function S(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let r=t.split(/\s+/).filter(Boolean),[s="top",i="bottom"]=r;return {element:s,viewport:i}}function k(e,t,r,s){switch(s){case "top":return e+r;case "center":return e+r+t/2;case "bottom":return e+r+t;default:return e+r}}function F(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function D(e){let t=e.tagName.toLowerCase();if(t==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),s=parseFloat(e.getAttribute("height")??"0");return 2*(r+s)}if(t==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function M(e,t,r){return Math.min(r,Math.max(t,e))}function L(e,t,r,s){return r===t?0:M((e-t)/(r-t)*s,0,1)}function G(e,t,r,s,i){let c=k(e.top,e.height,t,s.element)-F(s.viewport,r),u=k(e.top,e.height,t,i.element)-F(i.viewport,r);return {tStart:c,tEnd:u}}function O(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function B(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?O("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&O("Element has a fill \u2014 it may obscure the stroke animation.",e);}function V(e,t={}){if(typeof window>"u")return {destroy:()=>{}};let{selector:r="path, polyline, line, polygon, rect, circle",speed:s=1,fade:i=false,easing:c="linear",trigger:u={},stagger:C=0,direction:m="forward",onProgress:N,onComplete:q}=t,z=typeof c=="function"?c:v[c]??v.linear,P=S(u.start??"top bottom"),R=S(u.end??"bottom top"),d=Array.from(e.querySelectorAll(r)),l=[],w=0,b=0,h=false,p=0,y=false;function A(){let n=e.getBoundingClientRect(),o=G({top:n.top,height:n.height},window.scrollY,window.innerHeight,P,R);w=o.tStart,b=o.tEnd;}d.forEach(n=>{B(n);let o=D(n);l.push(o),n.style.strokeDasharray=`${o}`,n.style.strokeDashoffset=m==="reverse"?"0":`${o}`,i&&(n.style.opacity=m==="reverse"?"1":"0");}),A();function x(){if(!y)return;let n=b-w,o=true;d.forEach((I,g)=>{let $=g*C*n,a=z(L(window.scrollY,w+$,b+$,s));I.style.strokeDashoffset=m==="reverse"?`${l[g]*a}`:`${l[g]*(1-a)}`,i&&(I.style.opacity=m==="reverse"?`${1-a}`:`${a}`),g===0&&N?.(a),a<1&&(o=false);}),o&&!h?(h=true,q?.()):o||(h=false),p=requestAnimationFrame(x);}let T=new IntersectionObserver(n=>{n.forEach(o=>{y=o.isIntersecting,y?p=requestAnimationFrame(x):cancelAnimationFrame(p);});});T.observe(e);let E;function f(){clearTimeout(E),E=setTimeout(()=>{d.forEach((n,o)=>{l[o]=D(n),n.style.strokeDasharray=`${l[o]}`;}),A();},150);}return window.addEventListener("resize",f),window.addEventListener("orientationchange",f),{destroy(){cancelAnimationFrame(p),T.disconnect(),window.removeEventListener("resize",f),window.removeEventListener("orientationchange",f),clearTimeout(E);}}}function Q(e,t){if(typeof window>"u")return {destroy:()=>{}};let r=typeof e=="string"?document.querySelector(e):e;return r?V(r,t):(console.warn("[svg-scroll-draw] Container not found:",e),{destroy:()=>{}})}exports.scrollDraw=Q;

package/dist/index.d.mts

@@ -9,6 +9,12 @@ interface ScrollDrawOptions {
     fade?: boolean;
     easing?: EasingName | ((t: number) => number);
     trigger?: TriggerConfig;
+    /** Normalized scroll-progress offset between each path starting (0–1). e.g. 0.15 → each path begins 15% of the scroll range after the previous. */
+    stagger?: number;
+    /** 'forward' draws the path in (default). 'reverse' erases — path starts fully drawn and disappears as you scroll. */
+    direction?: 'forward' | 'reverse';
+    /** Called every animation frame with the current draw progress (0–1) of the first path. */
+    onProgress?: (alpha: number) => void;
     onComplete?: () => void;
 }
 interface ScrollDrawInstance {

package/dist/index.d.ts

@@ -9,6 +9,12 @@ interface ScrollDrawOptions {
     fade?: boolean;
     easing?: EasingName | ((t: number) => number);
     trigger?: TriggerConfig;
+    /** Normalized scroll-progress offset between each path starting (0–1). e.g. 0.15 → each path begins 15% of the scroll range after the previous. */
+    stagger?: number;
+    /** 'forward' draws the path in (default). 'reverse' erases — path starts fully drawn and disappears as you scroll. */
+    direction?: 'forward' | 'reverse';
+    /** Called every animation frame with the current draw progress (0–1) of the first path. */
+    onProgress?: (alpha: number) => void;
     onComplete?: () => void;
 }
 interface ScrollDrawInstance {

package/dist/index.mjs

@@ -1 +1 @@
-var g={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e};function b(e="top bottom"){let t=e.trim().split(/\s+/).filter(Boolean),[n="top",i="bottom"]=t;return {element:n,viewport:i}}function D(e,t,n,i){switch(i){case "top":return e+n;case "center":return e+n+t/2;case "bottom":return e+n+t;default:return e+n}}function T(e,t){switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function q(e,t,n){return Math.min(n,Math.max(t,e))}function A(e,t,n,i){return n===t?0:q((e-t)/(n-t)*i,0,1)}function x(e,t,n,i,s){let a=D(e.top,e.height,t,i.element)-T(i.viewport,n),c=D(e.top,e.height,t,s.element)-T(s.viewport,n);return {tStart:a,tEnd:c}}function I(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function z(e){let t=e.getAttribute("stroke"),n=e.getAttribute("fill");!t||t==="none"?I("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&I("Element has a fill \u2014 it may obscure the stroke animation.",e);}function k(e,t={}){if(typeof window>"u")return {destroy:()=>{}};let{selector:n="path, polyline, line, polygon",speed:i=1,fade:s=false,easing:a="linear",trigger:c={},onComplete:O}=t,G=typeof a=="function"?a:g[a]??g.linear,L=b(c.start??"top bottom"),$=b(c.end??"bottom top"),p=Array.from(e.querySelectorAll(n)),l=[],h=0,y=0,f=false,u=0,d=false;function E(){let r=e.getBoundingClientRect(),o=x({top:r.top,height:r.height},window.scrollY,window.innerHeight,L,$);h=o.tStart,y=o.tEnd;}p.forEach(r=>{z(r);let o=r.getTotalLength();l.push(o),r.style.strokeDasharray=`${o}`,r.style.strokeDashoffset=`${o}`,s&&(r.style.opacity="0");}),E();function v(){if(!d)return;let r=G(A(window.scrollY,h,y,i));p.forEach((o,F)=>{o.style.strokeDashoffset=`${l[F]*(1-r)}`,s&&(o.style.opacity=`${r}`);}),r>=1&&!f?(f=true,O?.()):r<1&&(f=false),u=requestAnimationFrame(v);}let S=new IntersectionObserver(r=>{r.forEach(o=>{d=o.isIntersecting,d?u=requestAnimationFrame(v):cancelAnimationFrame(u);});});S.observe(e);let w;function m(){clearTimeout(w),w=setTimeout(()=>{p.forEach((r,o)=>{l[o]=r.getTotalLength(),r.style.strokeDasharray=`${l[o]}`;}),E();},150);}return window.addEventListener("resize",m),window.addEventListener("orientationchange",m),{destroy(){cancelAnimationFrame(u),S.disconnect(),window.removeEventListener("resize",m),window.removeEventListener("orientationchange",m),clearTimeout(w);}}}function B(e,t){if(typeof window>"u")return {destroy:()=>{}};let n=typeof e=="string"?document.querySelector(e):e;return n?k(n,t):(console.warn("[svg-scroll-draw] Container not found:",e),{destroy:()=>{}})}export{B as scrollDraw};
+var v={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e};function S(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let r=t.split(/\s+/).filter(Boolean),[s="top",i="bottom"]=r;return {element:s,viewport:i}}function k(e,t,r,s){switch(s){case "top":return e+r;case "center":return e+r+t/2;case "bottom":return e+r+t;default:return e+r}}function F(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function D(e){let t=e.tagName.toLowerCase();if(t==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),s=parseFloat(e.getAttribute("height")??"0");return 2*(r+s)}if(t==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function M(e,t,r){return Math.min(r,Math.max(t,e))}function L(e,t,r,s){return r===t?0:M((e-t)/(r-t)*s,0,1)}function G(e,t,r,s,i){let c=k(e.top,e.height,t,s.element)-F(s.viewport,r),u=k(e.top,e.height,t,i.element)-F(i.viewport,r);return {tStart:c,tEnd:u}}function O(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function B(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?O("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&O("Element has a fill \u2014 it may obscure the stroke animation.",e);}function V(e,t={}){if(typeof window>"u")return {destroy:()=>{}};let{selector:r="path, polyline, line, polygon, rect, circle",speed:s=1,fade:i=false,easing:c="linear",trigger:u={},stagger:C=0,direction:m="forward",onProgress:N,onComplete:q}=t,z=typeof c=="function"?c:v[c]??v.linear,P=S(u.start??"top bottom"),R=S(u.end??"bottom top"),d=Array.from(e.querySelectorAll(r)),l=[],w=0,b=0,h=false,p=0,y=false;function A(){let n=e.getBoundingClientRect(),o=G({top:n.top,height:n.height},window.scrollY,window.innerHeight,P,R);w=o.tStart,b=o.tEnd;}d.forEach(n=>{B(n);let o=D(n);l.push(o),n.style.strokeDasharray=`${o}`,n.style.strokeDashoffset=m==="reverse"?"0":`${o}`,i&&(n.style.opacity=m==="reverse"?"1":"0");}),A();function x(){if(!y)return;let n=b-w,o=true;d.forEach((I,g)=>{let $=g*C*n,a=z(L(window.scrollY,w+$,b+$,s));I.style.strokeDashoffset=m==="reverse"?`${l[g]*a}`:`${l[g]*(1-a)}`,i&&(I.style.opacity=m==="reverse"?`${1-a}`:`${a}`),g===0&&N?.(a),a<1&&(o=false);}),o&&!h?(h=true,q?.()):o||(h=false),p=requestAnimationFrame(x);}let T=new IntersectionObserver(n=>{n.forEach(o=>{y=o.isIntersecting,y?p=requestAnimationFrame(x):cancelAnimationFrame(p);});});T.observe(e);let E;function f(){clearTimeout(E),E=setTimeout(()=>{d.forEach((n,o)=>{l[o]=D(n),n.style.strokeDasharray=`${l[o]}`;}),A();},150);}return window.addEventListener("resize",f),window.addEventListener("orientationchange",f),{destroy(){cancelAnimationFrame(p),T.disconnect(),window.removeEventListener("resize",f),window.removeEventListener("orientationchange",f),clearTimeout(E);}}}function Q(e,t){if(typeof window>"u")return {destroy:()=>{}};let r=typeof e=="string"?document.querySelector(e):e;return r?V(r,t):(console.warn("[svg-scroll-draw] Container not found:",e),{destroy:()=>{}})}export{Q as scrollDraw};

package/dist/react/index.cjs

@@ -1 +1 @@
-'use strict';var react=require('react'),jsxRuntime=require('react/jsx-runtime');var b={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e};function w(e="top bottom"){let t=e.trim().split(/\s+/).filter(Boolean),[r="top",i="bottom"]=t;return {element:r,viewport:i}}function D(e,t,r,i){switch(i){case "top":return e+r;case "center":return e+r+t/2;case "bottom":return e+r+t;default:return e+r}}function T(e,t){switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function $(e,t,r){return Math.min(r,Math.max(t,e))}function A(e,t,r,i){return r===t?0:$((e-t)/(r-t)*i,0,1)}function k(e,t,r,i,s){let a=D(e.top,e.height,t,i.element)-T(i.viewport,r),c=D(e.top,e.height,t,s.element)-T(s.viewport,r);return {tStart:a,tEnd:c}}function x(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function F(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?x("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&x("Element has a fill \u2014 it may obscure the stroke animation.",e);}function R(e,t={}){if(typeof window>"u")return {destroy:()=>{}};let{selector:r="path, polyline, line, polygon",speed:i=1,fade:s=false,easing:a="linear",trigger:c={},onComplete:I}=t,L=typeof a=="function"?a:b[a]??b.linear,N=w(c.start??"top bottom"),G=w(c.end??"bottom top"),p=Array.from(e.querySelectorAll(r)),l=[],h=0,y=0,f=false,u=0,g=false;function E(){let n=e.getBoundingClientRect(),o=k({top:n.top,height:n.height},window.scrollY,window.innerHeight,N,G);h=o.tStart,y=o.tEnd;}p.forEach(n=>{F(n);let o=n.getTotalLength();l.push(o),n.style.strokeDasharray=`${o}`,n.style.strokeDashoffset=`${o}`,s&&(n.style.opacity="0");}),E();function v(){if(!g)return;let n=L(A(window.scrollY,h,y,i));p.forEach((o,O)=>{o.style.strokeDashoffset=`${l[O]*(1-n)}`,s&&(o.style.opacity=`${n}`);}),n>=1&&!f?(f=true,I?.()):n<1&&(f=false),u=requestAnimationFrame(v);}let S=new IntersectionObserver(n=>{n.forEach(o=>{g=o.isIntersecting,g?u=requestAnimationFrame(v):cancelAnimationFrame(u);});});S.observe(e);let d;function m(){clearTimeout(d),d=setTimeout(()=>{p.forEach((n,o)=>{l[o]=n.getTotalLength(),n.style.strokeDasharray=`${l[o]}`;}),E();},150);}return window.addEventListener("resize",m),window.addEventListener("orientationchange",m),{destroy(){cancelAnimationFrame(u),S.disconnect(),window.removeEventListener("resize",m),window.removeEventListener("orientationchange",m),clearTimeout(d);}}}function K({children:e,className:t,style:r,...i}){let s=react.useRef(null);return react.useEffect(()=>{if(!s.current)return;let a=R(s.current,i);return ()=>a.destroy()},[]),jsxRuntime.jsx("div",{ref:s,className:t,style:r,children:e})}exports.ScrollDraw=K;
+'use strict';var react=require('react'),jsxRuntime=require('react/jsx-runtime');var v={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e};function S(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let r=t.split(/\s+/).filter(Boolean),[s="top",i="bottom"]=r;return {element:s,viewport:i}}function F(e,t,r,s){switch(s){case "top":return e+r;case "center":return e+r+t/2;case "bottom":return e+r+t;default:return e+r}}function L(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function D(e){let t=e.tagName.toLowerCase();if(t==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),s=parseFloat(e.getAttribute("height")??"0");return 2*(r+s)}if(t==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function q(e,t,r){return Math.min(r,Math.max(t,e))}function R(e,t,r,s){return r===t?0:q((e-t)/(r-t)*s,0,1)}function I(e,t,r,s,i){let a=F(e.top,e.height,t,s.element)-L(s.viewport,r),u=F(e.top,e.height,t,i.element)-L(i.viewport,r);return {tStart:a,tEnd:u}}function N(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function B(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?N("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&N("Element has a fill \u2014 it may obscure the stroke animation.",e);}function G(e,t={}){if(typeof window>"u")return {destroy:()=>{}};let{selector:r="path, polyline, line, polygon, rect, circle",speed:s=1,fade:i=false,easing:a="linear",trigger:u={},stagger:P=0,direction:m="forward",onProgress:O,onComplete:V}=t,C=typeof a=="function"?a:v[a]??v.linear,z=S(u.start??"top bottom"),M=S(u.end??"bottom top"),d=Array.from(e.querySelectorAll(r)),l=[],w=0,b=0,h=false,p=0,y=false;function A(){let n=e.getBoundingClientRect(),o=I({top:n.top,height:n.height},window.scrollY,window.innerHeight,z,M);w=o.tStart,b=o.tEnd;}d.forEach(n=>{B(n);let o=D(n);l.push(o),n.style.strokeDasharray=`${o}`,n.style.strokeDashoffset=m==="reverse"?"0":`${o}`,i&&(n.style.opacity=m==="reverse"?"1":"0");}),A();function T(){if(!y)return;let n=b-w,o=true;d.forEach(($,g)=>{let k=g*P*n,c=C(R(window.scrollY,w+k,b+k,s));$.style.strokeDashoffset=m==="reverse"?`${l[g]*c}`:`${l[g]*(1-c)}`,i&&($.style.opacity=m==="reverse"?`${1-c}`:`${c}`),g===0&&O?.(c),c<1&&(o=false);}),o&&!h?(h=true,V?.()):o||(h=false),p=requestAnimationFrame(T);}let x=new IntersectionObserver(n=>{n.forEach(o=>{y=o.isIntersecting,y?p=requestAnimationFrame(T):cancelAnimationFrame(p);});});x.observe(e);let E;function f(){clearTimeout(E),E=setTimeout(()=>{d.forEach((n,o)=>{l[o]=D(n),n.style.strokeDasharray=`${l[o]}`;}),A();},150);}return window.addEventListener("resize",f),window.addEventListener("orientationchange",f),{destroy(){cancelAnimationFrame(p),x.disconnect(),window.removeEventListener("resize",f),window.removeEventListener("orientationchange",f),clearTimeout(E);}}}function j({children:e,className:t,style:r,...s}){let i=react.useRef(null);return react.useEffect(()=>{if(!i.current)return;let a=G(i.current,s);return ()=>a.destroy()},[]),jsxRuntime.jsx("div",{ref:i,className:t,style:r,children:e})}exports.ScrollDraw=j;

package/dist/react/index.d.mts

@@ -12,6 +12,12 @@ interface ScrollDrawOptions {
     fade?: boolean;
     easing?: EasingName | ((t: number) => number);
     trigger?: TriggerConfig;
+    /** Normalized scroll-progress offset between each path starting (0–1). e.g. 0.15 → each path begins 15% of the scroll range after the previous. */
+    stagger?: number;
+    /** 'forward' draws the path in (default). 'reverse' erases — path starts fully drawn and disappears as you scroll. */
+    direction?: 'forward' | 'reverse';
+    /** Called every animation frame with the current draw progress (0–1) of the first path. */
+    onProgress?: (alpha: number) => void;
     onComplete?: () => void;
 }
 

package/dist/react/index.d.ts

@@ -12,6 +12,12 @@ interface ScrollDrawOptions {
     fade?: boolean;
     easing?: EasingName | ((t: number) => number);
     trigger?: TriggerConfig;
+    /** Normalized scroll-progress offset between each path starting (0–1). e.g. 0.15 → each path begins 15% of the scroll range after the previous. */
+    stagger?: number;
+    /** 'forward' draws the path in (default). 'reverse' erases — path starts fully drawn and disappears as you scroll. */
+    direction?: 'forward' | 'reverse';
+    /** Called every animation frame with the current draw progress (0–1) of the first path. */
+    onProgress?: (alpha: number) => void;
     onComplete?: () => void;
 }
 

package/dist/react/index.mjs

@@ -1 +1 @@
-import {useRef,useEffect}from'react';import {jsx}from'react/jsx-runtime';var b={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e};function w(e="top bottom"){let t=e.trim().split(/\s+/).filter(Boolean),[r="top",i="bottom"]=t;return {element:r,viewport:i}}function D(e,t,r,i){switch(i){case "top":return e+r;case "center":return e+r+t/2;case "bottom":return e+r+t;default:return e+r}}function T(e,t){switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function $(e,t,r){return Math.min(r,Math.max(t,e))}function A(e,t,r,i){return r===t?0:$((e-t)/(r-t)*i,0,1)}function k(e,t,r,i,s){let a=D(e.top,e.height,t,i.element)-T(i.viewport,r),c=D(e.top,e.height,t,s.element)-T(s.viewport,r);return {tStart:a,tEnd:c}}function x(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function F(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?x("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&x("Element has a fill \u2014 it may obscure the stroke animation.",e);}function R(e,t={}){if(typeof window>"u")return {destroy:()=>{}};let{selector:r="path, polyline, line, polygon",speed:i=1,fade:s=false,easing:a="linear",trigger:c={},onComplete:I}=t,L=typeof a=="function"?a:b[a]??b.linear,N=w(c.start??"top bottom"),G=w(c.end??"bottom top"),p=Array.from(e.querySelectorAll(r)),l=[],h=0,y=0,f=false,u=0,g=false;function E(){let n=e.getBoundingClientRect(),o=k({top:n.top,height:n.height},window.scrollY,window.innerHeight,N,G);h=o.tStart,y=o.tEnd;}p.forEach(n=>{F(n);let o=n.getTotalLength();l.push(o),n.style.strokeDasharray=`${o}`,n.style.strokeDashoffset=`${o}`,s&&(n.style.opacity="0");}),E();function v(){if(!g)return;let n=L(A(window.scrollY,h,y,i));p.forEach((o,O)=>{o.style.strokeDashoffset=`${l[O]*(1-n)}`,s&&(o.style.opacity=`${n}`);}),n>=1&&!f?(f=true,I?.()):n<1&&(f=false),u=requestAnimationFrame(v);}let S=new IntersectionObserver(n=>{n.forEach(o=>{g=o.isIntersecting,g?u=requestAnimationFrame(v):cancelAnimationFrame(u);});});S.observe(e);let d;function m(){clearTimeout(d),d=setTimeout(()=>{p.forEach((n,o)=>{l[o]=n.getTotalLength(),n.style.strokeDasharray=`${l[o]}`;}),E();},150);}return window.addEventListener("resize",m),window.addEventListener("orientationchange",m),{destroy(){cancelAnimationFrame(u),S.disconnect(),window.removeEventListener("resize",m),window.removeEventListener("orientationchange",m),clearTimeout(d);}}}function K({children:e,className:t,style:r,...i}){let s=useRef(null);return useEffect(()=>{if(!s.current)return;let a=R(s.current,i);return ()=>a.destroy()},[]),jsx("div",{ref:s,className:t,style:r,children:e})}export{K as ScrollDraw};
+import {useRef,useEffect}from'react';import {jsx}from'react/jsx-runtime';var v={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e};function S(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let r=t.split(/\s+/).filter(Boolean),[s="top",i="bottom"]=r;return {element:s,viewport:i}}function F(e,t,r,s){switch(s){case "top":return e+r;case "center":return e+r+t/2;case "bottom":return e+r+t;default:return e+r}}function L(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function D(e){let t=e.tagName.toLowerCase();if(t==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),s=parseFloat(e.getAttribute("height")??"0");return 2*(r+s)}if(t==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function q(e,t,r){return Math.min(r,Math.max(t,e))}function R(e,t,r,s){return r===t?0:q((e-t)/(r-t)*s,0,1)}function I(e,t,r,s,i){let a=F(e.top,e.height,t,s.element)-L(s.viewport,r),u=F(e.top,e.height,t,i.element)-L(i.viewport,r);return {tStart:a,tEnd:u}}function N(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function B(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?N("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&N("Element has a fill \u2014 it may obscure the stroke animation.",e);}function G(e,t={}){if(typeof window>"u")return {destroy:()=>{}};let{selector:r="path, polyline, line, polygon, rect, circle",speed:s=1,fade:i=false,easing:a="linear",trigger:u={},stagger:P=0,direction:m="forward",onProgress:O,onComplete:V}=t,C=typeof a=="function"?a:v[a]??v.linear,z=S(u.start??"top bottom"),M=S(u.end??"bottom top"),d=Array.from(e.querySelectorAll(r)),l=[],w=0,b=0,h=false,p=0,y=false;function A(){let n=e.getBoundingClientRect(),o=I({top:n.top,height:n.height},window.scrollY,window.innerHeight,z,M);w=o.tStart,b=o.tEnd;}d.forEach(n=>{B(n);let o=D(n);l.push(o),n.style.strokeDasharray=`${o}`,n.style.strokeDashoffset=m==="reverse"?"0":`${o}`,i&&(n.style.opacity=m==="reverse"?"1":"0");}),A();function T(){if(!y)return;let n=b-w,o=true;d.forEach(($,g)=>{let k=g*P*n,c=C(R(window.scrollY,w+k,b+k,s));$.style.strokeDashoffset=m==="reverse"?`${l[g]*c}`:`${l[g]*(1-c)}`,i&&($.style.opacity=m==="reverse"?`${1-c}`:`${c}`),g===0&&O?.(c),c<1&&(o=false);}),o&&!h?(h=true,V?.()):o||(h=false),p=requestAnimationFrame(T);}let x=new IntersectionObserver(n=>{n.forEach(o=>{y=o.isIntersecting,y?p=requestAnimationFrame(T):cancelAnimationFrame(p);});});x.observe(e);let E;function f(){clearTimeout(E),E=setTimeout(()=>{d.forEach((n,o)=>{l[o]=D(n),n.style.strokeDasharray=`${l[o]}`;}),A();},150);}return window.addEventListener("resize",f),window.addEventListener("orientationchange",f),{destroy(){cancelAnimationFrame(p),x.disconnect(),window.removeEventListener("resize",f),window.removeEventListener("orientationchange",f),clearTimeout(E);}}}function j({children:e,className:t,style:r,...s}){let i=useRef(null);return useEffect(()=>{if(!i.current)return;let a=G(i.current,s);return ()=>a.destroy()},[]),jsx("div",{ref:i,className:t,style:r,children:e})}export{j as ScrollDraw};

package/dist/vue/index.cjs

@@ -0,0 +1 @@
+'use strict';var vue=require('vue');var E={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e};function S(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let n=t.split(/\s+/).filter(Boolean),[r="top",s="bottom"]=n;return {element:r,viewport:s}}function L(e,t,n,r){switch(r){case "top":return e+n;case "center":return e+n+t/2;case "bottom":return e+n+t;default:return e+n}}function $(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function D(e){let t=e.tagName.toLowerCase();if(t==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),r=parseFloat(e.getAttribute("height")??"0");return 2*(n+r)}if(t==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function U(e,t,n){return Math.min(n,Math.max(t,e))}function k(e,t,n,r){return n===t?0:U((e-t)/(n-t)*r,0,1)}function P(e,t,n,r,s){let l=L(e.top,e.height,t,r.element)-$(r.viewport,n),u=L(e.top,e.height,t,s.element)-$(s.viewport,n);return {tStart:l,tEnd:u}}function I(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function _(e){let t=e.getAttribute("stroke"),n=e.getAttribute("fill");!t||t==="none"?I("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&I("Element has a fill \u2014 it may obscure the stroke animation.",e);}function A(e,t={}){if(typeof window>"u")return {destroy:()=>{}};let{selector:n="path, polyline, line, polygon, rect, circle",speed:r=1,fade:s=false,easing:l="linear",trigger:u={},stagger:R=0,direction:m="forward",onProgress:V,onComplete:z}=t,q=typeof l=="function"?l:E[l]??E.linear,B=S(u.start??"top bottom"),j=S(u.end??"bottom top"),d=Array.from(e.querySelectorAll(n)),c=[],w=0,b=0,h=false,f=0,y=false;function T(){let o=e.getBoundingClientRect(),i=P({top:o.top,height:o.height},window.scrollY,window.innerHeight,B,j);w=i.tStart,b=i.tEnd;}d.forEach(o=>{_(o);let i=D(o);c.push(i),o.style.strokeDasharray=`${i}`,o.style.strokeDashoffset=m==="reverse"?"0":`${i}`,s&&(o.style.opacity=m==="reverse"?"1":"0");}),T();function x(){if(!y)return;let o=b-w,i=true;d.forEach((F,p)=>{let C=p*R*o,a=q(k(window.scrollY,w+C,b+C,r));F.style.strokeDashoffset=m==="reverse"?`${c[p]*a}`:`${c[p]*(1-a)}`,s&&(F.style.opacity=m==="reverse"?`${1-a}`:`${a}`),p===0&&V?.(a),a<1&&(i=false);}),i&&!h?(h=true,z?.()):i||(h=false),f=requestAnimationFrame(x);}let O=new IntersectionObserver(o=>{o.forEach(i=>{y=i.isIntersecting,y?f=requestAnimationFrame(x):cancelAnimationFrame(f);});});O.observe(e);let v;function g(){clearTimeout(v),v=setTimeout(()=>{d.forEach((o,i)=>{c[i]=D(o),o.style.strokeDasharray=`${c[i]}`;}),T();},150);}return window.addEventListener("resize",g),window.addEventListener("orientationchange",g),{destroy(){cancelAnimationFrame(f),O.disconnect(),window.removeEventListener("resize",g),window.removeEventListener("orientationchange",g),clearTimeout(v);}}}function H(e={}){let t=vue.ref(null);return vue.onMounted(()=>{if(!t.value)return;let n=A(t.value,e);vue.onUnmounted(()=>n.destroy());}),t}var ee=vue.defineComponent({name:"ScrollDraw",props:{selector:{type:String},speed:{type:Number},fade:{type:Boolean},stagger:{type:Number},easing:{type:[String,Function]},direction:{type:String},trigger:{type:Object},onProgress:{type:Function},onComplete:{type:Function}},setup(e,{slots:t}){let n=vue.ref(null);return vue.onMounted(()=>{if(!n.value)return;let r={};e.selector!=null&&(r.selector=e.selector),e.speed!=null&&(r.speed=e.speed),e.fade!=null&&(r.fade=e.fade),e.stagger!=null&&(r.stagger=e.stagger),e.easing!=null&&(r.easing=e.easing),e.direction!=null&&(r.direction=e.direction),e.trigger!=null&&(r.trigger=e.trigger),e.onProgress!=null&&(r.onProgress=e.onProgress),e.onComplete!=null&&(r.onComplete=e.onComplete);let s=A(n.value,r);vue.onUnmounted(()=>s.destroy());}),()=>vue.h("div",{ref:n},t.default?.())}});exports.ScrollDraw=ee;exports.useScrollDraw=H;

package/dist/vue/index.d.mts

@@ -0,0 +1,88 @@
+import * as vue from 'vue';
+
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
+interface TriggerConfig {
+    start?: string;
+    end?: string;
+}
+interface ScrollDrawOptions {
+    selector?: string;
+    speed?: number;
+    fade?: boolean;
+    easing?: EasingName | ((t: number) => number);
+    trigger?: TriggerConfig;
+    /** Normalized scroll-progress offset between each path starting (0–1). e.g. 0.15 → each path begins 15% of the scroll range after the previous. */
+    stagger?: number;
+    /** 'forward' draws the path in (default). 'reverse' erases — path starts fully drawn and disappears as you scroll. */
+    direction?: 'forward' | 'reverse';
+    /** Called every animation frame with the current draw progress (0–1) of the first path. */
+    onProgress?: (alpha: number) => void;
+    onComplete?: () => void;
+}
+
+/** Composable — attach to any container ref. */
+declare function useScrollDraw(options?: ScrollDrawOptions): vue.Ref<HTMLElement | null, HTMLElement | null>;
+/** Component — wraps children in a <div> and initialises the engine. */
+declare const ScrollDraw: vue.DefineComponent<vue.ExtractPropTypes<{
+    selector: {
+        type: StringConstructor;
+    };
+    speed: {
+        type: NumberConstructor;
+    };
+    fade: {
+        type: BooleanConstructor;
+    };
+    stagger: {
+        type: NumberConstructor;
+    };
+    easing: {
+        type: (StringConstructor | FunctionConstructor)[];
+    };
+    direction: {
+        type: () => "forward" | "reverse";
+    };
+    trigger: {
+        type: ObjectConstructor;
+    };
+    onProgress: {
+        type: FunctionConstructor;
+    };
+    onComplete: {
+        type: FunctionConstructor;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    selector: {
+        type: StringConstructor;
+    };
+    speed: {
+        type: NumberConstructor;
+    };
+    fade: {
+        type: BooleanConstructor;
+    };
+    stagger: {
+        type: NumberConstructor;
+    };
+    easing: {
+        type: (StringConstructor | FunctionConstructor)[];
+    };
+    direction: {
+        type: () => "forward" | "reverse";
+    };
+    trigger: {
+        type: ObjectConstructor;
+    };
+    onProgress: {
+        type: FunctionConstructor;
+    };
+    onComplete: {
+        type: FunctionConstructor;
+    };
+}>> & Readonly<{}>, {
+    fade: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { ScrollDraw, type ScrollDrawOptions, useScrollDraw };

package/dist/vue/index.d.ts

@@ -0,0 +1,88 @@
+import * as vue from 'vue';
+
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
+interface TriggerConfig {
+    start?: string;
+    end?: string;
+}
+interface ScrollDrawOptions {
+    selector?: string;
+    speed?: number;
+    fade?: boolean;
+    easing?: EasingName | ((t: number) => number);
+    trigger?: TriggerConfig;
+    /** Normalized scroll-progress offset between each path starting (0–1). e.g. 0.15 → each path begins 15% of the scroll range after the previous. */
+    stagger?: number;
+    /** 'forward' draws the path in (default). 'reverse' erases — path starts fully drawn and disappears as you scroll. */
+    direction?: 'forward' | 'reverse';
+    /** Called every animation frame with the current draw progress (0–1) of the first path. */
+    onProgress?: (alpha: number) => void;
+    onComplete?: () => void;
+}
+
+/** Composable — attach to any container ref. */
+declare function useScrollDraw(options?: ScrollDrawOptions): vue.Ref<HTMLElement | null, HTMLElement | null>;
+/** Component — wraps children in a <div> and initialises the engine. */
+declare const ScrollDraw: vue.DefineComponent<vue.ExtractPropTypes<{
+    selector: {
+        type: StringConstructor;
+    };
+    speed: {
+        type: NumberConstructor;
+    };
+    fade: {
+        type: BooleanConstructor;
+    };
+    stagger: {
+        type: NumberConstructor;
+    };
+    easing: {
+        type: (StringConstructor | FunctionConstructor)[];
+    };
+    direction: {
+        type: () => "forward" | "reverse";
+    };
+    trigger: {
+        type: ObjectConstructor;
+    };
+    onProgress: {
+        type: FunctionConstructor;
+    };
+    onComplete: {
+        type: FunctionConstructor;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    selector: {
+        type: StringConstructor;
+    };
+    speed: {
+        type: NumberConstructor;
+    };
+    fade: {
+        type: BooleanConstructor;
+    };
+    stagger: {
+        type: NumberConstructor;
+    };
+    easing: {
+        type: (StringConstructor | FunctionConstructor)[];
+    };
+    direction: {
+        type: () => "forward" | "reverse";
+    };
+    trigger: {
+        type: ObjectConstructor;
+    };
+    onProgress: {
+        type: FunctionConstructor;
+    };
+    onComplete: {
+        type: FunctionConstructor;
+    };
+}>> & Readonly<{}>, {
+    fade: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { ScrollDraw, type ScrollDrawOptions, useScrollDraw };

package/dist/vue/index.mjs

@@ -0,0 +1 @@
+import {defineComponent,ref,onMounted,onUnmounted,h}from'vue';var E={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e};function S(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let n=t.split(/\s+/).filter(Boolean),[r="top",s="bottom"]=n;return {element:r,viewport:s}}function L(e,t,n,r){switch(r){case "top":return e+n;case "center":return e+n+t/2;case "bottom":return e+n+t;default:return e+n}}function $(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function D(e){let t=e.tagName.toLowerCase();if(t==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),r=parseFloat(e.getAttribute("height")??"0");return 2*(n+r)}if(t==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function U(e,t,n){return Math.min(n,Math.max(t,e))}function k(e,t,n,r){return n===t?0:U((e-t)/(n-t)*r,0,1)}function P(e,t,n,r,s){let l=L(e.top,e.height,t,r.element)-$(r.viewport,n),u=L(e.top,e.height,t,s.element)-$(s.viewport,n);return {tStart:l,tEnd:u}}function I(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function _(e){let t=e.getAttribute("stroke"),n=e.getAttribute("fill");!t||t==="none"?I("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&I("Element has a fill \u2014 it may obscure the stroke animation.",e);}function A(e,t={}){if(typeof window>"u")return {destroy:()=>{}};let{selector:n="path, polyline, line, polygon, rect, circle",speed:r=1,fade:s=false,easing:l="linear",trigger:u={},stagger:R=0,direction:m="forward",onProgress:V,onComplete:z}=t,q=typeof l=="function"?l:E[l]??E.linear,B=S(u.start??"top bottom"),j=S(u.end??"bottom top"),d=Array.from(e.querySelectorAll(n)),c=[],w=0,b=0,h=false,f=0,y=false;function T(){let o=e.getBoundingClientRect(),i=P({top:o.top,height:o.height},window.scrollY,window.innerHeight,B,j);w=i.tStart,b=i.tEnd;}d.forEach(o=>{_(o);let i=D(o);c.push(i),o.style.strokeDasharray=`${i}`,o.style.strokeDashoffset=m==="reverse"?"0":`${i}`,s&&(o.style.opacity=m==="reverse"?"1":"0");}),T();function x(){if(!y)return;let o=b-w,i=true;d.forEach((F,p)=>{let C=p*R*o,a=q(k(window.scrollY,w+C,b+C,r));F.style.strokeDashoffset=m==="reverse"?`${c[p]*a}`:`${c[p]*(1-a)}`,s&&(F.style.opacity=m==="reverse"?`${1-a}`:`${a}`),p===0&&V?.(a),a<1&&(i=false);}),i&&!h?(h=true,z?.()):i||(h=false),f=requestAnimationFrame(x);}let O=new IntersectionObserver(o=>{o.forEach(i=>{y=i.isIntersecting,y?f=requestAnimationFrame(x):cancelAnimationFrame(f);});});O.observe(e);let v;function g(){clearTimeout(v),v=setTimeout(()=>{d.forEach((o,i)=>{c[i]=D(o),o.style.strokeDasharray=`${c[i]}`;}),T();},150);}return window.addEventListener("resize",g),window.addEventListener("orientationchange",g),{destroy(){cancelAnimationFrame(f),O.disconnect(),window.removeEventListener("resize",g),window.removeEventListener("orientationchange",g),clearTimeout(v);}}}function H(e={}){let t=ref(null);return onMounted(()=>{if(!t.value)return;let n=A(t.value,e);onUnmounted(()=>n.destroy());}),t}var ee=defineComponent({name:"ScrollDraw",props:{selector:{type:String},speed:{type:Number},fade:{type:Boolean},stagger:{type:Number},easing:{type:[String,Function]},direction:{type:String},trigger:{type:Object},onProgress:{type:Function},onComplete:{type:Function}},setup(e,{slots:t}){let n=ref(null);return onMounted(()=>{if(!n.value)return;let r={};e.selector!=null&&(r.selector=e.selector),e.speed!=null&&(r.speed=e.speed),e.fade!=null&&(r.fade=e.fade),e.stagger!=null&&(r.stagger=e.stagger),e.easing!=null&&(r.easing=e.easing),e.direction!=null&&(r.direction=e.direction),e.trigger!=null&&(r.trigger=e.trigger),e.onProgress!=null&&(r.onProgress=e.onProgress),e.onComplete!=null&&(r.onComplete=e.onComplete);let s=A(n.value,r);onUnmounted(()=>s.destroy());}),()=>h("div",{ref:n},t.default?.())}});export{ee as ScrollDraw,H as useScrollDraw};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svg-scroll-draw",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Scroll-driven SVG path drawing animation library",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
@@ -18,6 +18,11 @@
       "types": "./dist/react/index.d.ts",
       "import": "./dist/react/index.mjs",
       "require": "./dist/react/index.cjs"
+    },
+    "./vue": {
+      "types": "./dist/vue/index.d.ts",
+      "import": "./dist/vue/index.mjs",
+      "require": "./dist/vue/index.cjs"
     }
   },
   "scripts": {
@@ -29,17 +34,20 @@
     "prepublishOnly": "npm run build && npm run test"
   },
   "devDependencies": {
+    "@types/react": "^18.0.0",
     "@vitest/coverage-v8": "^2.0.0",
     "jsdom": "^25.0.0",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0",
-    "@types/react": "^18.0.0",
-    "vitest": "^2.0.0"
+    "vitest": "^2.0.0",
+    "vue": "^3.5.34"
   },
   "peerDependencies": {
-    "react": ">=17"
+    "react": ">=17",
+    "vue": ">=3"
   },
   "peerDependenciesMeta": {
-    "react": { "optional": true }
+    "react": { "optional": true },
+    "vue":   { "optional": true }
   }
 }