svg-scroll-draw 0.5.0 → 0.6.2

package/dist/group/index.cjs

@@ -0,0 +1,3 @@
+'use strict';var me={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,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2)};function de(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[s="top",n="bottom"]=r.split(/\s+/).filter(Boolean);return {element:s,viewport:n}}function ke(e,r,s,n){switch(n){case "top":return e+s;case "center":return e+s+r/2;case "bottom":return e+s+r;default:return e+s}}function Te(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function ye(e){let r=e.tagName.toLowerCase();if(r==="rect"){let s=parseFloat(e.getAttribute("width")??"0"),n=parseFloat(e.getAttribute("height")??"0");return 2*(s+n)}if(r==="circle"){let s=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*s}return e.getTotalLength()}function Ve(e,r,s){return Math.min(s,Math.max(r,e))}function G(e,r,s,n){return s===r?0:Ve((e-r)/(s-r)*n,0,1)}function De(e,r,s,n,l){let c=ke(e.top,e.height,r,n.element)-Te(n.viewport,s),a=ke(e.top,e.height,r,l.element)-Te(l.viewport,s);return {tStart:c,tEnd:a}}function Se(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let s=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(s)return [parseInt(s[1],16),parseInt(s[2],16),parseInt(s[3],16)];let n=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return n?[parseInt(n[1]),parseInt(n[2]),parseInt(n[3])]:null}function ge(e,r,s){let n=Se(e),l=Se(r);return !n||!l?e:`rgb(${Math.round(n[0]+(l[0]-n[0])*s)},${Math.round(n[1]+(l[1]-n[1])*s)},${Math.round(n[2]+(l[2]-n[2])*s)})`}function Me(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}function ze(e){let r=e.getAttribute("stroke"),s=e.getAttribute("fill");!r||r==="none"?Me("Element has no stroke \u2014 path will not be visible.",e):s&&s!=="none"&&s!=="transparent"&&Me("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Ge(e,r,s){let n=document.createElement("div");n.setAttribute("data-svg-scroll-draw-debug",""),n.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function l(){let c=s==="x"?window.scrollX:window.scrollY,a=e-c,I=r-c,B=s==="x";n.innerHTML=`
+      <div style="position:absolute;${B?`left:${a}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${a}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
+      <div style="position:absolute;${B?`left:${I}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${I}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(n),window.addEventListener("scroll",l,{passive:true}),l(),n}function Ie(e,r,s){let n=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),l=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,c=>{let a=parseFloat(c),I=n[l++]??a;return String(+(a+(I-a)*s).toFixed(4))})}function he(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let s=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:n="path, polyline, line, polygon, rect, circle",speed:l=1,fade:c=false,easing:a="linear",trigger:I={},stagger:B=0,direction:L="forward",once:X=false,debug:Pe=false,axis:E="y",scrollContainer:ne,autoReverse:se=false,delay:be=0,strokeColor:F,strokeWidth:N,fillOpacity:R,waypoints:oe,velocityScale:ie=false,threshold:Oe=0,rootMargin:Ce="0px",repeat:_=0,repeatDelay:we=0,morphTo:P,clip:le,onProgress:ve,onStart:Ee,onComplete:j}=r,W=le===true?"left":typeof le=="string"?le:false,ae=typeof a=="function"?a:me[a]??me.linear,Fe=de(I.start??"top bottom"),Ne=de(I.end??"bottom top"),d=typeof ne=="string"?document.querySelector(ne):ne??null,A=Array.isArray(F)?F[0]:null,y=Array.isArray(F)?F[1]:typeof F=="string"?F:null,g=Array.isArray(N)?N[0]:null,h=Array.isArray(N)?N[1]:typeof N=="number"?N:null,b=Array.isArray(R)?R[0]:null,w=Array.isArray(R)?R[1]:typeof R=="number"?R:null;function V(t){let o=t*100;switch(W){case "right":return `inset(0 0 0 ${100-o}%)`;case "top":return `inset(0 0 ${100-o}% 0)`;case "bottom":return `inset(${100-o}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-o}% 0 0)`}}let q=W?[]:Array.from(e.querySelectorAll(n)),x=[],k=[],T=0,S=0,$=false,O=false,D=0,J=false,v=-1,K=-1,C=false,Q=0,H=0,U,ue=null,Y=new Set,Z=-1,xe=performance.now();function ce(){return d?E==="x"?d.scrollLeft:d.scrollTop:E==="x"?window.scrollX:window.scrollY}function Re(){return d?E==="x"?d.clientWidth:d.clientHeight:E==="x"?window.innerWidth:window.innerHeight}function $e(){let t=e.getBoundingClientRect(),o,u,m;if(d){let z=d.getBoundingClientRect();o=E==="x"?t.left-z.left+d.scrollLeft:t.top-z.top+d.scrollTop,u=E==="x"?t.width:t.height,m=ce();}else o=E==="x"?t.left:t.top,u=E==="x"?t.width:t.height,m=ce();let re=De({top:o,height:u},m,Re(),Fe,Ne);T=re.tStart,S=re.tEnd,Pe&&process.env.NODE_ENV!=="production"&&(ue?.remove(),ue=Ge(T,S,E));}function We(t,o){if(W){let u=o==="reverse"?1-t:t;e.style.clipPath=V(u);return}q.forEach((u,m)=>{u.style.strokeDashoffset=o==="reverse"?`${x[m]*t}`:`${x[m]*(1-t)}`,c&&(u.style.opacity=o==="reverse"?`${1-t}`:`${t}`),A&&y?u.style.stroke=ge(A,y,t):y&&(u.style.stroke=y),g!==null&&h!==null?u.style.strokeWidth=`${g+(h-g)*t}`:h!==null&&(u.style.strokeWidth=`${h}`),b!==null&&w!==null?u.style.fillOpacity=`${b+(w-b)*t}`:w!==null&&(u.style.fillOpacity=`${w}`),P&&u.tagName.toLowerCase()==="path"&&k[m]&&u.setAttribute("d",Ie(k[m],P,t));});}function Ae(){if(W){e.style.clipPath=V(0);return}q.forEach((t,o)=>{t.style.strokeDasharray=`${x[o]}`,t.style.strokeDashoffset=L==="reverse"?"0":`${x[o]}`,c?t.style.opacity=L==="reverse"?"1":"0":t.style.opacity="",A&&(t.style.stroke=A),g!==null&&(t.style.strokeWidth=`${g}`),b!==null&&(t.style.fillOpacity=`${b}`),P&&t.tagName.toLowerCase()==="path"&&k[o]&&t.setAttribute("d",k[o]);});}if(q.forEach(t=>{ze(t);let o=ye(t);x.push(o),t.tagName.toLowerCase()==="path"?k.push(t.getAttribute("d")??""):k.push(""),s?(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=L==="reverse"?`${o}`:"0",c&&(t.style.opacity="1"),y&&(t.style.stroke=y),h!==null&&(t.style.strokeWidth=`${h}`),w!==null&&(t.style.fillOpacity=`${w}`),P&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",P)):(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=L==="reverse"?"0":`${o}`,c?t.style.opacity=L==="reverse"?"1":"0":t.style.opacity="",A&&(t.style.stroke=A),g!==null&&(t.style.strokeWidth=`${g}`),b!==null&&(t.style.fillOpacity=`${b}`));}),W){if(s)return e.style.clipPath=V(1),j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=V(0);}else if(s)return j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};$e();function ee(){if(!J||C)return;let t=performance.now(),o=ce(),u=l;if(ie!==false){let i=t-xe,f=i>0?Math.abs(o-(Z<0?o:Z))/i:0;u=l*Math.max(.2,1+f*(typeof ie=="number"?ie:1)*.04);}Z=o,xe=t;let m=se?K===-1||o>=K?"forward":"reverse":L;K=o;let re=S-T,z=true;if(W){let i=ae(G(o,T,S,u));X&&!se&&(v=Math.max(v,i),i=v),Q=i;let f=m==="reverse"?1-i:i;e.style.clipPath=V(f),ve?.(i),!O&&G(o,T,S,u)>0&&(O=true,Ee?.()),i>=1&&!$?($=true,j?.(),H<(_==="infinite"?1/0:_??0)&&(H++,U=setTimeout(()=>{v=-1,O=false,$=false,e.style.clipPath=V(0);},we))):i<1&&!X&&($=false),D=requestAnimationFrame(ee);return}if(q.forEach((i,f)=>{let M=f*B*re,p=ae(G(o,T+M,S+M,u));X&&!se&&(v=Math.max(v,p),p=v),Q=p,i.style.strokeDashoffset=m==="reverse"?`${x[f]*p}`:`${x[f]*(1-p)}`,c&&(i.style.opacity=m==="reverse"?`${1-p}`:`${p}`),A&&y?i.style.stroke=ge(A,y,p):y&&(i.style.stroke=y),g!==null&&h!==null?i.style.strokeWidth=`${g+(h-g)*p}`:h!==null&&(i.style.strokeWidth=`${h}`),b!==null&&w!==null?i.style.fillOpacity=`${b+(w-b)*p}`:w!==null&&(i.style.fillOpacity=`${w}`),P&&i.tagName.toLowerCase()==="path"&&k[f]&&i.setAttribute("d",Ie(k[f],P,p)),f===0&&ve?.(p),p<1&&(z=false);}),oe){let i=ae(G(o,T,S,u));for(let f in oe){let M=parseFloat(f);i>=M&&!Y.has(M)&&(Y.add(M),oe[f]?.());}}!O&&G(o,T,S,u)>0&&(O=true,Ee?.()),z&&!$?($=true,j?.(),H<(_==="infinite"?1/0:_??0)&&(H++,U=setTimeout(()=>{v=-1,O=false,$=false,Y.clear(),Ae();},we))):!z&&!X&&($=false),D=requestAnimationFrame(ee);}let fe=new IntersectionObserver(t=>{t.forEach(o=>{J=o.isIntersecting,J&&!C?D=requestAnimationFrame(ee):cancelAnimationFrame(D);});},{root:d??null,threshold:Oe,rootMargin:Ce}),pe;function te(){clearTimeout(pe),pe=setTimeout(()=>{q.forEach((t,o)=>{x[o]=ye(t),t.style.strokeDasharray=`${x[o]}`;}),$e();},150);}return window.addEventListener("resize",te),window.addEventListener("orientationchange",te),be>0?setTimeout(()=>fe.observe(e),be):fe.observe(e),{destroy(){cancelAnimationFrame(D),clearTimeout(U),fe.disconnect(),window.removeEventListener("resize",te),window.removeEventListener("orientationchange",te),clearTimeout(pe),ue?.remove();},replay(){v=-1,K=-1,Z=-1,O=false,$=false,H=0,C=false,Y.clear(),clearTimeout(U),Ae();},pause(){C=true,cancelAnimationFrame(D);},resume(){C&&(C=false,J&&(D=requestAnimationFrame(ee)));},seek(t){let o=Math.min(1,Math.max(0,t));Q=o,v=o,C=true,cancelAnimationFrame(D),We(o,L);},getProgress(){return Q}}}function Le(e){return e.map(r=>typeof r=="string"?document.querySelector(r):r).filter(r=>r!==null)}function _e(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let s=Le(e).map(n=>he(n,r));return {destroy(){s.forEach(n=>n.destroy());},replay(){s.forEach(n=>n.replay());},pause(){s.forEach(n=>n.pause());},resume(){s.forEach(n=>n.resume());},seek(n){s.forEach(l=>l.seek(n));},getProgress(){return s[0]?.getProgress()??0}}}function je(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let s=Le(e),n=new Array(s.length).fill(null),l=0;function c(a){a>=s.length||(n[a]=he(s[a],{...r,onComplete:()=>{r.onComplete?.(),c(a+1);}}));}return c(0),{destroy(){n.forEach(a=>a?.destroy()),n.fill(null);},replay(){n.forEach(a=>a?.destroy()),n.fill(null),l=0,c(0);},pause(){n[l]?.pause();},resume(){n[l]?.resume();},seek(a){n[l]?.seek(a);},getProgress(){return n[l]?.getProgress()??0}}}exports.scrollDrawGroup=_e;exports.scrollDrawSequence=je;

package/dist/group/index.d.mts

@@ -0,0 +1,97 @@
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
+interface TriggerConfig {
+    start?: string;
+    end?: string;
+}
+interface ScrollDrawOptions {
+    selector?: string;
+    speed?: number;
+    fade?: boolean;
+    easing?: EasingName | ((t: number) => number);
+    trigger?: TriggerConfig;
+    stagger?: number;
+    direction?: 'forward' | 'reverse';
+    once?: boolean;
+    debug?: boolean;
+    /** Scroll axis to track. 'y' (default) for vertical, 'x' for horizontal. */
+    axis?: 'x' | 'y';
+    /** CSS selector or Element for a custom scroll container (default: window). */
+    scrollContainer?: string | Element;
+    /** Automatically reverse the animation when the user scrolls back up. */
+    autoReverse?: boolean;
+    /** Delay in milliseconds before the engine starts observing. */
+    delay?: number;
+    /** Animate stroke color. Single string = static override. Tuple = interpolate from → to. */
+    strokeColor?: string | [string, string];
+    /** Animate stroke width. Single number = static override. Tuple = interpolate from → to. */
+    strokeWidth?: number | [number, number];
+    /** Animate fill opacity. Single number = static override. Tuple [from, to] = interpolate as the path draws. Use [0, 1] to flood fill in sync with the stroke draw. */
+    fillOpacity?: number | [number, number];
+    /**
+     * Reveal the container using CSS clip-path instead of stroke-dashoffset.
+     * Works on any content — SVG, images, text, divs.
+     * `true` defaults to `'left'`. Values: `'left' | 'right' | 'top' | 'bottom' | 'center'`.
+     */
+    clip?: boolean | 'left' | 'right' | 'top' | 'bottom' | 'center';
+    /** Fire callbacks at specific progress thresholds (0–1). Resets on replay(). */
+    waypoints?: Record<number, () => void>;
+    /** Scale animation speed by scroll velocity — faster scrolling = faster draw. Pass a number to control sensitivity (default 1). */
+    velocityScale?: boolean | number;
+    /** IntersectionObserver threshold (0–1). Default 0. */
+    threshold?: number;
+    /** IntersectionObserver rootMargin. Default "0px". */
+    rootMargin?: string;
+    /** Repeat the animation N times after completion. Use 'infinite' to loop forever. */
+    repeat?: number | 'infinite';
+    /** Milliseconds to wait between repeats. Default 0. */
+    repeatDelay?: number;
+    /** Target path `d` attribute to morph toward as the animation progresses. Paths must have compatible structures. */
+    morphTo?: string;
+    onProgress?: (alpha: number) => void;
+    onStart?: () => void;
+    onComplete?: () => void;
+}
+interface ScrollDrawInstance {
+    destroy: () => void;
+    /** Reset and replay the animation from the beginning. */
+    replay: () => void;
+    /** Pause the animation at the current progress. */
+    pause: () => void;
+    /** Resume a paused animation. */
+    resume: () => void;
+    /** Jump to a specific progress value (0–1) and pause. */
+    seek: (progress: number) => void;
+    /** Returns current draw progress (0–1). */
+    getProgress: () => number;
+}
+
+/**
+ * Animate multiple SVG containers simultaneously with the same options.
+ * Each container tracks its own scroll position independently.
+ *
+ * @example
+ * import { scrollDrawGroup } from 'svg-scroll-draw/group';
+ *
+ * const group = scrollDrawGroup(['#hero-svg', '#logo', '#diagram'], {
+ *   easing: 'ease-out',
+ *   stagger: 0.1,
+ * });
+ *
+ * group.replay(); // replays all at once
+ * group.destroy();
+ */
+declare function scrollDrawGroup(targets: Array<string | Element>, options?: ScrollDrawOptions): ScrollDrawInstance;
+/**
+ * Animate multiple SVG containers in sequence — each one starts only after
+ * the previous has reached 100% draw progress.
+ *
+ * @example
+ * import { scrollDrawSequence } from 'svg-scroll-draw/group';
+ *
+ * const seq = scrollDrawSequence(['#step-1', '#step-2', '#step-3'], {
+ *   easing: 'spring',
+ * });
+ */
+declare function scrollDrawSequence(targets: Array<string | Element>, options?: ScrollDrawOptions): ScrollDrawInstance;
+
+export { type ScrollDrawOptions, scrollDrawGroup, scrollDrawSequence };

package/dist/group/index.d.ts

@@ -0,0 +1,97 @@
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
+interface TriggerConfig {
+    start?: string;
+    end?: string;
+}
+interface ScrollDrawOptions {
+    selector?: string;
+    speed?: number;
+    fade?: boolean;
+    easing?: EasingName | ((t: number) => number);
+    trigger?: TriggerConfig;
+    stagger?: number;
+    direction?: 'forward' | 'reverse';
+    once?: boolean;
+    debug?: boolean;
+    /** Scroll axis to track. 'y' (default) for vertical, 'x' for horizontal. */
+    axis?: 'x' | 'y';
+    /** CSS selector or Element for a custom scroll container (default: window). */
+    scrollContainer?: string | Element;
+    /** Automatically reverse the animation when the user scrolls back up. */
+    autoReverse?: boolean;
+    /** Delay in milliseconds before the engine starts observing. */
+    delay?: number;
+    /** Animate stroke color. Single string = static override. Tuple = interpolate from → to. */
+    strokeColor?: string | [string, string];
+    /** Animate stroke width. Single number = static override. Tuple = interpolate from → to. */
+    strokeWidth?: number | [number, number];
+    /** Animate fill opacity. Single number = static override. Tuple [from, to] = interpolate as the path draws. Use [0, 1] to flood fill in sync with the stroke draw. */
+    fillOpacity?: number | [number, number];
+    /**
+     * Reveal the container using CSS clip-path instead of stroke-dashoffset.
+     * Works on any content — SVG, images, text, divs.
+     * `true` defaults to `'left'`. Values: `'left' | 'right' | 'top' | 'bottom' | 'center'`.
+     */
+    clip?: boolean | 'left' | 'right' | 'top' | 'bottom' | 'center';
+    /** Fire callbacks at specific progress thresholds (0–1). Resets on replay(). */
+    waypoints?: Record<number, () => void>;
+    /** Scale animation speed by scroll velocity — faster scrolling = faster draw. Pass a number to control sensitivity (default 1). */
+    velocityScale?: boolean | number;
+    /** IntersectionObserver threshold (0–1). Default 0. */
+    threshold?: number;
+    /** IntersectionObserver rootMargin. Default "0px". */
+    rootMargin?: string;
+    /** Repeat the animation N times after completion. Use 'infinite' to loop forever. */
+    repeat?: number | 'infinite';
+    /** Milliseconds to wait between repeats. Default 0. */
+    repeatDelay?: number;
+    /** Target path `d` attribute to morph toward as the animation progresses. Paths must have compatible structures. */
+    morphTo?: string;
+    onProgress?: (alpha: number) => void;
+    onStart?: () => void;
+    onComplete?: () => void;
+}
+interface ScrollDrawInstance {
+    destroy: () => void;
+    /** Reset and replay the animation from the beginning. */
+    replay: () => void;
+    /** Pause the animation at the current progress. */
+    pause: () => void;
+    /** Resume a paused animation. */
+    resume: () => void;
+    /** Jump to a specific progress value (0–1) and pause. */
+    seek: (progress: number) => void;
+    /** Returns current draw progress (0–1). */
+    getProgress: () => number;
+}
+
+/**
+ * Animate multiple SVG containers simultaneously with the same options.
+ * Each container tracks its own scroll position independently.
+ *
+ * @example
+ * import { scrollDrawGroup } from 'svg-scroll-draw/group';
+ *
+ * const group = scrollDrawGroup(['#hero-svg', '#logo', '#diagram'], {
+ *   easing: 'ease-out',
+ *   stagger: 0.1,
+ * });
+ *
+ * group.replay(); // replays all at once
+ * group.destroy();
+ */
+declare function scrollDrawGroup(targets: Array<string | Element>, options?: ScrollDrawOptions): ScrollDrawInstance;
+/**
+ * Animate multiple SVG containers in sequence — each one starts only after
+ * the previous has reached 100% draw progress.
+ *
+ * @example
+ * import { scrollDrawSequence } from 'svg-scroll-draw/group';
+ *
+ * const seq = scrollDrawSequence(['#step-1', '#step-2', '#step-3'], {
+ *   easing: 'spring',
+ * });
+ */
+declare function scrollDrawSequence(targets: Array<string | Element>, options?: ScrollDrawOptions): ScrollDrawInstance;
+
+export { type ScrollDrawOptions, scrollDrawGroup, scrollDrawSequence };

package/dist/group/index.mjs

@@ -0,0 +1,3 @@
+var me={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,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2)};function de(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[s="top",n="bottom"]=r.split(/\s+/).filter(Boolean);return {element:s,viewport:n}}function ke(e,r,s,n){switch(n){case "top":return e+s;case "center":return e+s+r/2;case "bottom":return e+s+r;default:return e+s}}function Te(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function ye(e){let r=e.tagName.toLowerCase();if(r==="rect"){let s=parseFloat(e.getAttribute("width")??"0"),n=parseFloat(e.getAttribute("height")??"0");return 2*(s+n)}if(r==="circle"){let s=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*s}return e.getTotalLength()}function Ve(e,r,s){return Math.min(s,Math.max(r,e))}function G(e,r,s,n){return s===r?0:Ve((e-r)/(s-r)*n,0,1)}function De(e,r,s,n,l){let c=ke(e.top,e.height,r,n.element)-Te(n.viewport,s),a=ke(e.top,e.height,r,l.element)-Te(l.viewport,s);return {tStart:c,tEnd:a}}function Se(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let s=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(s)return [parseInt(s[1],16),parseInt(s[2],16),parseInt(s[3],16)];let n=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return n?[parseInt(n[1]),parseInt(n[2]),parseInt(n[3])]:null}function ge(e,r,s){let n=Se(e),l=Se(r);return !n||!l?e:`rgb(${Math.round(n[0]+(l[0]-n[0])*s)},${Math.round(n[1]+(l[1]-n[1])*s)},${Math.round(n[2]+(l[2]-n[2])*s)})`}function Me(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}function ze(e){let r=e.getAttribute("stroke"),s=e.getAttribute("fill");!r||r==="none"?Me("Element has no stroke \u2014 path will not be visible.",e):s&&s!=="none"&&s!=="transparent"&&Me("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Ge(e,r,s){let n=document.createElement("div");n.setAttribute("data-svg-scroll-draw-debug",""),n.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function l(){let c=s==="x"?window.scrollX:window.scrollY,a=e-c,I=r-c,B=s==="x";n.innerHTML=`
+      <div style="position:absolute;${B?`left:${a}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${a}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
+      <div style="position:absolute;${B?`left:${I}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${I}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(n),window.addEventListener("scroll",l,{passive:true}),l(),n}function Ie(e,r,s){let n=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),l=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,c=>{let a=parseFloat(c),I=n[l++]??a;return String(+(a+(I-a)*s).toFixed(4))})}function he(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let s=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:n="path, polyline, line, polygon, rect, circle",speed:l=1,fade:c=false,easing:a="linear",trigger:I={},stagger:B=0,direction:L="forward",once:X=false,debug:Pe=false,axis:E="y",scrollContainer:ne,autoReverse:se=false,delay:be=0,strokeColor:F,strokeWidth:N,fillOpacity:R,waypoints:oe,velocityScale:ie=false,threshold:Oe=0,rootMargin:Ce="0px",repeat:_=0,repeatDelay:we=0,morphTo:P,clip:le,onProgress:ve,onStart:Ee,onComplete:j}=r,W=le===true?"left":typeof le=="string"?le:false,ae=typeof a=="function"?a:me[a]??me.linear,Fe=de(I.start??"top bottom"),Ne=de(I.end??"bottom top"),d=typeof ne=="string"?document.querySelector(ne):ne??null,A=Array.isArray(F)?F[0]:null,y=Array.isArray(F)?F[1]:typeof F=="string"?F:null,g=Array.isArray(N)?N[0]:null,h=Array.isArray(N)?N[1]:typeof N=="number"?N:null,b=Array.isArray(R)?R[0]:null,w=Array.isArray(R)?R[1]:typeof R=="number"?R:null;function V(t){let o=t*100;switch(W){case "right":return `inset(0 0 0 ${100-o}%)`;case "top":return `inset(0 0 ${100-o}% 0)`;case "bottom":return `inset(${100-o}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-o}% 0 0)`}}let q=W?[]:Array.from(e.querySelectorAll(n)),x=[],k=[],T=0,S=0,$=false,O=false,D=0,J=false,v=-1,K=-1,C=false,Q=0,H=0,U,ue=null,Y=new Set,Z=-1,xe=performance.now();function ce(){return d?E==="x"?d.scrollLeft:d.scrollTop:E==="x"?window.scrollX:window.scrollY}function Re(){return d?E==="x"?d.clientWidth:d.clientHeight:E==="x"?window.innerWidth:window.innerHeight}function $e(){let t=e.getBoundingClientRect(),o,u,m;if(d){let z=d.getBoundingClientRect();o=E==="x"?t.left-z.left+d.scrollLeft:t.top-z.top+d.scrollTop,u=E==="x"?t.width:t.height,m=ce();}else o=E==="x"?t.left:t.top,u=E==="x"?t.width:t.height,m=ce();let re=De({top:o,height:u},m,Re(),Fe,Ne);T=re.tStart,S=re.tEnd,Pe&&process.env.NODE_ENV!=="production"&&(ue?.remove(),ue=Ge(T,S,E));}function We(t,o){if(W){let u=o==="reverse"?1-t:t;e.style.clipPath=V(u);return}q.forEach((u,m)=>{u.style.strokeDashoffset=o==="reverse"?`${x[m]*t}`:`${x[m]*(1-t)}`,c&&(u.style.opacity=o==="reverse"?`${1-t}`:`${t}`),A&&y?u.style.stroke=ge(A,y,t):y&&(u.style.stroke=y),g!==null&&h!==null?u.style.strokeWidth=`${g+(h-g)*t}`:h!==null&&(u.style.strokeWidth=`${h}`),b!==null&&w!==null?u.style.fillOpacity=`${b+(w-b)*t}`:w!==null&&(u.style.fillOpacity=`${w}`),P&&u.tagName.toLowerCase()==="path"&&k[m]&&u.setAttribute("d",Ie(k[m],P,t));});}function Ae(){if(W){e.style.clipPath=V(0);return}q.forEach((t,o)=>{t.style.strokeDasharray=`${x[o]}`,t.style.strokeDashoffset=L==="reverse"?"0":`${x[o]}`,c?t.style.opacity=L==="reverse"?"1":"0":t.style.opacity="",A&&(t.style.stroke=A),g!==null&&(t.style.strokeWidth=`${g}`),b!==null&&(t.style.fillOpacity=`${b}`),P&&t.tagName.toLowerCase()==="path"&&k[o]&&t.setAttribute("d",k[o]);});}if(q.forEach(t=>{ze(t);let o=ye(t);x.push(o),t.tagName.toLowerCase()==="path"?k.push(t.getAttribute("d")??""):k.push(""),s?(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=L==="reverse"?`${o}`:"0",c&&(t.style.opacity="1"),y&&(t.style.stroke=y),h!==null&&(t.style.strokeWidth=`${h}`),w!==null&&(t.style.fillOpacity=`${w}`),P&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",P)):(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=L==="reverse"?"0":`${o}`,c?t.style.opacity=L==="reverse"?"1":"0":t.style.opacity="",A&&(t.style.stroke=A),g!==null&&(t.style.strokeWidth=`${g}`),b!==null&&(t.style.fillOpacity=`${b}`));}),W){if(s)return e.style.clipPath=V(1),j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=V(0);}else if(s)return j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};$e();function ee(){if(!J||C)return;let t=performance.now(),o=ce(),u=l;if(ie!==false){let i=t-xe,f=i>0?Math.abs(o-(Z<0?o:Z))/i:0;u=l*Math.max(.2,1+f*(typeof ie=="number"?ie:1)*.04);}Z=o,xe=t;let m=se?K===-1||o>=K?"forward":"reverse":L;K=o;let re=S-T,z=true;if(W){let i=ae(G(o,T,S,u));X&&!se&&(v=Math.max(v,i),i=v),Q=i;let f=m==="reverse"?1-i:i;e.style.clipPath=V(f),ve?.(i),!O&&G(o,T,S,u)>0&&(O=true,Ee?.()),i>=1&&!$?($=true,j?.(),H<(_==="infinite"?1/0:_??0)&&(H++,U=setTimeout(()=>{v=-1,O=false,$=false,e.style.clipPath=V(0);},we))):i<1&&!X&&($=false),D=requestAnimationFrame(ee);return}if(q.forEach((i,f)=>{let M=f*B*re,p=ae(G(o,T+M,S+M,u));X&&!se&&(v=Math.max(v,p),p=v),Q=p,i.style.strokeDashoffset=m==="reverse"?`${x[f]*p}`:`${x[f]*(1-p)}`,c&&(i.style.opacity=m==="reverse"?`${1-p}`:`${p}`),A&&y?i.style.stroke=ge(A,y,p):y&&(i.style.stroke=y),g!==null&&h!==null?i.style.strokeWidth=`${g+(h-g)*p}`:h!==null&&(i.style.strokeWidth=`${h}`),b!==null&&w!==null?i.style.fillOpacity=`${b+(w-b)*p}`:w!==null&&(i.style.fillOpacity=`${w}`),P&&i.tagName.toLowerCase()==="path"&&k[f]&&i.setAttribute("d",Ie(k[f],P,p)),f===0&&ve?.(p),p<1&&(z=false);}),oe){let i=ae(G(o,T,S,u));for(let f in oe){let M=parseFloat(f);i>=M&&!Y.has(M)&&(Y.add(M),oe[f]?.());}}!O&&G(o,T,S,u)>0&&(O=true,Ee?.()),z&&!$?($=true,j?.(),H<(_==="infinite"?1/0:_??0)&&(H++,U=setTimeout(()=>{v=-1,O=false,$=false,Y.clear(),Ae();},we))):!z&&!X&&($=false),D=requestAnimationFrame(ee);}let fe=new IntersectionObserver(t=>{t.forEach(o=>{J=o.isIntersecting,J&&!C?D=requestAnimationFrame(ee):cancelAnimationFrame(D);});},{root:d??null,threshold:Oe,rootMargin:Ce}),pe;function te(){clearTimeout(pe),pe=setTimeout(()=>{q.forEach((t,o)=>{x[o]=ye(t),t.style.strokeDasharray=`${x[o]}`;}),$e();},150);}return window.addEventListener("resize",te),window.addEventListener("orientationchange",te),be>0?setTimeout(()=>fe.observe(e),be):fe.observe(e),{destroy(){cancelAnimationFrame(D),clearTimeout(U),fe.disconnect(),window.removeEventListener("resize",te),window.removeEventListener("orientationchange",te),clearTimeout(pe),ue?.remove();},replay(){v=-1,K=-1,Z=-1,O=false,$=false,H=0,C=false,Y.clear(),clearTimeout(U),Ae();},pause(){C=true,cancelAnimationFrame(D);},resume(){C&&(C=false,J&&(D=requestAnimationFrame(ee)));},seek(t){let o=Math.min(1,Math.max(0,t));Q=o,v=o,C=true,cancelAnimationFrame(D),We(o,L);},getProgress(){return Q}}}function Le(e){return e.map(r=>typeof r=="string"?document.querySelector(r):r).filter(r=>r!==null)}function _e(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let s=Le(e).map(n=>he(n,r));return {destroy(){s.forEach(n=>n.destroy());},replay(){s.forEach(n=>n.replay());},pause(){s.forEach(n=>n.pause());},resume(){s.forEach(n=>n.resume());},seek(n){s.forEach(l=>l.seek(n));},getProgress(){return s[0]?.getProgress()??0}}}function je(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let s=Le(e),n=new Array(s.length).fill(null),l=0;function c(a){a>=s.length||(n[a]=he(s[a],{...r,onComplete:()=>{r.onComplete?.(),c(a+1);}}));}return c(0),{destroy(){n.forEach(a=>a?.destroy()),n.fill(null);},replay(){n.forEach(a=>a?.destroy()),n.fill(null),l=0,c(0);},pause(){n[l]?.pause();},resume(){n[l]?.resume();},seek(a){n[l]?.seek(a);},getProgress(){return n[l]?.getProgress()??0}}}export{_e as scrollDrawGroup,je as scrollDrawSequence};

package/dist/index.cjs

@@ -1,3 +1,3 @@
-'use strict';var _={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,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2)};function H(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let[r="top",o="bottom"]=t.split(/\s+/).filter(Boolean);return {element:r,viewport:o}}function te(e,t,r,o){switch(o){case "top":return e+r;case "center":return e+r+t/2;case "bottom":return e+r+t;default:return e+r}}function re(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 j(e){let t=e.tagName.toLowerCase();if(t==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(r+o)}if(t==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function ye(e,t,r){return Math.min(r,Math.max(t,e))}function z(e,t,r,o){return r===t?0:ye((e-t)/(r-t)*o,0,1)}function oe(e,t,r,o,i){let f=te(e.top,e.height,t,o.element)-re(o.viewport,r),d=te(e.top,e.height,t,i.element)-re(i.viewport,r);return {tStart:f,tEnd:d}}function ne(e){let t=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(t)return [parseInt(t[1]+t[1],16),parseInt(t[2]+t[2],16),parseInt(t[3]+t[3],16)];let r=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(r)return [parseInt(r[1],16),parseInt(r[2],16),parseInt(r[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function se(e,t,r){let o=ne(e),i=ne(t);return !o||!i?e:`rgb(${Math.round(o[0]+(i[0]-o[0])*r)},${Math.round(o[1]+(i[1]-o[1])*r)},${Math.round(o[2]+(i[2]-o[2])*r)})`}function ie(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function be(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?ie("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&ie("Element has a fill \u2014 it may obscure the stroke animation.",e);}function ge(e,t,r){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function i(){let f=r==="x"?window.scrollX:window.scrollY,d=e-f,A=t-f,I=r==="x";o.innerHTML=`
-      <div style="position:absolute;${I?`left:${d}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${d}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
-      <div style="position:absolute;${I?`left:${A}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${A}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(o),window.addEventListener("scroll",i,{passive:true}),i(),o}function le(e,t={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{}};let r=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:i=1,fade:f=false,easing:d="linear",trigger:A={},stagger:I=0,direction:g="forward",once:J=false,debug:ae=false,axis:p="y",scrollContainer:W,autoReverse:K=false,delay:Q=0,strokeColor:h,strokeWidth:w,waypoints:G,onProgress:ce,onStart:ue,onComplete:U}=t,Y=typeof d=="function"?d:_[d]??_.linear,fe=H(A.start??"top bottom"),pe=H(A.end??"bottom top"),l=typeof W=="string"?document.querySelector(W):W??null,v=Array.isArray(h)?h[0]:null,x=Array.isArray(h)?h[1]:typeof h=="string"?h:null,m=Array.isArray(w)?w[0]:null,E=Array.isArray(w)?w[1]:typeof w=="number"?w:null,T=Array.from(e.querySelectorAll(o)),y=[],$=0,S=0,L=false,V=false,M=0,N=false,C=-1,F=-1,P=null,R=new Set;function q(){return l?p==="x"?l.scrollLeft:l.scrollTop:p==="x"?window.scrollX:window.scrollY}function de(){return l?p==="x"?l.clientWidth:l.clientHeight:p==="x"?window.innerWidth:window.innerHeight}function Z(){let n=e.getBoundingClientRect(),s,D,b;if(l){let c=l.getBoundingClientRect();s=p==="x"?n.left-c.left+l.scrollLeft:n.top-c.top+l.scrollTop,D=p==="x"?n.width:n.height,b=q();}else s=p==="x"?n.left:n.top,D=p==="x"?n.width:n.height,b=q();let a=oe({top:s,height:D},b,de(),fe,pe);$=a.tStart,S=a.tEnd,ae&&process.env.NODE_ENV!=="production"&&(P?.remove(),P=ge($,S,p));}function me(){T.forEach((n,s)=>{n.style.strokeDasharray=`${y[s]}`,n.style.strokeDashoffset=g==="reverse"?"0":`${y[s]}`,f?n.style.opacity=g==="reverse"?"1":"0":n.style.opacity="",v&&(n.style.stroke=v),m!==null&&(n.style.strokeWidth=`${m}`);});}if(T.forEach(n=>{be(n);let s=j(n);y.push(s),r?(n.style.strokeDasharray=`${s}`,n.style.strokeDashoffset=g==="reverse"?`${s}`:"0",f&&(n.style.opacity="1"),x&&(n.style.stroke=x),E!==null&&(n.style.strokeWidth=`${E}`)):(n.style.strokeDasharray=`${s}`,n.style.strokeDashoffset=g==="reverse"?"0":`${s}`,f?n.style.opacity=g==="reverse"?"1":"0":n.style.opacity="",v&&(n.style.stroke=v),m!==null&&(n.style.strokeWidth=`${m}`));}),r)return U?.(),{destroy:()=>{},replay:()=>{}};Z();function ee(){if(!N)return;let n=q(),s=K?F===-1||n>=F?"forward":"reverse":g;F=n;let D=S-$,b=true;if(T.forEach((a,c)=>{let k=c*I*D,u=Y(z(n,$+k,S+k,i));J&&!K&&(C=Math.max(C,u),u=C),a.style.strokeDashoffset=s==="reverse"?`${y[c]*u}`:`${y[c]*(1-u)}`,f&&(a.style.opacity=s==="reverse"?`${1-u}`:`${u}`),v&&x?a.style.stroke=se(v,x,u):x&&(a.style.stroke=x),m!==null&&E!==null?a.style.strokeWidth=`${m+(E-m)*u}`:E!==null&&(a.style.strokeWidth=`${E}`),c===0&&ce?.(u),u<1&&(b=false);}),G){let a=Y(z(n,$,S,i));for(let c in G){let k=parseFloat(c);a>=k&&!R.has(k)&&(R.add(k),G[c]?.());}}!V&&z(n,$,S,i)>0&&(V=true,ue?.()),b&&!L?(L=true,U?.()):!b&&!J&&(L=false),M=requestAnimationFrame(ee);}let B=new IntersectionObserver(n=>{n.forEach(s=>{N=s.isIntersecting,N?M=requestAnimationFrame(ee):cancelAnimationFrame(M);});},{root:l??null}),X;function O(){clearTimeout(X),X=setTimeout(()=>{T.forEach((n,s)=>{y[s]=j(n),n.style.strokeDasharray=`${y[s]}`;}),Z();},150);}return window.addEventListener("resize",O),window.addEventListener("orientationchange",O),Q>0?setTimeout(()=>B.observe(e),Q):B.observe(e),{destroy(){cancelAnimationFrame(M),B.disconnect(),window.removeEventListener("resize",O),window.removeEventListener("orientationchange",O),clearTimeout(X),P?.remove();},replay(){C=-1,F=-1,V=false,L=false,R.clear(),me();}}}function Ee(e,t){let r={destroy:()=>{},replay:()=>{}};if(typeof window>"u")return r;let o=typeof e=="string"?document.querySelector(e):e;return o?le(o,t):(console.warn("[svg-scroll-draw] Container not found:",e),r)}exports.scrollDraw=Ee;
+'use strict';var me={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,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2)};function de(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[n="top",o="bottom"]=r.split(/\s+/).filter(Boolean);return {element:n,viewport:o}}function Ae(e,r,n,o){switch(o){case "top":return e+n;case "center":return e+n+r/2;case "bottom":return e+n+r;default:return e+n}}function ke(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function ye(e){let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(n+o)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function We(e,r,n){return Math.min(n,Math.max(r,e))}function G(e,r,n,o){return n===r?0:We((e-r)/(n-r)*o,0,1)}function Se(e,r,n,o,a){let f=Ae(e.top,e.height,r,o.element)-ke(o.viewport,n),p=Ae(e.top,e.height,r,a.element)-ke(a.viewport,n);return {tStart:f,tEnd:p}}function Te(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function ge(e,r,n){let o=Te(e),a=Te(r);return !o||!a?e:`rgb(${Math.round(o[0]+(a[0]-o[0])*n)},${Math.round(o[1]+(a[1]-o[1])*n)},${Math.round(o[2]+(a[2]-o[2])*n)})`}function De(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}function Ve(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?De("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&De("Element has a fill \u2014 it may obscure the stroke animation.",e);}function ze(e,r,n){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function a(){let f=n==="x"?window.scrollX:window.scrollY,p=e-f,L=r-f,B=n==="x";o.innerHTML=`
+      <div style="position:absolute;${B?`left:${p}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${p}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
+      <div style="position:absolute;${B?`left:${L}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${L}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(o),window.addEventListener("scroll",a,{passive:true}),a(),o}function Me(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),a=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,f=>{let p=parseFloat(f),L=o[a++]??p;return String(+(p+(L-p)*n).toFixed(4))})}function Le(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let n=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:a=1,fade:f=false,easing:p="linear",trigger:L={},stagger:B=0,direction:I="forward",once:X=false,debug:Ie=false,axis:x="y",scrollContainer:ne,autoReverse:se=false,delay:he=0,strokeColor:F,strokeWidth:N,fillOpacity:R,waypoints:oe,velocityScale:ie=false,threshold:Oe=0,rootMargin:Pe="0px",repeat:_=0,repeatDelay:be=0,morphTo:O,clip:le,onProgress:we,onStart:ve,onComplete:j}=r,W=le===true?"left":typeof le=="string"?le:false,ae=typeof p=="function"?p:me[p]??me.linear,Ce=de(L.start??"top bottom"),Fe=de(L.end??"bottom top"),d=typeof ne=="string"?document.querySelector(ne):ne??null,A=Array.isArray(F)?F[0]:null,y=Array.isArray(F)?F[1]:typeof F=="string"?F:null,g=Array.isArray(N)?N[0]:null,h=Array.isArray(N)?N[1]:typeof N=="number"?N:null,b=Array.isArray(R)?R[0]:null,w=Array.isArray(R)?R[1]:typeof R=="number"?R:null;function V(t){let s=t*100;switch(W){case "right":return `inset(0 0 0 ${100-s}%)`;case "top":return `inset(0 0 ${100-s}% 0)`;case "bottom":return `inset(${100-s}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-s}% 0 0)`}}let q=W?[]:Array.from(e.querySelectorAll(o)),$=[],k=[],T=0,S=0,E=false,P=false,D=0,J=false,v=-1,K=-1,C=false,Q=0,H=0,U,ce=null,Y=new Set,Z=-1,xe=performance.now();function ue(){return d?x==="x"?d.scrollLeft:d.scrollTop:x==="x"?window.scrollX:window.scrollY}function Ne(){return d?x==="x"?d.clientWidth:d.clientHeight:x==="x"?window.innerWidth:window.innerHeight}function $e(){let t=e.getBoundingClientRect(),s,l,m;if(d){let z=d.getBoundingClientRect();s=x==="x"?t.left-z.left+d.scrollLeft:t.top-z.top+d.scrollTop,l=x==="x"?t.width:t.height,m=ue();}else s=x==="x"?t.left:t.top,l=x==="x"?t.width:t.height,m=ue();let re=Se({top:s,height:l},m,Ne(),Ce,Fe);T=re.tStart,S=re.tEnd,Ie&&process.env.NODE_ENV!=="production"&&(ce?.remove(),ce=ze(T,S,x));}function Re(t,s){if(W){let l=s==="reverse"?1-t:t;e.style.clipPath=V(l);return}q.forEach((l,m)=>{l.style.strokeDashoffset=s==="reverse"?`${$[m]*t}`:`${$[m]*(1-t)}`,f&&(l.style.opacity=s==="reverse"?`${1-t}`:`${t}`),A&&y?l.style.stroke=ge(A,y,t):y&&(l.style.stroke=y),g!==null&&h!==null?l.style.strokeWidth=`${g+(h-g)*t}`:h!==null&&(l.style.strokeWidth=`${h}`),b!==null&&w!==null?l.style.fillOpacity=`${b+(w-b)*t}`:w!==null&&(l.style.fillOpacity=`${w}`),O&&l.tagName.toLowerCase()==="path"&&k[m]&&l.setAttribute("d",Me(k[m],O,t));});}function Ee(){if(W){e.style.clipPath=V(0);return}q.forEach((t,s)=>{t.style.strokeDasharray=`${$[s]}`,t.style.strokeDashoffset=I==="reverse"?"0":`${$[s]}`,f?t.style.opacity=I==="reverse"?"1":"0":t.style.opacity="",A&&(t.style.stroke=A),g!==null&&(t.style.strokeWidth=`${g}`),b!==null&&(t.style.fillOpacity=`${b}`),O&&t.tagName.toLowerCase()==="path"&&k[s]&&t.setAttribute("d",k[s]);});}if(q.forEach(t=>{Ve(t);let s=ye(t);$.push(s),t.tagName.toLowerCase()==="path"?k.push(t.getAttribute("d")??""):k.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=I==="reverse"?`${s}`:"0",f&&(t.style.opacity="1"),y&&(t.style.stroke=y),h!==null&&(t.style.strokeWidth=`${h}`),w!==null&&(t.style.fillOpacity=`${w}`),O&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",O)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=I==="reverse"?"0":`${s}`,f?t.style.opacity=I==="reverse"?"1":"0":t.style.opacity="",A&&(t.style.stroke=A),g!==null&&(t.style.strokeWidth=`${g}`),b!==null&&(t.style.fillOpacity=`${b}`));}),W){if(n)return e.style.clipPath=V(1),j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=V(0);}else if(n)return j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};$e();function ee(){if(!J||C)return;let t=performance.now(),s=ue(),l=a;if(ie!==false){let i=t-xe,c=i>0?Math.abs(s-(Z<0?s:Z))/i:0;l=a*Math.max(.2,1+c*(typeof ie=="number"?ie:1)*.04);}Z=s,xe=t;let m=se?K===-1||s>=K?"forward":"reverse":I;K=s;let re=S-T,z=true;if(W){let i=ae(G(s,T,S,l));X&&!se&&(v=Math.max(v,i),i=v),Q=i;let c=m==="reverse"?1-i:i;e.style.clipPath=V(c),we?.(i),!P&&G(s,T,S,l)>0&&(P=true,ve?.()),i>=1&&!E?(E=true,j?.(),H<(_==="infinite"?1/0:_??0)&&(H++,U=setTimeout(()=>{v=-1,P=false,E=false,e.style.clipPath=V(0);},be))):i<1&&!X&&(E=false),D=requestAnimationFrame(ee);return}if(q.forEach((i,c)=>{let M=c*B*re,u=ae(G(s,T+M,S+M,l));X&&!se&&(v=Math.max(v,u),u=v),Q=u,i.style.strokeDashoffset=m==="reverse"?`${$[c]*u}`:`${$[c]*(1-u)}`,f&&(i.style.opacity=m==="reverse"?`${1-u}`:`${u}`),A&&y?i.style.stroke=ge(A,y,u):y&&(i.style.stroke=y),g!==null&&h!==null?i.style.strokeWidth=`${g+(h-g)*u}`:h!==null&&(i.style.strokeWidth=`${h}`),b!==null&&w!==null?i.style.fillOpacity=`${b+(w-b)*u}`:w!==null&&(i.style.fillOpacity=`${w}`),O&&i.tagName.toLowerCase()==="path"&&k[c]&&i.setAttribute("d",Me(k[c],O,u)),c===0&&we?.(u),u<1&&(z=false);}),oe){let i=ae(G(s,T,S,l));for(let c in oe){let M=parseFloat(c);i>=M&&!Y.has(M)&&(Y.add(M),oe[c]?.());}}!P&&G(s,T,S,l)>0&&(P=true,ve?.()),z&&!E?(E=true,j?.(),H<(_==="infinite"?1/0:_??0)&&(H++,U=setTimeout(()=>{v=-1,P=false,E=false,Y.clear(),Ee();},be))):!z&&!X&&(E=false),D=requestAnimationFrame(ee);}let fe=new IntersectionObserver(t=>{t.forEach(s=>{J=s.isIntersecting,J&&!C?D=requestAnimationFrame(ee):cancelAnimationFrame(D);});},{root:d??null,threshold:Oe,rootMargin:Pe}),pe;function te(){clearTimeout(pe),pe=setTimeout(()=>{q.forEach((t,s)=>{$[s]=ye(t),t.style.strokeDasharray=`${$[s]}`;}),$e();},150);}return window.addEventListener("resize",te),window.addEventListener("orientationchange",te),he>0?setTimeout(()=>fe.observe(e),he):fe.observe(e),{destroy(){cancelAnimationFrame(D),clearTimeout(U),fe.disconnect(),window.removeEventListener("resize",te),window.removeEventListener("orientationchange",te),clearTimeout(pe),ce?.remove();},replay(){v=-1,K=-1,Z=-1,P=false,E=false,H=0,C=false,Y.clear(),clearTimeout(U),Ee();},pause(){C=true,cancelAnimationFrame(D);},resume(){C&&(C=false,J&&(D=requestAnimationFrame(ee)));},seek(t){let s=Math.min(1,Math.max(0,t));Q=s,v=s,C=true,cancelAnimationFrame(D),Re(s,I);},getProgress(){return Q}}}function Xe(e,r){let n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return n;let o=typeof e=="string"?document.querySelector(e):e;return o?Le(o,r):(console.warn("[svg-scroll-draw] Container not found:",e),n)}exports.scrollDraw=Xe;

package/dist/index.d.mts

@@ -19,14 +19,34 @@ interface ScrollDrawOptions {
     scrollContainer?: string | Element;
     /** Automatically reverse the animation when the user scrolls back up. */
     autoReverse?: boolean;
-    /** Delay in milliseconds before the engine starts observing (useful for page-load sequences). */
+    /** Delay in milliseconds before the engine starts observing. */
     delay?: number;
     /** Animate stroke color. Single string = static override. Tuple = interpolate from → to. */
     strokeColor?: string | [string, string];
     /** Animate stroke width. Single number = static override. Tuple = interpolate from → to. */
     strokeWidth?: number | [number, number];
+    /** Animate fill opacity. Single number = static override. Tuple [from, to] = interpolate as the path draws. Use [0, 1] to flood fill in sync with the stroke draw. */
+    fillOpacity?: number | [number, number];
+    /**
+     * Reveal the container using CSS clip-path instead of stroke-dashoffset.
+     * Works on any content — SVG, images, text, divs.
+     * `true` defaults to `'left'`. Values: `'left' | 'right' | 'top' | 'bottom' | 'center'`.
+     */
+    clip?: boolean | 'left' | 'right' | 'top' | 'bottom' | 'center';
     /** Fire callbacks at specific progress thresholds (0–1). Resets on replay(). */
     waypoints?: Record<number, () => void>;
+    /** Scale animation speed by scroll velocity — faster scrolling = faster draw. Pass a number to control sensitivity (default 1). */
+    velocityScale?: boolean | number;
+    /** IntersectionObserver threshold (0–1). Default 0. */
+    threshold?: number;
+    /** IntersectionObserver rootMargin. Default "0px". */
+    rootMargin?: string;
+    /** Repeat the animation N times after completion. Use 'infinite' to loop forever. */
+    repeat?: number | 'infinite';
+    /** Milliseconds to wait between repeats. Default 0. */
+    repeatDelay?: number;
+    /** Target path `d` attribute to morph toward as the animation progresses. Paths must have compatible structures. */
+    morphTo?: string;
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
@@ -35,6 +55,14 @@ interface ScrollDrawInstance {
     destroy: () => void;
     /** Reset and replay the animation from the beginning. */
     replay: () => void;
+    /** Pause the animation at the current progress. */
+    pause: () => void;
+    /** Resume a paused animation. */
+    resume: () => void;
+    /** Jump to a specific progress value (0–1) and pause. */
+    seek: (progress: number) => void;
+    /** Returns current draw progress (0–1). */
+    getProgress: () => number;
 }
 
 declare function scrollDraw(target: string | Element, options?: ScrollDrawOptions): ScrollDrawInstance;

package/dist/index.d.ts

@@ -19,14 +19,34 @@ interface ScrollDrawOptions {
     scrollContainer?: string | Element;
     /** Automatically reverse the animation when the user scrolls back up. */
     autoReverse?: boolean;
-    /** Delay in milliseconds before the engine starts observing (useful for page-load sequences). */
+    /** Delay in milliseconds before the engine starts observing. */
     delay?: number;
     /** Animate stroke color. Single string = static override. Tuple = interpolate from → to. */
     strokeColor?: string | [string, string];
     /** Animate stroke width. Single number = static override. Tuple = interpolate from → to. */
     strokeWidth?: number | [number, number];
+    /** Animate fill opacity. Single number = static override. Tuple [from, to] = interpolate as the path draws. Use [0, 1] to flood fill in sync with the stroke draw. */
+    fillOpacity?: number | [number, number];
+    /**
+     * Reveal the container using CSS clip-path instead of stroke-dashoffset.
+     * Works on any content — SVG, images, text, divs.
+     * `true` defaults to `'left'`. Values: `'left' | 'right' | 'top' | 'bottom' | 'center'`.
+     */
+    clip?: boolean | 'left' | 'right' | 'top' | 'bottom' | 'center';
     /** Fire callbacks at specific progress thresholds (0–1). Resets on replay(). */
     waypoints?: Record<number, () => void>;
+    /** Scale animation speed by scroll velocity — faster scrolling = faster draw. Pass a number to control sensitivity (default 1). */
+    velocityScale?: boolean | number;
+    /** IntersectionObserver threshold (0–1). Default 0. */
+    threshold?: number;
+    /** IntersectionObserver rootMargin. Default "0px". */
+    rootMargin?: string;
+    /** Repeat the animation N times after completion. Use 'infinite' to loop forever. */
+    repeat?: number | 'infinite';
+    /** Milliseconds to wait between repeats. Default 0. */
+    repeatDelay?: number;
+    /** Target path `d` attribute to morph toward as the animation progresses. Paths must have compatible structures. */
+    morphTo?: string;
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
@@ -35,6 +55,14 @@ interface ScrollDrawInstance {
     destroy: () => void;
     /** Reset and replay the animation from the beginning. */
     replay: () => void;
+    /** Pause the animation at the current progress. */
+    pause: () => void;
+    /** Resume a paused animation. */
+    resume: () => void;
+    /** Jump to a specific progress value (0–1) and pause. */
+    seek: (progress: number) => void;
+    /** Returns current draw progress (0–1). */
+    getProgress: () => number;
 }
 
 declare function scrollDraw(target: string | Element, options?: ScrollDrawOptions): ScrollDrawInstance;

package/dist/index.mjs

@@ -1,3 +1,3 @@
-var _={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,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2)};function H(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let[r="top",o="bottom"]=t.split(/\s+/).filter(Boolean);return {element:r,viewport:o}}function te(e,t,r,o){switch(o){case "top":return e+r;case "center":return e+r+t/2;case "bottom":return e+r+t;default:return e+r}}function re(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 j(e){let t=e.tagName.toLowerCase();if(t==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(r+o)}if(t==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function ye(e,t,r){return Math.min(r,Math.max(t,e))}function z(e,t,r,o){return r===t?0:ye((e-t)/(r-t)*o,0,1)}function oe(e,t,r,o,i){let f=te(e.top,e.height,t,o.element)-re(o.viewport,r),d=te(e.top,e.height,t,i.element)-re(i.viewport,r);return {tStart:f,tEnd:d}}function ne(e){let t=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(t)return [parseInt(t[1]+t[1],16),parseInt(t[2]+t[2],16),parseInt(t[3]+t[3],16)];let r=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(r)return [parseInt(r[1],16),parseInt(r[2],16),parseInt(r[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function se(e,t,r){let o=ne(e),i=ne(t);return !o||!i?e:`rgb(${Math.round(o[0]+(i[0]-o[0])*r)},${Math.round(o[1]+(i[1]-o[1])*r)},${Math.round(o[2]+(i[2]-o[2])*r)})`}function ie(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function be(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?ie("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&ie("Element has a fill \u2014 it may obscure the stroke animation.",e);}function ge(e,t,r){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function i(){let f=r==="x"?window.scrollX:window.scrollY,d=e-f,A=t-f,I=r==="x";o.innerHTML=`
-      <div style="position:absolute;${I?`left:${d}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${d}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
-      <div style="position:absolute;${I?`left:${A}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${A}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(o),window.addEventListener("scroll",i,{passive:true}),i(),o}function le(e,t={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{}};let r=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:i=1,fade:f=false,easing:d="linear",trigger:A={},stagger:I=0,direction:g="forward",once:J=false,debug:ae=false,axis:p="y",scrollContainer:W,autoReverse:K=false,delay:Q=0,strokeColor:h,strokeWidth:w,waypoints:G,onProgress:ce,onStart:ue,onComplete:U}=t,Y=typeof d=="function"?d:_[d]??_.linear,fe=H(A.start??"top bottom"),pe=H(A.end??"bottom top"),l=typeof W=="string"?document.querySelector(W):W??null,v=Array.isArray(h)?h[0]:null,x=Array.isArray(h)?h[1]:typeof h=="string"?h:null,m=Array.isArray(w)?w[0]:null,E=Array.isArray(w)?w[1]:typeof w=="number"?w:null,T=Array.from(e.querySelectorAll(o)),y=[],$=0,S=0,L=false,V=false,M=0,N=false,C=-1,F=-1,P=null,R=new Set;function q(){return l?p==="x"?l.scrollLeft:l.scrollTop:p==="x"?window.scrollX:window.scrollY}function de(){return l?p==="x"?l.clientWidth:l.clientHeight:p==="x"?window.innerWidth:window.innerHeight}function Z(){let n=e.getBoundingClientRect(),s,D,b;if(l){let c=l.getBoundingClientRect();s=p==="x"?n.left-c.left+l.scrollLeft:n.top-c.top+l.scrollTop,D=p==="x"?n.width:n.height,b=q();}else s=p==="x"?n.left:n.top,D=p==="x"?n.width:n.height,b=q();let a=oe({top:s,height:D},b,de(),fe,pe);$=a.tStart,S=a.tEnd,ae&&process.env.NODE_ENV!=="production"&&(P?.remove(),P=ge($,S,p));}function me(){T.forEach((n,s)=>{n.style.strokeDasharray=`${y[s]}`,n.style.strokeDashoffset=g==="reverse"?"0":`${y[s]}`,f?n.style.opacity=g==="reverse"?"1":"0":n.style.opacity="",v&&(n.style.stroke=v),m!==null&&(n.style.strokeWidth=`${m}`);});}if(T.forEach(n=>{be(n);let s=j(n);y.push(s),r?(n.style.strokeDasharray=`${s}`,n.style.strokeDashoffset=g==="reverse"?`${s}`:"0",f&&(n.style.opacity="1"),x&&(n.style.stroke=x),E!==null&&(n.style.strokeWidth=`${E}`)):(n.style.strokeDasharray=`${s}`,n.style.strokeDashoffset=g==="reverse"?"0":`${s}`,f?n.style.opacity=g==="reverse"?"1":"0":n.style.opacity="",v&&(n.style.stroke=v),m!==null&&(n.style.strokeWidth=`${m}`));}),r)return U?.(),{destroy:()=>{},replay:()=>{}};Z();function ee(){if(!N)return;let n=q(),s=K?F===-1||n>=F?"forward":"reverse":g;F=n;let D=S-$,b=true;if(T.forEach((a,c)=>{let k=c*I*D,u=Y(z(n,$+k,S+k,i));J&&!K&&(C=Math.max(C,u),u=C),a.style.strokeDashoffset=s==="reverse"?`${y[c]*u}`:`${y[c]*(1-u)}`,f&&(a.style.opacity=s==="reverse"?`${1-u}`:`${u}`),v&&x?a.style.stroke=se(v,x,u):x&&(a.style.stroke=x),m!==null&&E!==null?a.style.strokeWidth=`${m+(E-m)*u}`:E!==null&&(a.style.strokeWidth=`${E}`),c===0&&ce?.(u),u<1&&(b=false);}),G){let a=Y(z(n,$,S,i));for(let c in G){let k=parseFloat(c);a>=k&&!R.has(k)&&(R.add(k),G[c]?.());}}!V&&z(n,$,S,i)>0&&(V=true,ue?.()),b&&!L?(L=true,U?.()):!b&&!J&&(L=false),M=requestAnimationFrame(ee);}let B=new IntersectionObserver(n=>{n.forEach(s=>{N=s.isIntersecting,N?M=requestAnimationFrame(ee):cancelAnimationFrame(M);});},{root:l??null}),X;function O(){clearTimeout(X),X=setTimeout(()=>{T.forEach((n,s)=>{y[s]=j(n),n.style.strokeDasharray=`${y[s]}`;}),Z();},150);}return window.addEventListener("resize",O),window.addEventListener("orientationchange",O),Q>0?setTimeout(()=>B.observe(e),Q):B.observe(e),{destroy(){cancelAnimationFrame(M),B.disconnect(),window.removeEventListener("resize",O),window.removeEventListener("orientationchange",O),clearTimeout(X),P?.remove();},replay(){C=-1,F=-1,V=false,L=false,R.clear(),me();}}}function Ee(e,t){let r={destroy:()=>{},replay:()=>{}};if(typeof window>"u")return r;let o=typeof e=="string"?document.querySelector(e):e;return o?le(o,t):(console.warn("[svg-scroll-draw] Container not found:",e),r)}export{Ee as scrollDraw};
+var me={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,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2)};function de(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[n="top",o="bottom"]=r.split(/\s+/).filter(Boolean);return {element:n,viewport:o}}function Ae(e,r,n,o){switch(o){case "top":return e+n;case "center":return e+n+r/2;case "bottom":return e+n+r;default:return e+n}}function ke(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function ye(e){let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(n+o)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function We(e,r,n){return Math.min(n,Math.max(r,e))}function G(e,r,n,o){return n===r?0:We((e-r)/(n-r)*o,0,1)}function Se(e,r,n,o,a){let f=Ae(e.top,e.height,r,o.element)-ke(o.viewport,n),p=Ae(e.top,e.height,r,a.element)-ke(a.viewport,n);return {tStart:f,tEnd:p}}function Te(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function ge(e,r,n){let o=Te(e),a=Te(r);return !o||!a?e:`rgb(${Math.round(o[0]+(a[0]-o[0])*n)},${Math.round(o[1]+(a[1]-o[1])*n)},${Math.round(o[2]+(a[2]-o[2])*n)})`}function De(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}function Ve(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?De("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&De("Element has a fill \u2014 it may obscure the stroke animation.",e);}function ze(e,r,n){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function a(){let f=n==="x"?window.scrollX:window.scrollY,p=e-f,L=r-f,B=n==="x";o.innerHTML=`
+      <div style="position:absolute;${B?`left:${p}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${p}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
+      <div style="position:absolute;${B?`left:${L}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${L}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(o),window.addEventListener("scroll",a,{passive:true}),a(),o}function Me(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),a=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,f=>{let p=parseFloat(f),L=o[a++]??p;return String(+(p+(L-p)*n).toFixed(4))})}function Le(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let n=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:a=1,fade:f=false,easing:p="linear",trigger:L={},stagger:B=0,direction:I="forward",once:X=false,debug:Ie=false,axis:x="y",scrollContainer:ne,autoReverse:se=false,delay:he=0,strokeColor:F,strokeWidth:N,fillOpacity:R,waypoints:oe,velocityScale:ie=false,threshold:Oe=0,rootMargin:Pe="0px",repeat:_=0,repeatDelay:be=0,morphTo:O,clip:le,onProgress:we,onStart:ve,onComplete:j}=r,W=le===true?"left":typeof le=="string"?le:false,ae=typeof p=="function"?p:me[p]??me.linear,Ce=de(L.start??"top bottom"),Fe=de(L.end??"bottom top"),d=typeof ne=="string"?document.querySelector(ne):ne??null,A=Array.isArray(F)?F[0]:null,y=Array.isArray(F)?F[1]:typeof F=="string"?F:null,g=Array.isArray(N)?N[0]:null,h=Array.isArray(N)?N[1]:typeof N=="number"?N:null,b=Array.isArray(R)?R[0]:null,w=Array.isArray(R)?R[1]:typeof R=="number"?R:null;function V(t){let s=t*100;switch(W){case "right":return `inset(0 0 0 ${100-s}%)`;case "top":return `inset(0 0 ${100-s}% 0)`;case "bottom":return `inset(${100-s}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-s}% 0 0)`}}let q=W?[]:Array.from(e.querySelectorAll(o)),$=[],k=[],T=0,S=0,E=false,P=false,D=0,J=false,v=-1,K=-1,C=false,Q=0,H=0,U,ce=null,Y=new Set,Z=-1,xe=performance.now();function ue(){return d?x==="x"?d.scrollLeft:d.scrollTop:x==="x"?window.scrollX:window.scrollY}function Ne(){return d?x==="x"?d.clientWidth:d.clientHeight:x==="x"?window.innerWidth:window.innerHeight}function $e(){let t=e.getBoundingClientRect(),s,l,m;if(d){let z=d.getBoundingClientRect();s=x==="x"?t.left-z.left+d.scrollLeft:t.top-z.top+d.scrollTop,l=x==="x"?t.width:t.height,m=ue();}else s=x==="x"?t.left:t.top,l=x==="x"?t.width:t.height,m=ue();let re=Se({top:s,height:l},m,Ne(),Ce,Fe);T=re.tStart,S=re.tEnd,Ie&&process.env.NODE_ENV!=="production"&&(ce?.remove(),ce=ze(T,S,x));}function Re(t,s){if(W){let l=s==="reverse"?1-t:t;e.style.clipPath=V(l);return}q.forEach((l,m)=>{l.style.strokeDashoffset=s==="reverse"?`${$[m]*t}`:`${$[m]*(1-t)}`,f&&(l.style.opacity=s==="reverse"?`${1-t}`:`${t}`),A&&y?l.style.stroke=ge(A,y,t):y&&(l.style.stroke=y),g!==null&&h!==null?l.style.strokeWidth=`${g+(h-g)*t}`:h!==null&&(l.style.strokeWidth=`${h}`),b!==null&&w!==null?l.style.fillOpacity=`${b+(w-b)*t}`:w!==null&&(l.style.fillOpacity=`${w}`),O&&l.tagName.toLowerCase()==="path"&&k[m]&&l.setAttribute("d",Me(k[m],O,t));});}function Ee(){if(W){e.style.clipPath=V(0);return}q.forEach((t,s)=>{t.style.strokeDasharray=`${$[s]}`,t.style.strokeDashoffset=I==="reverse"?"0":`${$[s]}`,f?t.style.opacity=I==="reverse"?"1":"0":t.style.opacity="",A&&(t.style.stroke=A),g!==null&&(t.style.strokeWidth=`${g}`),b!==null&&(t.style.fillOpacity=`${b}`),O&&t.tagName.toLowerCase()==="path"&&k[s]&&t.setAttribute("d",k[s]);});}if(q.forEach(t=>{Ve(t);let s=ye(t);$.push(s),t.tagName.toLowerCase()==="path"?k.push(t.getAttribute("d")??""):k.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=I==="reverse"?`${s}`:"0",f&&(t.style.opacity="1"),y&&(t.style.stroke=y),h!==null&&(t.style.strokeWidth=`${h}`),w!==null&&(t.style.fillOpacity=`${w}`),O&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",O)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=I==="reverse"?"0":`${s}`,f?t.style.opacity=I==="reverse"?"1":"0":t.style.opacity="",A&&(t.style.stroke=A),g!==null&&(t.style.strokeWidth=`${g}`),b!==null&&(t.style.fillOpacity=`${b}`));}),W){if(n)return e.style.clipPath=V(1),j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=V(0);}else if(n)return j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};$e();function ee(){if(!J||C)return;let t=performance.now(),s=ue(),l=a;if(ie!==false){let i=t-xe,c=i>0?Math.abs(s-(Z<0?s:Z))/i:0;l=a*Math.max(.2,1+c*(typeof ie=="number"?ie:1)*.04);}Z=s,xe=t;let m=se?K===-1||s>=K?"forward":"reverse":I;K=s;let re=S-T,z=true;if(W){let i=ae(G(s,T,S,l));X&&!se&&(v=Math.max(v,i),i=v),Q=i;let c=m==="reverse"?1-i:i;e.style.clipPath=V(c),we?.(i),!P&&G(s,T,S,l)>0&&(P=true,ve?.()),i>=1&&!E?(E=true,j?.(),H<(_==="infinite"?1/0:_??0)&&(H++,U=setTimeout(()=>{v=-1,P=false,E=false,e.style.clipPath=V(0);},be))):i<1&&!X&&(E=false),D=requestAnimationFrame(ee);return}if(q.forEach((i,c)=>{let M=c*B*re,u=ae(G(s,T+M,S+M,l));X&&!se&&(v=Math.max(v,u),u=v),Q=u,i.style.strokeDashoffset=m==="reverse"?`${$[c]*u}`:`${$[c]*(1-u)}`,f&&(i.style.opacity=m==="reverse"?`${1-u}`:`${u}`),A&&y?i.style.stroke=ge(A,y,u):y&&(i.style.stroke=y),g!==null&&h!==null?i.style.strokeWidth=`${g+(h-g)*u}`:h!==null&&(i.style.strokeWidth=`${h}`),b!==null&&w!==null?i.style.fillOpacity=`${b+(w-b)*u}`:w!==null&&(i.style.fillOpacity=`${w}`),O&&i.tagName.toLowerCase()==="path"&&k[c]&&i.setAttribute("d",Me(k[c],O,u)),c===0&&we?.(u),u<1&&(z=false);}),oe){let i=ae(G(s,T,S,l));for(let c in oe){let M=parseFloat(c);i>=M&&!Y.has(M)&&(Y.add(M),oe[c]?.());}}!P&&G(s,T,S,l)>0&&(P=true,ve?.()),z&&!E?(E=true,j?.(),H<(_==="infinite"?1/0:_??0)&&(H++,U=setTimeout(()=>{v=-1,P=false,E=false,Y.clear(),Ee();},be))):!z&&!X&&(E=false),D=requestAnimationFrame(ee);}let fe=new IntersectionObserver(t=>{t.forEach(s=>{J=s.isIntersecting,J&&!C?D=requestAnimationFrame(ee):cancelAnimationFrame(D);});},{root:d??null,threshold:Oe,rootMargin:Pe}),pe;function te(){clearTimeout(pe),pe=setTimeout(()=>{q.forEach((t,s)=>{$[s]=ye(t),t.style.strokeDasharray=`${$[s]}`;}),$e();},150);}return window.addEventListener("resize",te),window.addEventListener("orientationchange",te),he>0?setTimeout(()=>fe.observe(e),he):fe.observe(e),{destroy(){cancelAnimationFrame(D),clearTimeout(U),fe.disconnect(),window.removeEventListener("resize",te),window.removeEventListener("orientationchange",te),clearTimeout(pe),ce?.remove();},replay(){v=-1,K=-1,Z=-1,P=false,E=false,H=0,C=false,Y.clear(),clearTimeout(U),Ee();},pause(){C=true,cancelAnimationFrame(D);},resume(){C&&(C=false,J&&(D=requestAnimationFrame(ee)));},seek(t){let s=Math.min(1,Math.max(0,t));Q=s,v=s,C=true,cancelAnimationFrame(D),Re(s,I);},getProgress(){return Q}}}function Xe(e,r){let n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return n;let o=typeof e=="string"?document.querySelector(e):e;return o?Le(o,r):(console.warn("[svg-scroll-draw] Container not found:",e),n)}export{Xe as scrollDraw};

package/dist/nuxt/index.cjs

@@ -0,0 +1,3 @@
+'use strict';var vue=require('vue');var pe={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,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2)};function de(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[o="top",n="bottom"]=r.split(/\s+/).filter(Boolean);return {element:o,viewport:n}}function De(e,r,o,n){switch(n){case "top":return e+o;case "center":return e+o+r/2;case "bottom":return e+o+r;default:return e+o}}function Te(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function ge(e){let r=e.tagName.toLowerCase();if(r==="rect"){let o=parseFloat(e.getAttribute("width")??"0"),n=parseFloat(e.getAttribute("height")??"0");return 2*(o+n)}if(r==="circle"){let o=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*o}return e.getTotalLength()}function Ge(e,r,o){return Math.min(o,Math.max(r,e))}function H(e,r,o,n){return o===r?0:Ge((e-r)/(o-r)*n,0,1)}function Me(e,r,o,n,a){let f=De(e.top,e.height,r,n.element)-Te(n.viewport,o),m=De(e.top,e.height,r,a.element)-Te(a.viewport,o);return {tStart:f,tEnd:m}}function ke(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let o=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(o)return [parseInt(o[1],16),parseInt(o[2],16),parseInt(o[3],16)];let n=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return n?[parseInt(n[1]),parseInt(n[2]),parseInt(n[3])]:null}function ye(e,r,o){let n=ke(e),a=ke(r);return !n||!a?e:`rgb(${Math.round(n[0]+(a[0]-n[0])*o)},${Math.round(n[1]+(a[1]-n[1])*o)},${Math.round(n[2]+(a[2]-n[2])*o)})`}function Oe(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}function qe(e){let r=e.getAttribute("stroke"),o=e.getAttribute("fill");!r||r==="none"?Oe("Element has no stroke \u2014 path will not be visible.",e):o&&o!=="none"&&o!=="transparent"&&Oe("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Be(e,r,o){let n=document.createElement("div");n.setAttribute("data-svg-scroll-draw-debug",""),n.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function a(){let f=o==="x"?window.scrollX:window.scrollY,m=e-f,O=r-f,B=o==="x";n.innerHTML=`
+      <div style="position:absolute;${B?`left:${m}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${m}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
+      <div style="position:absolute;${B?`left:${O}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${O}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(n),window.addEventListener("scroll",a,{passive:true}),a(),n}function Le(e,r,o){let n=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),a=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,f=>{let m=parseFloat(f),O=n[a++]??m;return String(+(m+(O-m)*o).toFixed(4))})}function he(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let o=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:n="path, polyline, line, polygon, rect, circle",speed:a=1,fade:f=false,easing:m="linear",trigger:O={},stagger:B=0,direction:L="forward",once:X=false,debug:Ie=false,axis:x="y",scrollContainer:ne,autoReverse:oe=false,delay:we=0,strokeColor:I,strokeWidth:N,fillOpacity:R,waypoints:se,velocityScale:ie=false,threshold:Ne=0,rootMargin:Re="0px",repeat:_=0,repeatDelay:ve=0,morphTo:P,clip:le,onProgress:xe,onStart:Se,onComplete:j}=r,W=le===true?"left":typeof le=="string"?le:false,ae=typeof m=="function"?m:pe[m]??pe.linear,We=de(O.start??"top bottom"),Ve=de(O.end??"bottom top"),d=typeof ne=="string"?document.querySelector(ne):ne??null,$=Array.isArray(I)?I[0]:null,g=Array.isArray(I)?I[1]:typeof I=="string"?I:null,y=Array.isArray(N)?N[0]:null,h=Array.isArray(N)?N[1]:typeof N=="number"?N:null,b=Array.isArray(R)?R[0]:null,w=Array.isArray(R)?R[1]:typeof R=="number"?R:null;function V(t){let s=t*100;switch(W){case "right":return `inset(0 0 0 ${100-s}%)`;case "top":return `inset(0 0 ${100-s}% 0)`;case "bottom":return `inset(${100-s}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-s}% 0 0)`}}let G=W?[]:Array.from(e.querySelectorAll(n)),S=[],A=[],D=0,T=0,E=false,C=false,k=0,U=false,v=-1,J=-1,F=false,K=0,q=0,Q,ue=null,Y=new Set,Z=-1,Ee=performance.now();function ce(){return d?x==="x"?d.scrollLeft:d.scrollTop:x==="x"?window.scrollX:window.scrollY}function ze(){return d?x==="x"?d.clientWidth:d.clientHeight:x==="x"?window.innerWidth:window.innerHeight}function $e(){let t=e.getBoundingClientRect(),s,l,p;if(d){let z=d.getBoundingClientRect();s=x==="x"?t.left-z.left+d.scrollLeft:t.top-z.top+d.scrollTop,l=x==="x"?t.width:t.height,p=ce();}else s=x==="x"?t.left:t.top,l=x==="x"?t.width:t.height,p=ce();let re=Me({top:s,height:l},p,ze(),We,Ve);D=re.tStart,T=re.tEnd,Ie&&process.env.NODE_ENV!=="production"&&(ue?.remove(),ue=Be(D,T,x));}function He(t,s){if(W){let l=s==="reverse"?1-t:t;e.style.clipPath=V(l);return}G.forEach((l,p)=>{l.style.strokeDashoffset=s==="reverse"?`${S[p]*t}`:`${S[p]*(1-t)}`,f&&(l.style.opacity=s==="reverse"?`${1-t}`:`${t}`),$&&g?l.style.stroke=ye($,g,t):g&&(l.style.stroke=g),y!==null&&h!==null?l.style.strokeWidth=`${y+(h-y)*t}`:h!==null&&(l.style.strokeWidth=`${h}`),b!==null&&w!==null?l.style.fillOpacity=`${b+(w-b)*t}`:w!==null&&(l.style.fillOpacity=`${w}`),P&&l.tagName.toLowerCase()==="path"&&A[p]&&l.setAttribute("d",Le(A[p],P,t));});}function Ae(){if(W){e.style.clipPath=V(0);return}G.forEach((t,s)=>{t.style.strokeDasharray=`${S[s]}`,t.style.strokeDashoffset=L==="reverse"?"0":`${S[s]}`,f?t.style.opacity=L==="reverse"?"1":"0":t.style.opacity="",$&&(t.style.stroke=$),y!==null&&(t.style.strokeWidth=`${y}`),b!==null&&(t.style.fillOpacity=`${b}`),P&&t.tagName.toLowerCase()==="path"&&A[s]&&t.setAttribute("d",A[s]);});}if(G.forEach(t=>{qe(t);let s=ge(t);S.push(s),t.tagName.toLowerCase()==="path"?A.push(t.getAttribute("d")??""):A.push(""),o?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=L==="reverse"?`${s}`:"0",f&&(t.style.opacity="1"),g&&(t.style.stroke=g),h!==null&&(t.style.strokeWidth=`${h}`),w!==null&&(t.style.fillOpacity=`${w}`),P&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",P)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=L==="reverse"?"0":`${s}`,f?t.style.opacity=L==="reverse"?"1":"0":t.style.opacity="",$&&(t.style.stroke=$),y!==null&&(t.style.strokeWidth=`${y}`),b!==null&&(t.style.fillOpacity=`${b}`));}),W){if(o)return e.style.clipPath=V(1),j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=V(0);}else if(o)return j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};$e();function ee(){if(!U||F)return;let t=performance.now(),s=ce(),l=a;if(ie!==false){let i=t-Ee,u=i>0?Math.abs(s-(Z<0?s:Z))/i:0;l=a*Math.max(.2,1+u*(typeof ie=="number"?ie:1)*.04);}Z=s,Ee=t;let p=oe?J===-1||s>=J?"forward":"reverse":L;J=s;let re=T-D,z=true;if(W){let i=ae(H(s,D,T,l));X&&!oe&&(v=Math.max(v,i),i=v),K=i;let u=p==="reverse"?1-i:i;e.style.clipPath=V(u),xe?.(i),!C&&H(s,D,T,l)>0&&(C=true,Se?.()),i>=1&&!E?(E=true,j?.(),q<(_==="infinite"?1/0:_??0)&&(q++,Q=setTimeout(()=>{v=-1,C=false,E=false,e.style.clipPath=V(0);},ve))):i<1&&!X&&(E=false),k=requestAnimationFrame(ee);return}if(G.forEach((i,u)=>{let M=u*B*re,c=ae(H(s,D+M,T+M,l));X&&!oe&&(v=Math.max(v,c),c=v),K=c,i.style.strokeDashoffset=p==="reverse"?`${S[u]*c}`:`${S[u]*(1-c)}`,f&&(i.style.opacity=p==="reverse"?`${1-c}`:`${c}`),$&&g?i.style.stroke=ye($,g,c):g&&(i.style.stroke=g),y!==null&&h!==null?i.style.strokeWidth=`${y+(h-y)*c}`:h!==null&&(i.style.strokeWidth=`${h}`),b!==null&&w!==null?i.style.fillOpacity=`${b+(w-b)*c}`:w!==null&&(i.style.fillOpacity=`${w}`),P&&i.tagName.toLowerCase()==="path"&&A[u]&&i.setAttribute("d",Le(A[u],P,c)),u===0&&xe?.(c),c<1&&(z=false);}),se){let i=ae(H(s,D,T,l));for(let u in se){let M=parseFloat(u);i>=M&&!Y.has(M)&&(Y.add(M),se[u]?.());}}!C&&H(s,D,T,l)>0&&(C=true,Se?.()),z&&!E?(E=true,j?.(),q<(_==="infinite"?1/0:_??0)&&(q++,Q=setTimeout(()=>{v=-1,C=false,E=false,Y.clear(),Ae();},ve))):!z&&!X&&(E=false),k=requestAnimationFrame(ee);}let fe=new IntersectionObserver(t=>{t.forEach(s=>{U=s.isIntersecting,U&&!F?k=requestAnimationFrame(ee):cancelAnimationFrame(k);});},{root:d??null,threshold:Ne,rootMargin:Re}),me;function te(){clearTimeout(me),me=setTimeout(()=>{G.forEach((t,s)=>{S[s]=ge(t),t.style.strokeDasharray=`${S[s]}`;}),$e();},150);}return window.addEventListener("resize",te),window.addEventListener("orientationchange",te),we>0?setTimeout(()=>fe.observe(e),we):fe.observe(e),{destroy(){cancelAnimationFrame(k),clearTimeout(Q),fe.disconnect(),window.removeEventListener("resize",te),window.removeEventListener("orientationchange",te),clearTimeout(me),ue?.remove();},replay(){v=-1,J=-1,Z=-1,C=false,E=false,q=0,F=false,Y.clear(),clearTimeout(Q),Ae();},pause(){F=true,cancelAnimationFrame(k);},resume(){F&&(F=false,U&&(k=requestAnimationFrame(ee)));},seek(t){let s=Math.min(1,Math.max(0,t));K=s,v=s,F=true,cancelAnimationFrame(k),He(s,L);},getProgress(){return K}}}function je(e={}){let r=vue.ref(null);return vue.onMounted(()=>{if(!r.value)return;let o=he(r.value,e);vue.onUnmounted(()=>o.destroy());}),r}var be=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},onStart:{type:Function},onComplete:{type:Function},once:{type:Boolean},debug:{type:Boolean}},setup(e,{slots:r}){let o=vue.ref(null);return vue.onMounted(()=>{if(!o.value)return;let n={};e.selector!=null&&(n.selector=e.selector),e.speed!=null&&(n.speed=e.speed),e.fade!=null&&(n.fade=e.fade),e.stagger!=null&&(n.stagger=e.stagger),e.easing!=null&&(n.easing=e.easing),e.direction!=null&&(n.direction=e.direction),e.trigger!=null&&(n.trigger=e.trigger),e.once!=null&&(n.once=e.once),e.debug!=null&&(n.debug=e.debug),e.onProgress!=null&&(n.onProgress=e.onProgress),e.onStart!=null&&(n.onStart=e.onStart),e.onComplete!=null&&(n.onComplete=e.onComplete);let a=he(o.value,n);vue.onUnmounted(()=>a.destroy());}),()=>vue.h("div",{ref:o},r.default?.())}});function tt(){return {install(e){e.component("ScrollDraw",be);}}}exports.ScrollDraw=be;exports.createScrollDrawPlugin=tt;exports.useScrollDraw=je;