svg-scroll-draw 1.1.0 → 1.3.0

package/dist/solid/index.d.mts

@@ -1,4 +1,4 @@
-type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
 interface TriggerConfig {
     start?: string;
     end?: string;
@@ -60,6 +60,25 @@ interface ScrollDrawOptions {
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
+    /**
+     * Trigger the animation when the element enters the viewport instead of
+     * tying it to scroll position. The draw runs over `duration` milliseconds,
+     * replaying each time the element re-enters the viewport (use `once: true`
+     * to play only the first time).
+     *
+     * All visual options work in autoplay mode — `easing`, `stagger`, `fade`,
+     * `strokeColor`, `strokeWidth`, `fillOpacity`, `clip`, `morphTo`, `waypoints`,
+     * `repeat`, `repeatDelay`, `onStart`, `onComplete`, `onProgress`, etc.
+     *
+     * The full instance API (`pause`, `resume`, `seek`, `replay`, `getProgress`)
+     * also works — `seek(0.5)` pauses at 50% of the duration.
+     */
+    autoplay?: boolean;
+    /**
+     * Duration of the autoplay animation in milliseconds. Only used when
+     * `autoplay: true`. Default `1000`.
+     */
+    duration?: number;
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and

package/dist/solid/index.d.ts

@@ -1,4 +1,4 @@
-type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
 interface TriggerConfig {
     start?: string;
     end?: string;
@@ -60,6 +60,25 @@ interface ScrollDrawOptions {
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
+    /**
+     * Trigger the animation when the element enters the viewport instead of
+     * tying it to scroll position. The draw runs over `duration` milliseconds,
+     * replaying each time the element re-enters the viewport (use `once: true`
+     * to play only the first time).
+     *
+     * All visual options work in autoplay mode — `easing`, `stagger`, `fade`,
+     * `strokeColor`, `strokeWidth`, `fillOpacity`, `clip`, `morphTo`, `waypoints`,
+     * `repeat`, `repeatDelay`, `onStart`, `onComplete`, `onProgress`, etc.
+     *
+     * The full instance API (`pause`, `resume`, `seek`, `replay`, `getProgress`)
+     * also works — `seek(0.5)` pauses at 50% of the duration.
+     */
+    autoplay?: boolean;
+    /**
+     * Duration of the autoplay animation in milliseconds. Only used when
+     * `autoplay: true`. Default `1000`.
+     */
+    duration?: number;
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and

package/dist/solid/index.mjs

@@ -1,3 +1,3 @@
-import {onMount,onCleanup}from'solid-js';var ve={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 we(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 Ce(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 Oe(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 Ee(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 je(e,r,n){return Math.min(n,Math.max(r,e))}function B(e,r,n,o){return n===r?0:je((e-r)/(n-r)*o,0,1)}function $e(e,r,n,o,f){let d=Ce(e.top,e.height,r,o.element)-Oe(o.viewport,n),p=Ce(e.top,e.height,r,f.element)-Oe(f.viewport,n);return {tStart:d,tEnd:p}}function Fe(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 xe(e,r,n){let o=Fe(e),f=Fe(r);return !o||!f?e:`rgb(${Math.round(o[0]+(f[0]-o[0])*n)},${Math.round(o[1]+(f[1]-o[1])*n)},${Math.round(o[2]+(f[2]-o[2])*n)})`}function Ne(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}var He={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},Je=0;function Ke(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function Qe(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?Ne("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&Ne("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Ye(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 f(){let d=n==="x"?window.scrollX:window.scrollY,p=e-d,L=r-d,X=n==="x";o.innerHTML=`
-      <div style="position:absolute;${X?`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;${X?`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",f,{passive:true}),f(),o}function Re(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),f=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,d=>{let p=parseFloat(d),L=o[f++]??p;return String(+(p+(L-p)*n).toFixed(4))})}function Se(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:f=1,fade:d=false,easing:p="linear",trigger:L={},stagger:X=0,direction:y="forward",once:U=false,debug:Ge=false,axis:E="y",scrollContainer:ce,autoReverse:Z=false,delay:pe=0,strokeColor:H,strokeWidth:R,fillOpacity:V,waypoints:ee,velocityScale:te=false,threshold:ze=0,rootMargin:qe="0px",repeat:j=0,repeatDelay:ke=0,morphTo:P,clip:me,native:Be=true,onProgress:de,onStart:ye,onComplete:J}=r,W=me===true?"left":typeof me=="string"?me:false,re=typeof p=="function"?p:ve[p]??ve.linear,Te=we(L.start??"top bottom"),Ae=we(L.end??"bottom top"),b=typeof ce=="string"?document.querySelector(ce):ce??null,I=Array.isArray(H)?H[0]:null,$=Array.isArray(H)?H[1]:typeof H=="string"?H:null,x=Array.isArray(R)?R[0]:null,S=Array.isArray(R)?R[1]:typeof R=="number"?R:null,k=Array.isArray(V)?V[0]:null,T=Array.isArray(V)?V[1]:typeof V=="number"?V:null;function _(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 v=W?[]:Array.from(e.querySelectorAll(o)),g=[],C=[],O=0,F=0,D=false,G=false,N=0,ne=false,A=-1,se=-1,z=false,oe=0,K=0,ie,ge=null,ae=new Set,le=-1,Me=performance.now();function Q(){return b?E==="x"?b.scrollLeft:b.scrollTop:E==="x"?window.scrollX:window.scrollY}function Le(){return b?E==="x"?b.clientWidth:b.clientHeight:E==="x"?window.innerWidth:window.innerHeight}function De(){let t=e.getBoundingClientRect(),s,a,m;if(b){let w=b.getBoundingClientRect();s=E==="x"?t.left-w.left+b.scrollLeft:t.top-w.top+b.scrollTop,a=E==="x"?t.width:t.height,m=Q();}else s=E==="x"?t.left:t.top,a=E==="x"?t.width:t.height,m=Q();let q=$e({top:s,height:a},m,Le(),Te,Ae);O=q.tStart,F=q.tEnd,Ge&&process.env.NODE_ENV!=="production"&&(ge?.remove(),ge=Ye(O,F,E));}function _e(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),W){let a=s==="reverse"?1-t:t;e.style.clipPath=_(a);return}v.forEach((a,m)=>{a.style.strokeDashoffset=s==="reverse"?`${g[m]*t}`:`${g[m]*(1-t)}`,d&&(a.style.opacity=s==="reverse"?`${1-t}`:`${t}`),I&&$?a.style.stroke=xe(I,$,t):$&&(a.style.stroke=$),x!==null&&S!==null?a.style.strokeWidth=`${x+(S-x)*t}`:S!==null&&(a.style.strokeWidth=`${S}`),k!==null&&T!==null?a.style.fillOpacity=`${k+(T-k)*t}`:T!==null&&(a.style.fillOpacity=`${T}`),P&&a.tagName.toLowerCase()==="path"&&C[m]&&a.setAttribute("d",Re(C[m],P,t));});}function Pe(){if(e.style.setProperty("--scroll-draw-progress","0"),W){e.style.clipPath=_(0);return}v.forEach((t,s)=>{t.style.strokeDasharray=`${g[s]}`,t.style.strokeDashoffset=y==="reverse"?"0":`${g[s]}`,d?t.style.opacity=y==="reverse"?"1":"0":t.style.opacity="",I&&(t.style.stroke=I),x!==null&&(t.style.strokeWidth=`${x}`),k!==null&&(t.style.fillOpacity=`${k}`),P&&t.tagName.toLowerCase()==="path"&&C[s]&&t.setAttribute("d",C[s]);});}if(v.forEach(t=>{Qe(t);let s=Ee(t);g.push(s),t.tagName.toLowerCase()==="path"?C.push(t.getAttribute("d")??""):C.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=y==="reverse"?`${s}`:"0",d&&(t.style.opacity="1"),$&&(t.style.stroke=$),S!==null&&(t.style.strokeWidth=`${S}`),T!==null&&(t.style.fillOpacity=`${T}`),P&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",P)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=y==="reverse"?"0":`${s}`,d?t.style.opacity=y==="reverse"?"1":"0":t.style.opacity="",I&&(t.style.stroke=I),x!==null&&(t.style.strokeWidth=`${x}`),k!==null&&(t.style.fillOpacity=`${k}`));}),W){if(n)return e.style.clipPath=_(1),J?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=_(0);}else if(n)return J?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function Xe(){return !(Be===false||!Ke()||!v.length||typeof p!="string"||!(p in He)||W||E!=="y"||b||f!==1||X!==0||U||Z||te!==false||P||ee||j||pe>0||de||ye||J||H!=null||R!=null||V!=null||(L.start??"top bottom").trim()!=="top bottom"||(L.end??"bottom top").trim()!=="bottom top")}function Ue(){let t=`svg-scroll-draw-${++Je}`,s=y==="reverse"?"0":"var(--ssd-len)",a=y==="reverse"?"var(--ssd-len)":"0",m=`stroke-dashoffset:${s};`,q=`stroke-dashoffset:${a};`;d&&(m+=`opacity:${y==="reverse"?1:0};`,q+=`opacity:${y==="reverse"?0:1};`);let w=document.createElement("style");w.setAttribute("data-svg-scroll-draw",""),w.textContent=`@keyframes ${t}{from{${m}}to{${q}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${He[p]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(w);function i(u,M){u.style.setProperty("--ssd-len",String(g[M])),u.style.strokeDasharray=`${g[M]}`,u.style.strokeDashoffset="",u.style.opacity="",u.style.animationPlayState="",u.classList.add(t);}v.forEach(i);let l=false,h=-1;function c(){if(h>=0)return h;let u=e.getBoundingClientRect(),{tStart:M,tEnd:Y}=$e({top:u.top,height:u.height},Q(),Le(),Te,Ae);return re(B(Q(),M,Y,f))}return {destroy(){v.forEach(u=>{u.classList.remove(t),u.style.removeProperty("--ssd-len"),u.style.animationPlayState="";}),w.remove();},replay(){l=false,h=-1,v.forEach(i);},pause(){l=true,v.forEach(u=>{u.style.animationPlayState="paused";});},resume(){l&&(l=false,v.forEach(u=>{u.style.animationPlayState="running";}));},seek(u){let M=Math.min(1,Math.max(0,u));h=M,l=true,v.forEach((Y,Ie)=>{Y.classList.remove(t),Y.style.strokeDashoffset=y==="reverse"?`${g[Ie]*M}`:`${g[Ie]*(1-M)}`,d&&(Y.style.opacity=y==="reverse"?`${1-M}`:`${M}`);});},getProgress(){return c()}}}if(Xe())return Ue();De();function ue(){if(!ne||z)return;let t=performance.now(),s=Q(),a=f;if(te!==false){let i=t-Me,l=i>0?Math.abs(s-(le<0?s:le))/i:0;a=f*Math.max(.2,1+l*(typeof te=="number"?te:1)*.04);}le=s,Me=t;let m=Z?se===-1||s>=se?"forward":"reverse":y;se=s;let q=F-O,w=true;if(W){let i=re(B(s,O,F,a));U&&!Z&&(A=Math.max(A,i),i=A),oe=i,e.style.setProperty("--scroll-draw-progress",String(i));let l=m==="reverse"?1-i:i;e.style.clipPath=_(l),de?.(i),!G&&B(s,O,F,a)>0&&(G=true,ye?.()),i>=1&&!D?(D=true,J?.(),K<(j==="infinite"?1/0:j??0)&&(K++,ie=setTimeout(()=>{A=-1,G=false,D=false,e.style.clipPath=_(0);},ke))):i<1&&!U&&(D=false),N=requestAnimationFrame(ue);return}if(v.forEach((i,l)=>{let h=l*X*q,c=re(B(s,O+h,F+h,a));U&&!Z&&(A=Math.max(A,c),c=A),oe=c,i.style.strokeDashoffset=m==="reverse"?`${g[l]*c}`:`${g[l]*(1-c)}`,d&&(i.style.opacity=m==="reverse"?`${1-c}`:`${c}`),I&&$?i.style.stroke=xe(I,$,c):$&&(i.style.stroke=$),x!==null&&S!==null?i.style.strokeWidth=`${x+(S-x)*c}`:S!==null&&(i.style.strokeWidth=`${S}`),k!==null&&T!==null?i.style.fillOpacity=`${k+(T-k)*c}`:T!==null&&(i.style.fillOpacity=`${T}`),P&&i.tagName.toLowerCase()==="path"&&C[l]&&i.setAttribute("d",Re(C[l],P,c)),l===0&&(de?.(c),e.style.setProperty("--scroll-draw-progress",String(c))),c<1&&(w=false);}),ee){let i=re(B(s,O,F,a));for(let l in ee){let h=parseFloat(l);i>=h&&!ae.has(h)&&(ae.add(h),ee[l]?.());}}!G&&B(s,O,F,a)>0&&(G=true,ye?.()),w&&!D?(D=true,J?.(),K<(j==="infinite"?1/0:j??0)&&(K++,ie=setTimeout(()=>{A=-1,G=false,D=false,ae.clear(),Pe();},ke))):!w&&!U&&(D=false),N=requestAnimationFrame(ue);}let he=new IntersectionObserver(t=>{t.forEach(s=>{ne=s.isIntersecting,ne&&!z?N=requestAnimationFrame(ue):cancelAnimationFrame(N);});},{root:b??null,threshold:ze,rootMargin:qe}),be;function fe(){clearTimeout(be),be=setTimeout(()=>{v.forEach((t,s)=>{g[s]=Ee(t),t.style.strokeDasharray=`${g[s]}`;}),De();},150);}return window.addEventListener("resize",fe),window.addEventListener("orientationchange",fe),pe>0?setTimeout(()=>he.observe(e),pe):he.observe(e),{destroy(){cancelAnimationFrame(N),clearTimeout(ie),he.disconnect(),window.removeEventListener("resize",fe),window.removeEventListener("orientationchange",fe),clearTimeout(be),ge?.remove();},replay(){A=-1,se=-1,le=-1,G=false,D=false,K=0,z=false,ae.clear(),clearTimeout(ie),Pe();},pause(){z=true,cancelAnimationFrame(N);},resume(){z&&(z=false,ne&&(N=requestAnimationFrame(ue)));},seek(t){let s=Math.min(1,Math.max(0,t));oe=s,A=s,z=true,cancelAnimationFrame(N),_e(s,y);},getProgress(){return oe}}}function st(e={}){let r,n;return onMount(()=>{r&&(n=Se(r,e));}),onCleanup(()=>{n?.destroy();}),o=>{r=o;}}function ot(e={}){let r,n;return onMount(()=>{r&&(n=Se(r,e));}),onCleanup(()=>{n?.destroy(),n=void 0;}),{ref:o=>{r=o;},getInstance:()=>n}}export{ot as createScrollDraw,st as useScrollDraw};
+import {onMount,onCleanup}from'solid-js';function Ze({bounces:e=3,decay:r=.5}={}){let n=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,r)),d=Math.sqrt(o),m=0,b=[];for(let u=0;u<n;u++){let h=Math.pow(d,u);b.push(h),m+=h;}let $=[0],R=0;for(let u=0;u<n;u++)R+=b[u]/m,$.push(R);return u=>{if(u<=0)return 0;if(u>=1)return 1;for(let h=0;h<n;h++)if(u<=$[h+1]){let se=(u-$[h])/($[h+1]-$[h]);if(h===0)return se*(2-se);let D=1-Math.pow(o,h);return D+(1-D)*(2*se-1)*(2*se-1)}return 1}}function et({amplitude:e=1,period:r=.4}={}){let n=Math.max(1,e),o=Math.max(.1,r),d=n<=1?o/4:o/(2*Math.PI)*Math.asin(1/n);return m=>m<=0?0:m>=1?1:n*Math.pow(2,-10*m)*Math.sin((m-d)*(2*Math.PI)/o)+1}var Ae={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),bounce:Ze(),elastic:et()};function ke(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 We(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 ze(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 we(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 tt(e,r,n){return Math.min(n,Math.max(r,e))}function ne(e,r,n,o){return n===r?0:tt((e-r)/(n-r)*o,0,1)}function Le(e,r,n,o,d){let m=We(e.top,e.height,r,o.element)-ze(o.viewport,n),b=We(e.top,e.height,r,d.element)-ze(d.viewport,n);return {tStart:m,tEnd:b}}function qe(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 ve(e,r,n){let o=qe(e),d=qe(r);return !o||!d?e:`rgb(${Math.round(o[0]+(d[0]-o[0])*n)},${Math.round(o[1]+(d[1]-o[1])*n)},${Math.round(o[2]+(d[2]-o[2])*n)})`}function Ve(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}var Ge={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},rt=0;function nt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function st(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?Ve("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&Ve("Element has a fill \u2014 it may obscure the stroke animation.",e);}function ot(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 d(){let m=n==="x"?window.scrollX:window.scrollY,b=e-m,$=r-m,R=n==="x";o.innerHTML=`
+      <div style="position:absolute;${R?`left:${b}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${b}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;${R?`left:${$}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${$}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",d,{passive:true}),d(),o}function De(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),d=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,m=>{let b=parseFloat(m),$=o[d++]??b;return String(+(b+($-b)*n).toFixed(4))})}function Pe(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:d=1,fade:m=false,easing:b="linear",trigger:$={},stagger:R=0,direction:u="forward",once:h=false,debug:se=false,axis:D="y",scrollContainer:Ee,autoReverse:fe=false,delay:ae=0,strokeColor:j,strokeWidth:J,fillOpacity:K,waypoints:Q,velocityScale:ce=false,threshold:Ie=0,rootMargin:Fe="0px",repeat:Y=0,repeatDelay:$e=0,morphTo:H,clip:xe,autoplay:Xe=false,duration:Ue=1e3,native:je=true,onProgress:le,onStart:me,onComplete:oe}=r,G=xe===true?"left":typeof xe=="string"?xe:false,Z=typeof b=="function"?b:Ae[b]??Ae.linear,Ce=ke($.start??"top bottom"),Oe=ke($.end??"bottom top"),P=typeof Ee=="string"?document.querySelector(Ee):Ee??null,N=Array.isArray(j)?j[0]:null,S=Array.isArray(j)?j[1]:typeof j=="string"?j:null,I=Array.isArray(J)?J[0]:null,T=Array.isArray(J)?J[1]:typeof J=="number"?J:null,F=Array.isArray(K)?K[0]:null,A=Array.isArray(K)?K[1]:typeof K=="number"?K:null;function ee(t){let s=t*100;switch(G){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 x=G?[]:Array.from(e.querySelectorAll(o)),v=[],W=[],B=0,_=0,M=false,O=false,E=0,pe=false,z=-1,de=-1,k=false,te=0,V=0,X,Me=null,U=new Set,ye=-1,Re=performance.now();function ue(){return P?D==="x"?P.scrollLeft:P.scrollTop:D==="x"?window.scrollX:window.scrollY}function He(){return P?D==="x"?P.clientWidth:P.clientHeight:D==="x"?window.innerWidth:window.innerHeight}function Ne(){let t=e.getBoundingClientRect(),s,l,g;if(P){let L=P.getBoundingClientRect();s=D==="x"?t.left-L.left+P.scrollLeft:t.top-L.top+P.scrollTop,l=D==="x"?t.width:t.height,g=ue();}else s=D==="x"?t.left:t.top,l=D==="x"?t.width:t.height,g=ue();let C=Le({top:s,height:l},g,He(),Ce,Oe);B=C.tStart,_=C.tEnd,se&&process.env.NODE_ENV!=="production"&&(Me?.remove(),Me=ot(B,_,D));}function Je(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),G){let l=s==="reverse"?1-t:t;e.style.clipPath=ee(l);return}x.forEach((l,g)=>{l.style.strokeDashoffset=s==="reverse"?`${v[g]*t}`:`${v[g]*(1-t)}`,m&&(l.style.opacity=s==="reverse"?`${1-t}`:`${t}`),N&&S?l.style.stroke=ve(N,S,t):S&&(l.style.stroke=S),I!==null&&T!==null?l.style.strokeWidth=`${I+(T-I)*t}`:T!==null&&(l.style.strokeWidth=`${T}`),F!==null&&A!==null?l.style.fillOpacity=`${F+(A-F)*t}`:A!==null&&(l.style.fillOpacity=`${A}`),H&&l.tagName.toLowerCase()==="path"&&W[g]&&l.setAttribute("d",De(W[g],H,t));});}function he(){if(e.style.setProperty("--scroll-draw-progress","0"),G){e.style.clipPath=ee(0);return}x.forEach((t,s)=>{t.style.strokeDasharray=`${v[s]}`,t.style.strokeDashoffset=u==="reverse"?"0":`${v[s]}`,m?t.style.opacity=u==="reverse"?"1":"0":t.style.opacity="",N&&(t.style.stroke=N),I!==null&&(t.style.strokeWidth=`${I}`),F!==null&&(t.style.fillOpacity=`${F}`),H&&t.tagName.toLowerCase()==="path"&&W[s]&&t.setAttribute("d",W[s]);});}if(x.forEach(t=>{st(t);let s=we(t);v.push(s),t.tagName.toLowerCase()==="path"?W.push(t.getAttribute("d")??""):W.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=u==="reverse"?`${s}`:"0",m&&(t.style.opacity="1"),S&&(t.style.stroke=S),T!==null&&(t.style.strokeWidth=`${T}`),A!==null&&(t.style.fillOpacity=`${A}`),H&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",H)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=u==="reverse"?"0":`${s}`,m?t.style.opacity=u==="reverse"?"1":"0":t.style.opacity="",N&&(t.style.stroke=N),I!==null&&(t.style.strokeWidth=`${I}`),F!==null&&(t.style.fillOpacity=`${F}`));}),G){if(n)return e.style.clipPath=ee(1),oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=ee(0);}else if(n)return oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function Ke(){return !(je===false||!nt()||!x.length||typeof b!="string"||!(b in Ge)||G||D!=="y"||P||d!==1||R!==0||h||fe||ce!==false||H||Q||Y||ae>0||le||me||oe||j!=null||J!=null||K!=null||($.start??"top bottom").trim()!=="top bottom"||($.end??"bottom top").trim()!=="bottom top")}function Qe(){let t=`svg-scroll-draw-${++rt}`,s=u==="reverse"?"0":"var(--ssd-len)",l=u==="reverse"?"var(--ssd-len)":"0",g=`stroke-dashoffset:${s};`,C=`stroke-dashoffset:${l};`;m&&(g+=`opacity:${u==="reverse"?1:0};`,C+=`opacity:${u==="reverse"?0:1};`);let L=document.createElement("style");L.setAttribute("data-svg-scroll-draw",""),L.textContent=`@keyframes ${t}{from{${g}}to{${C}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Ge[b]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(L);function a(i,c){i.style.setProperty("--ssd-len",String(v[c])),i.style.strokeDasharray=`${v[c]}`,i.style.strokeDashoffset="",i.style.opacity="",i.style.animationPlayState="",i.classList.add(t);}x.forEach(a);let p=false,w=-1;function f(){if(w>=0)return w;let i=e.getBoundingClientRect(),{tStart:c,tEnd:y}=Le({top:i.top,height:i.height},ue(),He(),Ce,Oe);return Z(ne(ue(),c,y,d))}return {destroy(){x.forEach(i=>{i.classList.remove(t),i.style.removeProperty("--ssd-len"),i.style.animationPlayState="";}),L.remove();},replay(){p=false,w=-1,x.forEach(a);},pause(){p=true,x.forEach(i=>{i.style.animationPlayState="paused";});},resume(){p&&(p=false,x.forEach(i=>{i.style.animationPlayState="running";}));},seek(i){let c=Math.min(1,Math.max(0,i));w=c,p=true,x.forEach((y,re)=>{y.classList.remove(t),y.style.strokeDashoffset=u==="reverse"?`${v[re]*c}`:`${v[re]*(1-c)}`,m&&(y.style.opacity=u==="reverse"?`${1-c}`:`${c}`);});},getProgress(){return f()}}}if(Ke())return Qe();function Ye(){let t=Math.max(1,Ue),s=0,l=0;function g(f){let i=true;if(G){let c=Math.min(1,Math.max(0,f/t)),y=Z(c);te=y,e.style.setProperty("--scroll-draw-progress",String(y)),e.style.clipPath=ee(u==="reverse"?1-y:y),le?.(y),c<1&&(i=false);}else x.forEach((c,y)=>{let re=y*R*t,ie=Math.min(1,Math.max(0,(f-re)/t)),q=Z(ie);c.style.strokeDashoffset=u==="reverse"?`${v[y]*q}`:`${v[y]*(1-q)}`,m&&(c.style.opacity=u==="reverse"?`${1-q}`:`${q}`),N&&S?c.style.stroke=ve(N,S,q):S&&(c.style.stroke=S),I!==null&&T!==null?c.style.strokeWidth=`${I+(T-I)*q}`:T!==null&&(c.style.strokeWidth=`${T}`),F!==null&&A!==null?c.style.fillOpacity=`${F+(A-F)*q}`:A!==null&&(c.style.fillOpacity=`${A}`),H&&c.tagName.toLowerCase()==="path"&&W[y]&&c.setAttribute("d",De(W[y],H,q)),y===0&&(le?.(q),e.style.setProperty("--scroll-draw-progress",String(q))),ie<1&&(i=false);});if(Q){let c=Math.min(1,Math.max(0,f/t)),y=Z(c);for(let re in Q){let ie=parseFloat(re);y>=ie&&!U.has(ie)&&(U.add(ie),Q[re]?.());}}return i}function C(f){if(k)return;let i=f-s;O||(O=true,me?.());let c=g(i);if(c&&!M){M=true,g(t*(1+Math.max(0,x.length-1)*R)),oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{s=performance.now(),O=false,M=false,U.clear(),he(),E=requestAnimationFrame(C);},$e));return}c||(E=requestAnimationFrame(C));}function L(){cancelAnimationFrame(E),clearTimeout(X),s=performance.now(),l=0,k=false,O=false,M=false,V=0,U.clear(),he(),E=requestAnimationFrame(C);}let a=new IntersectionObserver(f=>{f.forEach(i=>{i.isIntersecting&&!(h&&M)?L():!i.isIntersecting&&!h&&!M&&(cancelAnimationFrame(E),clearTimeout(X),s=null);});},{root:P??null,threshold:Ie,rootMargin:Fe}),p;function w(){clearTimeout(p),p=setTimeout(()=>{x.forEach((f,i)=>{v[i]=we(f),f.style.strokeDasharray=`${v[i]}`;});},150);}return window.addEventListener("resize",w),window.addEventListener("orientationchange",w),ae>0?setTimeout(()=>a.observe(e),ae):a.observe(e),{destroy(){cancelAnimationFrame(E),clearTimeout(X),a.disconnect(),window.removeEventListener("resize",w),window.removeEventListener("orientationchange",w),clearTimeout(p);},replay(){V=0,L();},pause(){k||(k=true,l=performance.now()-s,cancelAnimationFrame(E));},resume(){k&&(k=false,s=performance.now()-l,E=requestAnimationFrame(C));},seek(f){let i=Math.min(1,Math.max(0,f));te=i,k=true,l=i*t,s=performance.now()-l,cancelAnimationFrame(E),g(l);},getProgress(){return te}}}if(Xe)return Ye();Ne();function ge(){if(!pe||k)return;let t=performance.now(),s=ue(),l=d;if(ce!==false){let a=t-Re,p=a>0?Math.abs(s-(ye<0?s:ye))/a:0;l=d*Math.max(.2,1+p*(typeof ce=="number"?ce:1)*.04);}ye=s,Re=t;let g=fe?de===-1||s>=de?"forward":"reverse":u;de=s;let C=_-B,L=true;if(G){let a=Z(ne(s,B,_,l));h&&!fe&&(z=Math.max(z,a),a=z),te=a,e.style.setProperty("--scroll-draw-progress",String(a));let p=g==="reverse"?1-a:a;e.style.clipPath=ee(p),le?.(a),!O&&ne(s,B,_,l)>0&&(O=true,me?.()),a>=1&&!M?(M=true,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{z=-1,O=false,M=false,e.style.clipPath=ee(0);},$e))):a<1&&!h&&(M=false),E=requestAnimationFrame(ge);return}if(x.forEach((a,p)=>{let w=p*R*C,f=Z(ne(s,B+w,_+w,l));h&&!fe&&(z=Math.max(z,f),f=z),te=f,a.style.strokeDashoffset=g==="reverse"?`${v[p]*f}`:`${v[p]*(1-f)}`,m&&(a.style.opacity=g==="reverse"?`${1-f}`:`${f}`),N&&S?a.style.stroke=ve(N,S,f):S&&(a.style.stroke=S),I!==null&&T!==null?a.style.strokeWidth=`${I+(T-I)*f}`:T!==null&&(a.style.strokeWidth=`${T}`),F!==null&&A!==null?a.style.fillOpacity=`${F+(A-F)*f}`:A!==null&&(a.style.fillOpacity=`${A}`),H&&a.tagName.toLowerCase()==="path"&&W[p]&&a.setAttribute("d",De(W[p],H,f)),p===0&&(le?.(f),e.style.setProperty("--scroll-draw-progress",String(f))),f<1&&(L=false);}),Q){let a=Z(ne(s,B,_,l));for(let p in Q){let w=parseFloat(p);a>=w&&!U.has(w)&&(U.add(w),Q[p]?.());}}!O&&ne(s,B,_,l)>0&&(O=true,me?.()),L&&!M?(M=true,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{z=-1,O=false,M=false,U.clear(),he();},$e))):!L&&!h&&(M=false),E=requestAnimationFrame(ge);}let Se=new IntersectionObserver(t=>{t.forEach(s=>{pe=s.isIntersecting,pe&&!k?E=requestAnimationFrame(ge):cancelAnimationFrame(E);});},{root:P??null,threshold:Ie,rootMargin:Fe}),Te;function be(){clearTimeout(Te),Te=setTimeout(()=>{x.forEach((t,s)=>{v[s]=we(t),t.style.strokeDasharray=`${v[s]}`;}),Ne();},150);}return window.addEventListener("resize",be),window.addEventListener("orientationchange",be),ae>0?setTimeout(()=>Se.observe(e),ae):Se.observe(e),{destroy(){cancelAnimationFrame(E),clearTimeout(X),Se.disconnect(),window.removeEventListener("resize",be),window.removeEventListener("orientationchange",be),clearTimeout(Te),Me?.remove();},replay(){z=-1,de=-1,ye=-1,O=false,M=false,V=0,k=false,U.clear(),clearTimeout(X),he();},pause(){k=true,cancelAnimationFrame(E);},resume(){k&&(k=false,pe&&(E=requestAnimationFrame(ge)));},seek(t){let s=Math.min(1,Math.max(0,t));te=s,z=s,k=true,cancelAnimationFrame(E),Je(s,u);},getProgress(){return te}}}function ct(e={}){let r,n;return onMount(()=>{r&&(n=Pe(r,e));}),onCleanup(()=>{n?.destroy();}),o=>{r=o;}}function mt(e={}){let r,n;return onMount(()=>{r&&(n=Pe(r,e));}),onCleanup(()=>{n?.destroy(),n=void 0;}),{ref:o=>{r=o;},getInstance:()=>n}}export{mt as createScrollDraw,ct as useScrollDraw};

package/dist/svelte/index.cjs

@@ -1,3 +1,3 @@
-'use strict';var we={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 $e(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 Ce(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 Oe(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 Ee(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 Xe(e,r,n){return Math.min(n,Math.max(r,e))}function B(e,r,n,o){return n===r?0:Xe((e-r)/(n-r)*o,0,1)}function xe(e,r,n,o,f){let d=Ce(e.top,e.height,r,o.element)-Oe(o.viewport,n),p=Ce(e.top,e.height,r,f.element)-Oe(f.viewport,n);return {tStart:d,tEnd:p}}function Fe(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 Se(e,r,n){let o=Fe(e),f=Fe(r);return !o||!f?e:`rgb(${Math.round(o[0]+(f[0]-o[0])*n)},${Math.round(o[1]+(f[1]-o[1])*n)},${Math.round(o[2]+(f[2]-o[2])*n)})`}function Ne(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}var Re={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},Ue=0;function je(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function Je(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?Ne("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&Ne("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Ke(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 f(){let d=n==="x"?window.scrollX:window.scrollY,p=e-d,D=r-d,X=n==="x";o.innerHTML=`
-      <div style="position:absolute;${X?`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;${X?`left:${D}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${D}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",f,{passive:true}),f(),o}function He(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),f=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,d=>{let p=parseFloat(d),D=o[f++]??p;return String(+(p+(D-p)*n).toFixed(4))})}function ce(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:f=1,fade:d=false,easing:p="linear",trigger:D={},stagger:X=0,direction:y="forward",once:U=false,debug:Ve=false,axis:$="y",scrollContainer:pe,autoReverse:Z=false,delay:me=0,strokeColor:R,strokeWidth:H,fillOpacity:V,waypoints:ee,velocityScale:te=false,threshold:We=0,rootMargin:Ge="0px",repeat:j=0,repeatDelay:ke=0,morphTo:P,clip:de,native:ze=true,onProgress:ye,onStart:ge,onComplete:J}=r,W=de===true?"left":typeof de=="string"?de:false,re=typeof p=="function"?p:we[p]??we.linear,Te=$e(D.start??"top bottom"),Ae=$e(D.end??"bottom top"),b=typeof pe=="string"?document.querySelector(pe):pe??null,I=Array.isArray(R)?R[0]:null,E=Array.isArray(R)?R[1]:typeof R=="string"?R:null,x=Array.isArray(H)?H[0]:null,S=Array.isArray(H)?H[1]:typeof H=="number"?H:null,k=Array.isArray(V)?V[0]:null,T=Array.isArray(V)?V[1]:typeof V=="number"?V:null;function _(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 v=W?[]:Array.from(e.querySelectorAll(o)),g=[],C=[],O=0,F=0,L=false,G=false,N=0,ne=false,A=-1,se=-1,z=false,oe=0,K=0,ie,he=null,ae=new Set,le=-1,Me=performance.now();function Q(){return b?$==="x"?b.scrollLeft:b.scrollTop:$==="x"?window.scrollX:window.scrollY}function De(){return b?$==="x"?b.clientWidth:b.clientHeight:$==="x"?window.innerWidth:window.innerHeight}function Le(){let t=e.getBoundingClientRect(),s,a,m;if(b){let w=b.getBoundingClientRect();s=$==="x"?t.left-w.left+b.scrollLeft:t.top-w.top+b.scrollTop,a=$==="x"?t.width:t.height,m=Q();}else s=$==="x"?t.left:t.top,a=$==="x"?t.width:t.height,m=Q();let q=xe({top:s,height:a},m,De(),Te,Ae);O=q.tStart,F=q.tEnd,Ve&&process.env.NODE_ENV!=="production"&&(he?.remove(),he=Ke(O,F,$));}function qe(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),W){let a=s==="reverse"?1-t:t;e.style.clipPath=_(a);return}v.forEach((a,m)=>{a.style.strokeDashoffset=s==="reverse"?`${g[m]*t}`:`${g[m]*(1-t)}`,d&&(a.style.opacity=s==="reverse"?`${1-t}`:`${t}`),I&&E?a.style.stroke=Se(I,E,t):E&&(a.style.stroke=E),x!==null&&S!==null?a.style.strokeWidth=`${x+(S-x)*t}`:S!==null&&(a.style.strokeWidth=`${S}`),k!==null&&T!==null?a.style.fillOpacity=`${k+(T-k)*t}`:T!==null&&(a.style.fillOpacity=`${T}`),P&&a.tagName.toLowerCase()==="path"&&C[m]&&a.setAttribute("d",He(C[m],P,t));});}function Pe(){if(e.style.setProperty("--scroll-draw-progress","0"),W){e.style.clipPath=_(0);return}v.forEach((t,s)=>{t.style.strokeDasharray=`${g[s]}`,t.style.strokeDashoffset=y==="reverse"?"0":`${g[s]}`,d?t.style.opacity=y==="reverse"?"1":"0":t.style.opacity="",I&&(t.style.stroke=I),x!==null&&(t.style.strokeWidth=`${x}`),k!==null&&(t.style.fillOpacity=`${k}`),P&&t.tagName.toLowerCase()==="path"&&C[s]&&t.setAttribute("d",C[s]);});}if(v.forEach(t=>{Je(t);let s=Ee(t);g.push(s),t.tagName.toLowerCase()==="path"?C.push(t.getAttribute("d")??""):C.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=y==="reverse"?`${s}`:"0",d&&(t.style.opacity="1"),E&&(t.style.stroke=E),S!==null&&(t.style.strokeWidth=`${S}`),T!==null&&(t.style.fillOpacity=`${T}`),P&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",P)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=y==="reverse"?"0":`${s}`,d?t.style.opacity=y==="reverse"?"1":"0":t.style.opacity="",I&&(t.style.stroke=I),x!==null&&(t.style.strokeWidth=`${x}`),k!==null&&(t.style.fillOpacity=`${k}`));}),W){if(n)return e.style.clipPath=_(1),J?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=_(0);}else if(n)return J?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function Be(){return !(ze===false||!je()||!v.length||typeof p!="string"||!(p in Re)||W||$!=="y"||b||f!==1||X!==0||U||Z||te!==false||P||ee||j||me>0||ye||ge||J||R!=null||H!=null||V!=null||(D.start??"top bottom").trim()!=="top bottom"||(D.end??"bottom top").trim()!=="bottom top")}function _e(){let t=`svg-scroll-draw-${++Ue}`,s=y==="reverse"?"0":"var(--ssd-len)",a=y==="reverse"?"var(--ssd-len)":"0",m=`stroke-dashoffset:${s};`,q=`stroke-dashoffset:${a};`;d&&(m+=`opacity:${y==="reverse"?1:0};`,q+=`opacity:${y==="reverse"?0:1};`);let w=document.createElement("style");w.setAttribute("data-svg-scroll-draw",""),w.textContent=`@keyframes ${t}{from{${m}}to{${q}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Re[p]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(w);function i(u,M){u.style.setProperty("--ssd-len",String(g[M])),u.style.strokeDasharray=`${g[M]}`,u.style.strokeDashoffset="",u.style.opacity="",u.style.animationPlayState="",u.classList.add(t);}v.forEach(i);let l=false,h=-1;function c(){if(h>=0)return h;let u=e.getBoundingClientRect(),{tStart:M,tEnd:Y}=xe({top:u.top,height:u.height},Q(),De(),Te,Ae);return re(B(Q(),M,Y,f))}return {destroy(){v.forEach(u=>{u.classList.remove(t),u.style.removeProperty("--ssd-len"),u.style.animationPlayState="";}),w.remove();},replay(){l=false,h=-1,v.forEach(i);},pause(){l=true,v.forEach(u=>{u.style.animationPlayState="paused";});},resume(){l&&(l=false,v.forEach(u=>{u.style.animationPlayState="running";}));},seek(u){let M=Math.min(1,Math.max(0,u));h=M,l=true,v.forEach((Y,Ie)=>{Y.classList.remove(t),Y.style.strokeDashoffset=y==="reverse"?`${g[Ie]*M}`:`${g[Ie]*(1-M)}`,d&&(Y.style.opacity=y==="reverse"?`${1-M}`:`${M}`);});},getProgress(){return c()}}}if(Be())return _e();Le();function ue(){if(!ne||z)return;let t=performance.now(),s=Q(),a=f;if(te!==false){let i=t-Me,l=i>0?Math.abs(s-(le<0?s:le))/i:0;a=f*Math.max(.2,1+l*(typeof te=="number"?te:1)*.04);}le=s,Me=t;let m=Z?se===-1||s>=se?"forward":"reverse":y;se=s;let q=F-O,w=true;if(W){let i=re(B(s,O,F,a));U&&!Z&&(A=Math.max(A,i),i=A),oe=i,e.style.setProperty("--scroll-draw-progress",String(i));let l=m==="reverse"?1-i:i;e.style.clipPath=_(l),ye?.(i),!G&&B(s,O,F,a)>0&&(G=true,ge?.()),i>=1&&!L?(L=true,J?.(),K<(j==="infinite"?1/0:j??0)&&(K++,ie=setTimeout(()=>{A=-1,G=false,L=false,e.style.clipPath=_(0);},ke))):i<1&&!U&&(L=false),N=requestAnimationFrame(ue);return}if(v.forEach((i,l)=>{let h=l*X*q,c=re(B(s,O+h,F+h,a));U&&!Z&&(A=Math.max(A,c),c=A),oe=c,i.style.strokeDashoffset=m==="reverse"?`${g[l]*c}`:`${g[l]*(1-c)}`,d&&(i.style.opacity=m==="reverse"?`${1-c}`:`${c}`),I&&E?i.style.stroke=Se(I,E,c):E&&(i.style.stroke=E),x!==null&&S!==null?i.style.strokeWidth=`${x+(S-x)*c}`:S!==null&&(i.style.strokeWidth=`${S}`),k!==null&&T!==null?i.style.fillOpacity=`${k+(T-k)*c}`:T!==null&&(i.style.fillOpacity=`${T}`),P&&i.tagName.toLowerCase()==="path"&&C[l]&&i.setAttribute("d",He(C[l],P,c)),l===0&&(ye?.(c),e.style.setProperty("--scroll-draw-progress",String(c))),c<1&&(w=false);}),ee){let i=re(B(s,O,F,a));for(let l in ee){let h=parseFloat(l);i>=h&&!ae.has(h)&&(ae.add(h),ee[l]?.());}}!G&&B(s,O,F,a)>0&&(G=true,ge?.()),w&&!L?(L=true,J?.(),K<(j==="infinite"?1/0:j??0)&&(K++,ie=setTimeout(()=>{A=-1,G=false,L=false,ae.clear(),Pe();},ke))):!w&&!U&&(L=false),N=requestAnimationFrame(ue);}let be=new IntersectionObserver(t=>{t.forEach(s=>{ne=s.isIntersecting,ne&&!z?N=requestAnimationFrame(ue):cancelAnimationFrame(N);});},{root:b??null,threshold:We,rootMargin:Ge}),ve;function fe(){clearTimeout(ve),ve=setTimeout(()=>{v.forEach((t,s)=>{g[s]=Ee(t),t.style.strokeDasharray=`${g[s]}`;}),Le();},150);}return window.addEventListener("resize",fe),window.addEventListener("orientationchange",fe),me>0?setTimeout(()=>be.observe(e),me):be.observe(e),{destroy(){cancelAnimationFrame(N),clearTimeout(ie),be.disconnect(),window.removeEventListener("resize",fe),window.removeEventListener("orientationchange",fe),clearTimeout(ve),he?.remove();},replay(){A=-1,se=-1,le=-1,G=false,L=false,K=0,z=false,ae.clear(),clearTimeout(ie),Pe();},pause(){z=true,cancelAnimationFrame(N);},resume(){z&&(z=false,ne&&(N=requestAnimationFrame(ue)));},seek(t){let s=Math.min(1,Math.max(0,t));oe=s,A=s,z=true,cancelAnimationFrame(N),qe(s,y);},getProgress(){return oe}}}function tt(e,r={}){let n=ce(e,r);return {update(o){n.destroy(),n=ce(e,o);},destroy(){n.destroy();}}}function rt(e={}){let r=null;function n(o){return r=ce(o,e),{destroy(){r?.destroy(),r=null;}}}return {action:n,getInstance:()=>r}}exports.createScrollDraw=rt;exports.scrollDraw=tt;
+'use strict';function Qe({bounces:e=3,decay:r=.5}={}){let n=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,r)),d=Math.sqrt(o),m=0,b=[];for(let u=0;u<n;u++){let h=Math.pow(d,u);b.push(h),m+=h;}let $=[0],R=0;for(let u=0;u<n;u++)R+=b[u]/m,$.push(R);return u=>{if(u<=0)return 0;if(u>=1)return 1;for(let h=0;h<n;h++)if(u<=$[h+1]){let se=(u-$[h])/($[h+1]-$[h]);if(h===0)return se*(2-se);let D=1-Math.pow(o,h);return D+(1-D)*(2*se-1)*(2*se-1)}return 1}}function Ye({amplitude:e=1,period:r=.4}={}){let n=Math.max(1,e),o=Math.max(.1,r),d=n<=1?o/4:o/(2*Math.PI)*Math.asin(1/n);return m=>m<=0?0:m>=1?1:n*Math.pow(2,-10*m)*Math.sin((m-d)*(2*Math.PI)/o)+1}var ke={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),bounce:Qe(),elastic:Ye()};function Le(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 We(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 ze(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 we(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 Ze(e,r,n){return Math.min(n,Math.max(r,e))}function ne(e,r,n,o){return n===r?0:Ze((e-r)/(n-r)*o,0,1)}function De(e,r,n,o,d){let m=We(e.top,e.height,r,o.element)-ze(o.viewport,n),b=We(e.top,e.height,r,d.element)-ze(d.viewport,n);return {tStart:m,tEnd:b}}function qe(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 ve(e,r,n){let o=qe(e),d=qe(r);return !o||!d?e:`rgb(${Math.round(o[0]+(d[0]-o[0])*n)},${Math.round(o[1]+(d[1]-o[1])*n)},${Math.round(o[2]+(d[2]-o[2])*n)})`}function Ve(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}var Ge={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},et=0;function tt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function rt(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?Ve("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&Ve("Element has a fill \u2014 it may obscure the stroke animation.",e);}function nt(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 d(){let m=n==="x"?window.scrollX:window.scrollY,b=e-m,$=r-m,R=n==="x";o.innerHTML=`
+      <div style="position:absolute;${R?`left:${b}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${b}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;${R?`left:${$}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${$}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",d,{passive:true}),d(),o}function Pe(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),d=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,m=>{let b=parseFloat(m),$=o[d++]??b;return String(+(b+($-b)*n).toFixed(4))})}function Ee(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:d=1,fade:m=false,easing:b="linear",trigger:$={},stagger:R=0,direction:u="forward",once:h=false,debug:se=false,axis:D="y",scrollContainer:$e,autoReverse:ce=false,delay:ae=0,strokeColor:j,strokeWidth:J,fillOpacity:K,waypoints:Q,velocityScale:fe=false,threshold:Ie=0,rootMargin:Fe="0px",repeat:Y=0,repeatDelay:xe=0,morphTo:N,clip:Me,autoplay:Be=false,duration:_e=1e3,native:Xe=true,onProgress:le,onStart:me,onComplete:oe}=r,G=Me===true?"left":typeof Me=="string"?Me:false,Z=typeof b=="function"?b:ke[b]??ke.linear,Oe=Le($.start??"top bottom"),Ce=Le($.end??"bottom top"),P=typeof $e=="string"?document.querySelector($e):$e??null,H=Array.isArray(j)?j[0]:null,S=Array.isArray(j)?j[1]:typeof j=="string"?j:null,I=Array.isArray(J)?J[0]:null,T=Array.isArray(J)?J[1]:typeof J=="number"?J:null,F=Array.isArray(K)?K[0]:null,A=Array.isArray(K)?K[1]:typeof K=="number"?K:null;function ee(t){let s=t*100;switch(G){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 x=G?[]:Array.from(e.querySelectorAll(o)),v=[],W=[],B=0,_=0,M=false,C=false,E=0,pe=false,z=-1,de=-1,k=false,te=0,V=0,X,Se=null,U=new Set,ye=-1,Re=performance.now();function ue(){return P?D==="x"?P.scrollLeft:P.scrollTop:D==="x"?window.scrollX:window.scrollY}function Ne(){return P?D==="x"?P.clientWidth:P.clientHeight:D==="x"?window.innerWidth:window.innerHeight}function He(){let t=e.getBoundingClientRect(),s,l,g;if(P){let L=P.getBoundingClientRect();s=D==="x"?t.left-L.left+P.scrollLeft:t.top-L.top+P.scrollTop,l=D==="x"?t.width:t.height,g=ue();}else s=D==="x"?t.left:t.top,l=D==="x"?t.width:t.height,g=ue();let O=De({top:s,height:l},g,Ne(),Oe,Ce);B=O.tStart,_=O.tEnd,se&&process.env.NODE_ENV!=="production"&&(Se?.remove(),Se=nt(B,_,D));}function Ue(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),G){let l=s==="reverse"?1-t:t;e.style.clipPath=ee(l);return}x.forEach((l,g)=>{l.style.strokeDashoffset=s==="reverse"?`${v[g]*t}`:`${v[g]*(1-t)}`,m&&(l.style.opacity=s==="reverse"?`${1-t}`:`${t}`),H&&S?l.style.stroke=ve(H,S,t):S&&(l.style.stroke=S),I!==null&&T!==null?l.style.strokeWidth=`${I+(T-I)*t}`:T!==null&&(l.style.strokeWidth=`${T}`),F!==null&&A!==null?l.style.fillOpacity=`${F+(A-F)*t}`:A!==null&&(l.style.fillOpacity=`${A}`),N&&l.tagName.toLowerCase()==="path"&&W[g]&&l.setAttribute("d",Pe(W[g],N,t));});}function he(){if(e.style.setProperty("--scroll-draw-progress","0"),G){e.style.clipPath=ee(0);return}x.forEach((t,s)=>{t.style.strokeDasharray=`${v[s]}`,t.style.strokeDashoffset=u==="reverse"?"0":`${v[s]}`,m?t.style.opacity=u==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),I!==null&&(t.style.strokeWidth=`${I}`),F!==null&&(t.style.fillOpacity=`${F}`),N&&t.tagName.toLowerCase()==="path"&&W[s]&&t.setAttribute("d",W[s]);});}if(x.forEach(t=>{rt(t);let s=we(t);v.push(s),t.tagName.toLowerCase()==="path"?W.push(t.getAttribute("d")??""):W.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=u==="reverse"?`${s}`:"0",m&&(t.style.opacity="1"),S&&(t.style.stroke=S),T!==null&&(t.style.strokeWidth=`${T}`),A!==null&&(t.style.fillOpacity=`${A}`),N&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",N)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=u==="reverse"?"0":`${s}`,m?t.style.opacity=u==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),I!==null&&(t.style.strokeWidth=`${I}`),F!==null&&(t.style.fillOpacity=`${F}`));}),G){if(n)return e.style.clipPath=ee(1),oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=ee(0);}else if(n)return oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function je(){return !(Xe===false||!tt()||!x.length||typeof b!="string"||!(b in Ge)||G||D!=="y"||P||d!==1||R!==0||h||ce||fe!==false||N||Q||Y||ae>0||le||me||oe||j!=null||J!=null||K!=null||($.start??"top bottom").trim()!=="top bottom"||($.end??"bottom top").trim()!=="bottom top")}function Je(){let t=`svg-scroll-draw-${++et}`,s=u==="reverse"?"0":"var(--ssd-len)",l=u==="reverse"?"var(--ssd-len)":"0",g=`stroke-dashoffset:${s};`,O=`stroke-dashoffset:${l};`;m&&(g+=`opacity:${u==="reverse"?1:0};`,O+=`opacity:${u==="reverse"?0:1};`);let L=document.createElement("style");L.setAttribute("data-svg-scroll-draw",""),L.textContent=`@keyframes ${t}{from{${g}}to{${O}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Ge[b]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(L);function a(i,f){i.style.setProperty("--ssd-len",String(v[f])),i.style.strokeDasharray=`${v[f]}`,i.style.strokeDashoffset="",i.style.opacity="",i.style.animationPlayState="",i.classList.add(t);}x.forEach(a);let p=false,w=-1;function c(){if(w>=0)return w;let i=e.getBoundingClientRect(),{tStart:f,tEnd:y}=De({top:i.top,height:i.height},ue(),Ne(),Oe,Ce);return Z(ne(ue(),f,y,d))}return {destroy(){x.forEach(i=>{i.classList.remove(t),i.style.removeProperty("--ssd-len"),i.style.animationPlayState="";}),L.remove();},replay(){p=false,w=-1,x.forEach(a);},pause(){p=true,x.forEach(i=>{i.style.animationPlayState="paused";});},resume(){p&&(p=false,x.forEach(i=>{i.style.animationPlayState="running";}));},seek(i){let f=Math.min(1,Math.max(0,i));w=f,p=true,x.forEach((y,re)=>{y.classList.remove(t),y.style.strokeDashoffset=u==="reverse"?`${v[re]*f}`:`${v[re]*(1-f)}`,m&&(y.style.opacity=u==="reverse"?`${1-f}`:`${f}`);});},getProgress(){return c()}}}if(je())return Je();function Ke(){let t=Math.max(1,_e),s=0,l=0;function g(c){let i=true;if(G){let f=Math.min(1,Math.max(0,c/t)),y=Z(f);te=y,e.style.setProperty("--scroll-draw-progress",String(y)),e.style.clipPath=ee(u==="reverse"?1-y:y),le?.(y),f<1&&(i=false);}else x.forEach((f,y)=>{let re=y*R*t,ie=Math.min(1,Math.max(0,(c-re)/t)),q=Z(ie);f.style.strokeDashoffset=u==="reverse"?`${v[y]*q}`:`${v[y]*(1-q)}`,m&&(f.style.opacity=u==="reverse"?`${1-q}`:`${q}`),H&&S?f.style.stroke=ve(H,S,q):S&&(f.style.stroke=S),I!==null&&T!==null?f.style.strokeWidth=`${I+(T-I)*q}`:T!==null&&(f.style.strokeWidth=`${T}`),F!==null&&A!==null?f.style.fillOpacity=`${F+(A-F)*q}`:A!==null&&(f.style.fillOpacity=`${A}`),N&&f.tagName.toLowerCase()==="path"&&W[y]&&f.setAttribute("d",Pe(W[y],N,q)),y===0&&(le?.(q),e.style.setProperty("--scroll-draw-progress",String(q))),ie<1&&(i=false);});if(Q){let f=Math.min(1,Math.max(0,c/t)),y=Z(f);for(let re in Q){let ie=parseFloat(re);y>=ie&&!U.has(ie)&&(U.add(ie),Q[re]?.());}}return i}function O(c){if(k)return;let i=c-s;C||(C=true,me?.());let f=g(i);if(f&&!M){M=true,g(t*(1+Math.max(0,x.length-1)*R)),oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{s=performance.now(),C=false,M=false,U.clear(),he(),E=requestAnimationFrame(O);},xe));return}f||(E=requestAnimationFrame(O));}function L(){cancelAnimationFrame(E),clearTimeout(X),s=performance.now(),l=0,k=false,C=false,M=false,V=0,U.clear(),he(),E=requestAnimationFrame(O);}let a=new IntersectionObserver(c=>{c.forEach(i=>{i.isIntersecting&&!(h&&M)?L():!i.isIntersecting&&!h&&!M&&(cancelAnimationFrame(E),clearTimeout(X),s=null);});},{root:P??null,threshold:Ie,rootMargin:Fe}),p;function w(){clearTimeout(p),p=setTimeout(()=>{x.forEach((c,i)=>{v[i]=we(c),c.style.strokeDasharray=`${v[i]}`;});},150);}return window.addEventListener("resize",w),window.addEventListener("orientationchange",w),ae>0?setTimeout(()=>a.observe(e),ae):a.observe(e),{destroy(){cancelAnimationFrame(E),clearTimeout(X),a.disconnect(),window.removeEventListener("resize",w),window.removeEventListener("orientationchange",w),clearTimeout(p);},replay(){V=0,L();},pause(){k||(k=true,l=performance.now()-s,cancelAnimationFrame(E));},resume(){k&&(k=false,s=performance.now()-l,E=requestAnimationFrame(O));},seek(c){let i=Math.min(1,Math.max(0,c));te=i,k=true,l=i*t,s=performance.now()-l,cancelAnimationFrame(E),g(l);},getProgress(){return te}}}if(Be)return Ke();He();function ge(){if(!pe||k)return;let t=performance.now(),s=ue(),l=d;if(fe!==false){let a=t-Re,p=a>0?Math.abs(s-(ye<0?s:ye))/a:0;l=d*Math.max(.2,1+p*(typeof fe=="number"?fe:1)*.04);}ye=s,Re=t;let g=ce?de===-1||s>=de?"forward":"reverse":u;de=s;let O=_-B,L=true;if(G){let a=Z(ne(s,B,_,l));h&&!ce&&(z=Math.max(z,a),a=z),te=a,e.style.setProperty("--scroll-draw-progress",String(a));let p=g==="reverse"?1-a:a;e.style.clipPath=ee(p),le?.(a),!C&&ne(s,B,_,l)>0&&(C=true,me?.()),a>=1&&!M?(M=true,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{z=-1,C=false,M=false,e.style.clipPath=ee(0);},xe))):a<1&&!h&&(M=false),E=requestAnimationFrame(ge);return}if(x.forEach((a,p)=>{let w=p*R*O,c=Z(ne(s,B+w,_+w,l));h&&!ce&&(z=Math.max(z,c),c=z),te=c,a.style.strokeDashoffset=g==="reverse"?`${v[p]*c}`:`${v[p]*(1-c)}`,m&&(a.style.opacity=g==="reverse"?`${1-c}`:`${c}`),H&&S?a.style.stroke=ve(H,S,c):S&&(a.style.stroke=S),I!==null&&T!==null?a.style.strokeWidth=`${I+(T-I)*c}`:T!==null&&(a.style.strokeWidth=`${T}`),F!==null&&A!==null?a.style.fillOpacity=`${F+(A-F)*c}`:A!==null&&(a.style.fillOpacity=`${A}`),N&&a.tagName.toLowerCase()==="path"&&W[p]&&a.setAttribute("d",Pe(W[p],N,c)),p===0&&(le?.(c),e.style.setProperty("--scroll-draw-progress",String(c))),c<1&&(L=false);}),Q){let a=Z(ne(s,B,_,l));for(let p in Q){let w=parseFloat(p);a>=w&&!U.has(w)&&(U.add(w),Q[p]?.());}}!C&&ne(s,B,_,l)>0&&(C=true,me?.()),L&&!M?(M=true,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{z=-1,C=false,M=false,U.clear(),he();},xe))):!L&&!h&&(M=false),E=requestAnimationFrame(ge);}let Te=new IntersectionObserver(t=>{t.forEach(s=>{pe=s.isIntersecting,pe&&!k?E=requestAnimationFrame(ge):cancelAnimationFrame(E);});},{root:P??null,threshold:Ie,rootMargin:Fe}),Ae;function be(){clearTimeout(Ae),Ae=setTimeout(()=>{x.forEach((t,s)=>{v[s]=we(t),t.style.strokeDasharray=`${v[s]}`;}),He();},150);}return window.addEventListener("resize",be),window.addEventListener("orientationchange",be),ae>0?setTimeout(()=>Te.observe(e),ae):Te.observe(e),{destroy(){cancelAnimationFrame(E),clearTimeout(X),Te.disconnect(),window.removeEventListener("resize",be),window.removeEventListener("orientationchange",be),clearTimeout(Ae),Se?.remove();},replay(){z=-1,de=-1,ye=-1,C=false,M=false,V=0,k=false,U.clear(),clearTimeout(X),he();},pause(){k=true,cancelAnimationFrame(E);},resume(){k&&(k=false,pe&&(E=requestAnimationFrame(ge)));},seek(t){let s=Math.min(1,Math.max(0,t));te=s,z=s,k=true,cancelAnimationFrame(E),Ue(s,u);},getProgress(){return te}}}function lt(e,r={}){let n=Ee(e,r);return {update(o){n.destroy(),n=Ee(e,o);},destroy(){n.destroy();}}}function ut(e={}){let r=null;function n(o){return r=Ee(o,e),{destroy(){r?.destroy(),r=null;}}}return {action:n,getInstance:()=>r}}exports.createScrollDraw=ut;exports.scrollDraw=lt;

package/dist/svelte/index.d.mts

@@ -1,4 +1,4 @@
-type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
 interface TriggerConfig {
     start?: string;
     end?: string;
@@ -60,6 +60,25 @@ interface ScrollDrawOptions {
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
+    /**
+     * Trigger the animation when the element enters the viewport instead of
+     * tying it to scroll position. The draw runs over `duration` milliseconds,
+     * replaying each time the element re-enters the viewport (use `once: true`
+     * to play only the first time).
+     *
+     * All visual options work in autoplay mode — `easing`, `stagger`, `fade`,
+     * `strokeColor`, `strokeWidth`, `fillOpacity`, `clip`, `morphTo`, `waypoints`,
+     * `repeat`, `repeatDelay`, `onStart`, `onComplete`, `onProgress`, etc.
+     *
+     * The full instance API (`pause`, `resume`, `seek`, `replay`, `getProgress`)
+     * also works — `seek(0.5)` pauses at 50% of the duration.
+     */
+    autoplay?: boolean;
+    /**
+     * Duration of the autoplay animation in milliseconds. Only used when
+     * `autoplay: true`. Default `1000`.
+     */
+    duration?: number;
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and

package/dist/svelte/index.d.ts

@@ -1,4 +1,4 @@
-type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
 interface TriggerConfig {
     start?: string;
     end?: string;
@@ -60,6 +60,25 @@ interface ScrollDrawOptions {
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
+    /**
+     * Trigger the animation when the element enters the viewport instead of
+     * tying it to scroll position. The draw runs over `duration` milliseconds,
+     * replaying each time the element re-enters the viewport (use `once: true`
+     * to play only the first time).
+     *
+     * All visual options work in autoplay mode — `easing`, `stagger`, `fade`,
+     * `strokeColor`, `strokeWidth`, `fillOpacity`, `clip`, `morphTo`, `waypoints`,
+     * `repeat`, `repeatDelay`, `onStart`, `onComplete`, `onProgress`, etc.
+     *
+     * The full instance API (`pause`, `resume`, `seek`, `replay`, `getProgress`)
+     * also works — `seek(0.5)` pauses at 50% of the duration.
+     */
+    autoplay?: boolean;
+    /**
+     * Duration of the autoplay animation in milliseconds. Only used when
+     * `autoplay: true`. Default `1000`.
+     */
+    duration?: number;
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and

package/dist/svelte/index.mjs

@@ -1,3 +1,3 @@
-var we={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 $e(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 Ce(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 Oe(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 Ee(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 Xe(e,r,n){return Math.min(n,Math.max(r,e))}function B(e,r,n,o){return n===r?0:Xe((e-r)/(n-r)*o,0,1)}function xe(e,r,n,o,f){let d=Ce(e.top,e.height,r,o.element)-Oe(o.viewport,n),p=Ce(e.top,e.height,r,f.element)-Oe(f.viewport,n);return {tStart:d,tEnd:p}}function Fe(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 Se(e,r,n){let o=Fe(e),f=Fe(r);return !o||!f?e:`rgb(${Math.round(o[0]+(f[0]-o[0])*n)},${Math.round(o[1]+(f[1]-o[1])*n)},${Math.round(o[2]+(f[2]-o[2])*n)})`}function Ne(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}var Re={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},Ue=0;function je(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function Je(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?Ne("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&Ne("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Ke(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 f(){let d=n==="x"?window.scrollX:window.scrollY,p=e-d,D=r-d,X=n==="x";o.innerHTML=`
-      <div style="position:absolute;${X?`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;${X?`left:${D}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${D}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",f,{passive:true}),f(),o}function He(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),f=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,d=>{let p=parseFloat(d),D=o[f++]??p;return String(+(p+(D-p)*n).toFixed(4))})}function ce(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:f=1,fade:d=false,easing:p="linear",trigger:D={},stagger:X=0,direction:y="forward",once:U=false,debug:Ve=false,axis:$="y",scrollContainer:pe,autoReverse:Z=false,delay:me=0,strokeColor:R,strokeWidth:H,fillOpacity:V,waypoints:ee,velocityScale:te=false,threshold:We=0,rootMargin:Ge="0px",repeat:j=0,repeatDelay:ke=0,morphTo:P,clip:de,native:ze=true,onProgress:ye,onStart:ge,onComplete:J}=r,W=de===true?"left":typeof de=="string"?de:false,re=typeof p=="function"?p:we[p]??we.linear,Te=$e(D.start??"top bottom"),Ae=$e(D.end??"bottom top"),b=typeof pe=="string"?document.querySelector(pe):pe??null,I=Array.isArray(R)?R[0]:null,E=Array.isArray(R)?R[1]:typeof R=="string"?R:null,x=Array.isArray(H)?H[0]:null,S=Array.isArray(H)?H[1]:typeof H=="number"?H:null,k=Array.isArray(V)?V[0]:null,T=Array.isArray(V)?V[1]:typeof V=="number"?V:null;function _(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 v=W?[]:Array.from(e.querySelectorAll(o)),g=[],C=[],O=0,F=0,L=false,G=false,N=0,ne=false,A=-1,se=-1,z=false,oe=0,K=0,ie,he=null,ae=new Set,le=-1,Me=performance.now();function Q(){return b?$==="x"?b.scrollLeft:b.scrollTop:$==="x"?window.scrollX:window.scrollY}function De(){return b?$==="x"?b.clientWidth:b.clientHeight:$==="x"?window.innerWidth:window.innerHeight}function Le(){let t=e.getBoundingClientRect(),s,a,m;if(b){let w=b.getBoundingClientRect();s=$==="x"?t.left-w.left+b.scrollLeft:t.top-w.top+b.scrollTop,a=$==="x"?t.width:t.height,m=Q();}else s=$==="x"?t.left:t.top,a=$==="x"?t.width:t.height,m=Q();let q=xe({top:s,height:a},m,De(),Te,Ae);O=q.tStart,F=q.tEnd,Ve&&process.env.NODE_ENV!=="production"&&(he?.remove(),he=Ke(O,F,$));}function qe(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),W){let a=s==="reverse"?1-t:t;e.style.clipPath=_(a);return}v.forEach((a,m)=>{a.style.strokeDashoffset=s==="reverse"?`${g[m]*t}`:`${g[m]*(1-t)}`,d&&(a.style.opacity=s==="reverse"?`${1-t}`:`${t}`),I&&E?a.style.stroke=Se(I,E,t):E&&(a.style.stroke=E),x!==null&&S!==null?a.style.strokeWidth=`${x+(S-x)*t}`:S!==null&&(a.style.strokeWidth=`${S}`),k!==null&&T!==null?a.style.fillOpacity=`${k+(T-k)*t}`:T!==null&&(a.style.fillOpacity=`${T}`),P&&a.tagName.toLowerCase()==="path"&&C[m]&&a.setAttribute("d",He(C[m],P,t));});}function Pe(){if(e.style.setProperty("--scroll-draw-progress","0"),W){e.style.clipPath=_(0);return}v.forEach((t,s)=>{t.style.strokeDasharray=`${g[s]}`,t.style.strokeDashoffset=y==="reverse"?"0":`${g[s]}`,d?t.style.opacity=y==="reverse"?"1":"0":t.style.opacity="",I&&(t.style.stroke=I),x!==null&&(t.style.strokeWidth=`${x}`),k!==null&&(t.style.fillOpacity=`${k}`),P&&t.tagName.toLowerCase()==="path"&&C[s]&&t.setAttribute("d",C[s]);});}if(v.forEach(t=>{Je(t);let s=Ee(t);g.push(s),t.tagName.toLowerCase()==="path"?C.push(t.getAttribute("d")??""):C.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=y==="reverse"?`${s}`:"0",d&&(t.style.opacity="1"),E&&(t.style.stroke=E),S!==null&&(t.style.strokeWidth=`${S}`),T!==null&&(t.style.fillOpacity=`${T}`),P&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",P)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=y==="reverse"?"0":`${s}`,d?t.style.opacity=y==="reverse"?"1":"0":t.style.opacity="",I&&(t.style.stroke=I),x!==null&&(t.style.strokeWidth=`${x}`),k!==null&&(t.style.fillOpacity=`${k}`));}),W){if(n)return e.style.clipPath=_(1),J?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=_(0);}else if(n)return J?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function Be(){return !(ze===false||!je()||!v.length||typeof p!="string"||!(p in Re)||W||$!=="y"||b||f!==1||X!==0||U||Z||te!==false||P||ee||j||me>0||ye||ge||J||R!=null||H!=null||V!=null||(D.start??"top bottom").trim()!=="top bottom"||(D.end??"bottom top").trim()!=="bottom top")}function _e(){let t=`svg-scroll-draw-${++Ue}`,s=y==="reverse"?"0":"var(--ssd-len)",a=y==="reverse"?"var(--ssd-len)":"0",m=`stroke-dashoffset:${s};`,q=`stroke-dashoffset:${a};`;d&&(m+=`opacity:${y==="reverse"?1:0};`,q+=`opacity:${y==="reverse"?0:1};`);let w=document.createElement("style");w.setAttribute("data-svg-scroll-draw",""),w.textContent=`@keyframes ${t}{from{${m}}to{${q}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Re[p]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(w);function i(u,M){u.style.setProperty("--ssd-len",String(g[M])),u.style.strokeDasharray=`${g[M]}`,u.style.strokeDashoffset="",u.style.opacity="",u.style.animationPlayState="",u.classList.add(t);}v.forEach(i);let l=false,h=-1;function c(){if(h>=0)return h;let u=e.getBoundingClientRect(),{tStart:M,tEnd:Y}=xe({top:u.top,height:u.height},Q(),De(),Te,Ae);return re(B(Q(),M,Y,f))}return {destroy(){v.forEach(u=>{u.classList.remove(t),u.style.removeProperty("--ssd-len"),u.style.animationPlayState="";}),w.remove();},replay(){l=false,h=-1,v.forEach(i);},pause(){l=true,v.forEach(u=>{u.style.animationPlayState="paused";});},resume(){l&&(l=false,v.forEach(u=>{u.style.animationPlayState="running";}));},seek(u){let M=Math.min(1,Math.max(0,u));h=M,l=true,v.forEach((Y,Ie)=>{Y.classList.remove(t),Y.style.strokeDashoffset=y==="reverse"?`${g[Ie]*M}`:`${g[Ie]*(1-M)}`,d&&(Y.style.opacity=y==="reverse"?`${1-M}`:`${M}`);});},getProgress(){return c()}}}if(Be())return _e();Le();function ue(){if(!ne||z)return;let t=performance.now(),s=Q(),a=f;if(te!==false){let i=t-Me,l=i>0?Math.abs(s-(le<0?s:le))/i:0;a=f*Math.max(.2,1+l*(typeof te=="number"?te:1)*.04);}le=s,Me=t;let m=Z?se===-1||s>=se?"forward":"reverse":y;se=s;let q=F-O,w=true;if(W){let i=re(B(s,O,F,a));U&&!Z&&(A=Math.max(A,i),i=A),oe=i,e.style.setProperty("--scroll-draw-progress",String(i));let l=m==="reverse"?1-i:i;e.style.clipPath=_(l),ye?.(i),!G&&B(s,O,F,a)>0&&(G=true,ge?.()),i>=1&&!L?(L=true,J?.(),K<(j==="infinite"?1/0:j??0)&&(K++,ie=setTimeout(()=>{A=-1,G=false,L=false,e.style.clipPath=_(0);},ke))):i<1&&!U&&(L=false),N=requestAnimationFrame(ue);return}if(v.forEach((i,l)=>{let h=l*X*q,c=re(B(s,O+h,F+h,a));U&&!Z&&(A=Math.max(A,c),c=A),oe=c,i.style.strokeDashoffset=m==="reverse"?`${g[l]*c}`:`${g[l]*(1-c)}`,d&&(i.style.opacity=m==="reverse"?`${1-c}`:`${c}`),I&&E?i.style.stroke=Se(I,E,c):E&&(i.style.stroke=E),x!==null&&S!==null?i.style.strokeWidth=`${x+(S-x)*c}`:S!==null&&(i.style.strokeWidth=`${S}`),k!==null&&T!==null?i.style.fillOpacity=`${k+(T-k)*c}`:T!==null&&(i.style.fillOpacity=`${T}`),P&&i.tagName.toLowerCase()==="path"&&C[l]&&i.setAttribute("d",He(C[l],P,c)),l===0&&(ye?.(c),e.style.setProperty("--scroll-draw-progress",String(c))),c<1&&(w=false);}),ee){let i=re(B(s,O,F,a));for(let l in ee){let h=parseFloat(l);i>=h&&!ae.has(h)&&(ae.add(h),ee[l]?.());}}!G&&B(s,O,F,a)>0&&(G=true,ge?.()),w&&!L?(L=true,J?.(),K<(j==="infinite"?1/0:j??0)&&(K++,ie=setTimeout(()=>{A=-1,G=false,L=false,ae.clear(),Pe();},ke))):!w&&!U&&(L=false),N=requestAnimationFrame(ue);}let be=new IntersectionObserver(t=>{t.forEach(s=>{ne=s.isIntersecting,ne&&!z?N=requestAnimationFrame(ue):cancelAnimationFrame(N);});},{root:b??null,threshold:We,rootMargin:Ge}),ve;function fe(){clearTimeout(ve),ve=setTimeout(()=>{v.forEach((t,s)=>{g[s]=Ee(t),t.style.strokeDasharray=`${g[s]}`;}),Le();},150);}return window.addEventListener("resize",fe),window.addEventListener("orientationchange",fe),me>0?setTimeout(()=>be.observe(e),me):be.observe(e),{destroy(){cancelAnimationFrame(N),clearTimeout(ie),be.disconnect(),window.removeEventListener("resize",fe),window.removeEventListener("orientationchange",fe),clearTimeout(ve),he?.remove();},replay(){A=-1,se=-1,le=-1,G=false,L=false,K=0,z=false,ae.clear(),clearTimeout(ie),Pe();},pause(){z=true,cancelAnimationFrame(N);},resume(){z&&(z=false,ne&&(N=requestAnimationFrame(ue)));},seek(t){let s=Math.min(1,Math.max(0,t));oe=s,A=s,z=true,cancelAnimationFrame(N),qe(s,y);},getProgress(){return oe}}}function tt(e,r={}){let n=ce(e,r);return {update(o){n.destroy(),n=ce(e,o);},destroy(){n.destroy();}}}function rt(e={}){let r=null;function n(o){return r=ce(o,e),{destroy(){r?.destroy(),r=null;}}}return {action:n,getInstance:()=>r}}export{rt as createScrollDraw,tt as scrollDraw};
+function Qe({bounces:e=3,decay:r=.5}={}){let n=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,r)),d=Math.sqrt(o),m=0,b=[];for(let u=0;u<n;u++){let h=Math.pow(d,u);b.push(h),m+=h;}let $=[0],R=0;for(let u=0;u<n;u++)R+=b[u]/m,$.push(R);return u=>{if(u<=0)return 0;if(u>=1)return 1;for(let h=0;h<n;h++)if(u<=$[h+1]){let se=(u-$[h])/($[h+1]-$[h]);if(h===0)return se*(2-se);let D=1-Math.pow(o,h);return D+(1-D)*(2*se-1)*(2*se-1)}return 1}}function Ye({amplitude:e=1,period:r=.4}={}){let n=Math.max(1,e),o=Math.max(.1,r),d=n<=1?o/4:o/(2*Math.PI)*Math.asin(1/n);return m=>m<=0?0:m>=1?1:n*Math.pow(2,-10*m)*Math.sin((m-d)*(2*Math.PI)/o)+1}var ke={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),bounce:Qe(),elastic:Ye()};function Le(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 We(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 ze(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 we(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 Ze(e,r,n){return Math.min(n,Math.max(r,e))}function ne(e,r,n,o){return n===r?0:Ze((e-r)/(n-r)*o,0,1)}function De(e,r,n,o,d){let m=We(e.top,e.height,r,o.element)-ze(o.viewport,n),b=We(e.top,e.height,r,d.element)-ze(d.viewport,n);return {tStart:m,tEnd:b}}function qe(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 ve(e,r,n){let o=qe(e),d=qe(r);return !o||!d?e:`rgb(${Math.round(o[0]+(d[0]-o[0])*n)},${Math.round(o[1]+(d[1]-o[1])*n)},${Math.round(o[2]+(d[2]-o[2])*n)})`}function Ve(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}var Ge={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},et=0;function tt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function rt(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?Ve("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&Ve("Element has a fill \u2014 it may obscure the stroke animation.",e);}function nt(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 d(){let m=n==="x"?window.scrollX:window.scrollY,b=e-m,$=r-m,R=n==="x";o.innerHTML=`
+      <div style="position:absolute;${R?`left:${b}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${b}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;${R?`left:${$}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${$}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",d,{passive:true}),d(),o}function Pe(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),d=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,m=>{let b=parseFloat(m),$=o[d++]??b;return String(+(b+($-b)*n).toFixed(4))})}function Ee(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:d=1,fade:m=false,easing:b="linear",trigger:$={},stagger:R=0,direction:u="forward",once:h=false,debug:se=false,axis:D="y",scrollContainer:$e,autoReverse:ce=false,delay:ae=0,strokeColor:j,strokeWidth:J,fillOpacity:K,waypoints:Q,velocityScale:fe=false,threshold:Ie=0,rootMargin:Fe="0px",repeat:Y=0,repeatDelay:xe=0,morphTo:N,clip:Me,autoplay:Be=false,duration:_e=1e3,native:Xe=true,onProgress:le,onStart:me,onComplete:oe}=r,G=Me===true?"left":typeof Me=="string"?Me:false,Z=typeof b=="function"?b:ke[b]??ke.linear,Oe=Le($.start??"top bottom"),Ce=Le($.end??"bottom top"),P=typeof $e=="string"?document.querySelector($e):$e??null,H=Array.isArray(j)?j[0]:null,S=Array.isArray(j)?j[1]:typeof j=="string"?j:null,I=Array.isArray(J)?J[0]:null,T=Array.isArray(J)?J[1]:typeof J=="number"?J:null,F=Array.isArray(K)?K[0]:null,A=Array.isArray(K)?K[1]:typeof K=="number"?K:null;function ee(t){let s=t*100;switch(G){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 x=G?[]:Array.from(e.querySelectorAll(o)),v=[],W=[],B=0,_=0,M=false,C=false,E=0,pe=false,z=-1,de=-1,k=false,te=0,V=0,X,Se=null,U=new Set,ye=-1,Re=performance.now();function ue(){return P?D==="x"?P.scrollLeft:P.scrollTop:D==="x"?window.scrollX:window.scrollY}function Ne(){return P?D==="x"?P.clientWidth:P.clientHeight:D==="x"?window.innerWidth:window.innerHeight}function He(){let t=e.getBoundingClientRect(),s,l,g;if(P){let L=P.getBoundingClientRect();s=D==="x"?t.left-L.left+P.scrollLeft:t.top-L.top+P.scrollTop,l=D==="x"?t.width:t.height,g=ue();}else s=D==="x"?t.left:t.top,l=D==="x"?t.width:t.height,g=ue();let O=De({top:s,height:l},g,Ne(),Oe,Ce);B=O.tStart,_=O.tEnd,se&&process.env.NODE_ENV!=="production"&&(Se?.remove(),Se=nt(B,_,D));}function Ue(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),G){let l=s==="reverse"?1-t:t;e.style.clipPath=ee(l);return}x.forEach((l,g)=>{l.style.strokeDashoffset=s==="reverse"?`${v[g]*t}`:`${v[g]*(1-t)}`,m&&(l.style.opacity=s==="reverse"?`${1-t}`:`${t}`),H&&S?l.style.stroke=ve(H,S,t):S&&(l.style.stroke=S),I!==null&&T!==null?l.style.strokeWidth=`${I+(T-I)*t}`:T!==null&&(l.style.strokeWidth=`${T}`),F!==null&&A!==null?l.style.fillOpacity=`${F+(A-F)*t}`:A!==null&&(l.style.fillOpacity=`${A}`),N&&l.tagName.toLowerCase()==="path"&&W[g]&&l.setAttribute("d",Pe(W[g],N,t));});}function he(){if(e.style.setProperty("--scroll-draw-progress","0"),G){e.style.clipPath=ee(0);return}x.forEach((t,s)=>{t.style.strokeDasharray=`${v[s]}`,t.style.strokeDashoffset=u==="reverse"?"0":`${v[s]}`,m?t.style.opacity=u==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),I!==null&&(t.style.strokeWidth=`${I}`),F!==null&&(t.style.fillOpacity=`${F}`),N&&t.tagName.toLowerCase()==="path"&&W[s]&&t.setAttribute("d",W[s]);});}if(x.forEach(t=>{rt(t);let s=we(t);v.push(s),t.tagName.toLowerCase()==="path"?W.push(t.getAttribute("d")??""):W.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=u==="reverse"?`${s}`:"0",m&&(t.style.opacity="1"),S&&(t.style.stroke=S),T!==null&&(t.style.strokeWidth=`${T}`),A!==null&&(t.style.fillOpacity=`${A}`),N&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",N)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=u==="reverse"?"0":`${s}`,m?t.style.opacity=u==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),I!==null&&(t.style.strokeWidth=`${I}`),F!==null&&(t.style.fillOpacity=`${F}`));}),G){if(n)return e.style.clipPath=ee(1),oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=ee(0);}else if(n)return oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function je(){return !(Xe===false||!tt()||!x.length||typeof b!="string"||!(b in Ge)||G||D!=="y"||P||d!==1||R!==0||h||ce||fe!==false||N||Q||Y||ae>0||le||me||oe||j!=null||J!=null||K!=null||($.start??"top bottom").trim()!=="top bottom"||($.end??"bottom top").trim()!=="bottom top")}function Je(){let t=`svg-scroll-draw-${++et}`,s=u==="reverse"?"0":"var(--ssd-len)",l=u==="reverse"?"var(--ssd-len)":"0",g=`stroke-dashoffset:${s};`,O=`stroke-dashoffset:${l};`;m&&(g+=`opacity:${u==="reverse"?1:0};`,O+=`opacity:${u==="reverse"?0:1};`);let L=document.createElement("style");L.setAttribute("data-svg-scroll-draw",""),L.textContent=`@keyframes ${t}{from{${g}}to{${O}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Ge[b]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(L);function a(i,f){i.style.setProperty("--ssd-len",String(v[f])),i.style.strokeDasharray=`${v[f]}`,i.style.strokeDashoffset="",i.style.opacity="",i.style.animationPlayState="",i.classList.add(t);}x.forEach(a);let p=false,w=-1;function c(){if(w>=0)return w;let i=e.getBoundingClientRect(),{tStart:f,tEnd:y}=De({top:i.top,height:i.height},ue(),Ne(),Oe,Ce);return Z(ne(ue(),f,y,d))}return {destroy(){x.forEach(i=>{i.classList.remove(t),i.style.removeProperty("--ssd-len"),i.style.animationPlayState="";}),L.remove();},replay(){p=false,w=-1,x.forEach(a);},pause(){p=true,x.forEach(i=>{i.style.animationPlayState="paused";});},resume(){p&&(p=false,x.forEach(i=>{i.style.animationPlayState="running";}));},seek(i){let f=Math.min(1,Math.max(0,i));w=f,p=true,x.forEach((y,re)=>{y.classList.remove(t),y.style.strokeDashoffset=u==="reverse"?`${v[re]*f}`:`${v[re]*(1-f)}`,m&&(y.style.opacity=u==="reverse"?`${1-f}`:`${f}`);});},getProgress(){return c()}}}if(je())return Je();function Ke(){let t=Math.max(1,_e),s=0,l=0;function g(c){let i=true;if(G){let f=Math.min(1,Math.max(0,c/t)),y=Z(f);te=y,e.style.setProperty("--scroll-draw-progress",String(y)),e.style.clipPath=ee(u==="reverse"?1-y:y),le?.(y),f<1&&(i=false);}else x.forEach((f,y)=>{let re=y*R*t,ie=Math.min(1,Math.max(0,(c-re)/t)),q=Z(ie);f.style.strokeDashoffset=u==="reverse"?`${v[y]*q}`:`${v[y]*(1-q)}`,m&&(f.style.opacity=u==="reverse"?`${1-q}`:`${q}`),H&&S?f.style.stroke=ve(H,S,q):S&&(f.style.stroke=S),I!==null&&T!==null?f.style.strokeWidth=`${I+(T-I)*q}`:T!==null&&(f.style.strokeWidth=`${T}`),F!==null&&A!==null?f.style.fillOpacity=`${F+(A-F)*q}`:A!==null&&(f.style.fillOpacity=`${A}`),N&&f.tagName.toLowerCase()==="path"&&W[y]&&f.setAttribute("d",Pe(W[y],N,q)),y===0&&(le?.(q),e.style.setProperty("--scroll-draw-progress",String(q))),ie<1&&(i=false);});if(Q){let f=Math.min(1,Math.max(0,c/t)),y=Z(f);for(let re in Q){let ie=parseFloat(re);y>=ie&&!U.has(ie)&&(U.add(ie),Q[re]?.());}}return i}function O(c){if(k)return;let i=c-s;C||(C=true,me?.());let f=g(i);if(f&&!M){M=true,g(t*(1+Math.max(0,x.length-1)*R)),oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{s=performance.now(),C=false,M=false,U.clear(),he(),E=requestAnimationFrame(O);},xe));return}f||(E=requestAnimationFrame(O));}function L(){cancelAnimationFrame(E),clearTimeout(X),s=performance.now(),l=0,k=false,C=false,M=false,V=0,U.clear(),he(),E=requestAnimationFrame(O);}let a=new IntersectionObserver(c=>{c.forEach(i=>{i.isIntersecting&&!(h&&M)?L():!i.isIntersecting&&!h&&!M&&(cancelAnimationFrame(E),clearTimeout(X),s=null);});},{root:P??null,threshold:Ie,rootMargin:Fe}),p;function w(){clearTimeout(p),p=setTimeout(()=>{x.forEach((c,i)=>{v[i]=we(c),c.style.strokeDasharray=`${v[i]}`;});},150);}return window.addEventListener("resize",w),window.addEventListener("orientationchange",w),ae>0?setTimeout(()=>a.observe(e),ae):a.observe(e),{destroy(){cancelAnimationFrame(E),clearTimeout(X),a.disconnect(),window.removeEventListener("resize",w),window.removeEventListener("orientationchange",w),clearTimeout(p);},replay(){V=0,L();},pause(){k||(k=true,l=performance.now()-s,cancelAnimationFrame(E));},resume(){k&&(k=false,s=performance.now()-l,E=requestAnimationFrame(O));},seek(c){let i=Math.min(1,Math.max(0,c));te=i,k=true,l=i*t,s=performance.now()-l,cancelAnimationFrame(E),g(l);},getProgress(){return te}}}if(Be)return Ke();He();function ge(){if(!pe||k)return;let t=performance.now(),s=ue(),l=d;if(fe!==false){let a=t-Re,p=a>0?Math.abs(s-(ye<0?s:ye))/a:0;l=d*Math.max(.2,1+p*(typeof fe=="number"?fe:1)*.04);}ye=s,Re=t;let g=ce?de===-1||s>=de?"forward":"reverse":u;de=s;let O=_-B,L=true;if(G){let a=Z(ne(s,B,_,l));h&&!ce&&(z=Math.max(z,a),a=z),te=a,e.style.setProperty("--scroll-draw-progress",String(a));let p=g==="reverse"?1-a:a;e.style.clipPath=ee(p),le?.(a),!C&&ne(s,B,_,l)>0&&(C=true,me?.()),a>=1&&!M?(M=true,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{z=-1,C=false,M=false,e.style.clipPath=ee(0);},xe))):a<1&&!h&&(M=false),E=requestAnimationFrame(ge);return}if(x.forEach((a,p)=>{let w=p*R*O,c=Z(ne(s,B+w,_+w,l));h&&!ce&&(z=Math.max(z,c),c=z),te=c,a.style.strokeDashoffset=g==="reverse"?`${v[p]*c}`:`${v[p]*(1-c)}`,m&&(a.style.opacity=g==="reverse"?`${1-c}`:`${c}`),H&&S?a.style.stroke=ve(H,S,c):S&&(a.style.stroke=S),I!==null&&T!==null?a.style.strokeWidth=`${I+(T-I)*c}`:T!==null&&(a.style.strokeWidth=`${T}`),F!==null&&A!==null?a.style.fillOpacity=`${F+(A-F)*c}`:A!==null&&(a.style.fillOpacity=`${A}`),N&&a.tagName.toLowerCase()==="path"&&W[p]&&a.setAttribute("d",Pe(W[p],N,c)),p===0&&(le?.(c),e.style.setProperty("--scroll-draw-progress",String(c))),c<1&&(L=false);}),Q){let a=Z(ne(s,B,_,l));for(let p in Q){let w=parseFloat(p);a>=w&&!U.has(w)&&(U.add(w),Q[p]?.());}}!C&&ne(s,B,_,l)>0&&(C=true,me?.()),L&&!M?(M=true,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{z=-1,C=false,M=false,U.clear(),he();},xe))):!L&&!h&&(M=false),E=requestAnimationFrame(ge);}let Te=new IntersectionObserver(t=>{t.forEach(s=>{pe=s.isIntersecting,pe&&!k?E=requestAnimationFrame(ge):cancelAnimationFrame(E);});},{root:P??null,threshold:Ie,rootMargin:Fe}),Ae;function be(){clearTimeout(Ae),Ae=setTimeout(()=>{x.forEach((t,s)=>{v[s]=we(t),t.style.strokeDasharray=`${v[s]}`;}),He();},150);}return window.addEventListener("resize",be),window.addEventListener("orientationchange",be),ae>0?setTimeout(()=>Te.observe(e),ae):Te.observe(e),{destroy(){cancelAnimationFrame(E),clearTimeout(X),Te.disconnect(),window.removeEventListener("resize",be),window.removeEventListener("orientationchange",be),clearTimeout(Ae),Se?.remove();},replay(){z=-1,de=-1,ye=-1,C=false,M=false,V=0,k=false,U.clear(),clearTimeout(X),he();},pause(){k=true,cancelAnimationFrame(E);},resume(){k&&(k=false,pe&&(E=requestAnimationFrame(ge)));},seek(t){let s=Math.min(1,Math.max(0,t));te=s,z=s,k=true,cancelAnimationFrame(E),Ue(s,u);},getProgress(){return te}}}function lt(e,r={}){let n=Ee(e,r);return {update(o){n.destroy(),n=Ee(e,o);},destroy(){n.destroy();}}}function ut(e={}){let r=null;function n(o){return r=Ee(o,e),{destroy(){r?.destroy(),r=null;}}}return {action:n,getInstance:()=>r}}export{ut as createScrollDraw,lt as scrollDraw};

package/dist/timeline/index.cjs

@@ -1 +1 @@
-'use strict';var S={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 A(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[n="top",s="bottom"]=r.split(/\s+/).filter(Boolean);return {element:n,viewport:s}}function N(e,r,n,s){switch(s){case "top":return e+n;case "center":return e+n+r/2;case "bottom":return e+n+r;default:return e+n}}function q(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 M(e){let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),s=parseFloat(e.getAttribute("height")??"0");return 2*(n+s)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function U(e,r,n){return Math.min(n,Math.max(r,e))}function R(e,r,n,s){return n===r?0:U((e-r)/(n-r)*s,0,1)}function O(e,r,n,s,c){let g=N(e.top,e.height,r,s.element)-q(s.viewport,n),x=N(e.top,e.height,r,c.element)-q(c.viewport,n);return {tStart:g,tEnd:x}}function H(e,r){let n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return n;let s=typeof e=="string"?document.querySelector(e):e;if(!s)return console.warn("[svg-scroll-draw/timeline] Container not found:",e),n;let c=s,{trigger:g={},speed:x=1,once:v=false,axis:d="y",tracks:V,onComplete:B}=r,W=A(g.start??"top bottom"),X=A(g.end??"bottom top"),E=V.map(t=>{let i=typeof t.easing=="function"?t.easing:S[t.easing??"linear"]??S.linear,a=Array.from(c.querySelectorAll(t.selector)),o=a.map(u=>M(u));return a.forEach((u,y)=>{u.style.strokeDasharray=`${o[y]}`,u.style.strokeDashoffset=`${o[y]}`,t.fade&&(u.style.opacity="0");}),{...t,elements:a,lengths:o,easeFn:i}}),$=0,D=0,b=false,m=false,l=0,h=false,p=-1,f=0;function F(){return d==="x"?window.scrollX:window.scrollY}function j(){return d==="x"?window.innerWidth:window.innerHeight}function L(){let t=c.getBoundingClientRect(),i=F(),a=d==="x"?t.left:t.top,o=d==="x"?t.width:t.height,u=O({top:a,height:o},i,j(),W,X);$=u.tStart,D=u.tEnd;}function P(t){c.style.setProperty("--scroll-draw-progress",String(t)),E.forEach(({elements:i,lengths:a,from:o,to:u,easeFn:y,fade:J})=>{let z=u-o,K=z>0?Math.min(1,Math.max(0,(t-o)/z)):0,C=y(K);i.forEach((G,Q)=>{G.style.strokeDashoffset=`${a[Q]*(1-C)}`,J&&(G.style.opacity=String(C));});});}function T(){if(!b||m)return;let t=R(F(),$,D,x);v&&(p=Math.max(p,t),t=p),f=t,P(t),t>=1&&!h?(h=true,B?.()):t<1&&!v&&(h=false),l=requestAnimationFrame(T);}L();let k=new IntersectionObserver(t=>{t.forEach(i=>{b=i.isIntersecting,b&&!m?l=requestAnimationFrame(T):cancelAnimationFrame(l);});},{threshold:0});k.observe(c);let I;function w(){clearTimeout(I),I=setTimeout(()=>{E.forEach(({elements:t,lengths:i})=>{t.forEach((a,o)=>{i[o]=M(a),a.style.strokeDasharray=`${i[o]}`;});}),L();},150);}return window.addEventListener("resize",w),window.addEventListener("orientationchange",w),{destroy(){cancelAnimationFrame(l),clearTimeout(I),k.disconnect(),window.removeEventListener("resize",w),window.removeEventListener("orientationchange",w);},replay(){p=-1,h=false,m=false,E.forEach(({elements:t,lengths:i,fade:a})=>{t.forEach((o,u)=>{o.style.strokeDashoffset=`${i[u]}`,a&&(o.style.opacity="0");});}),c.style.setProperty("--scroll-draw-progress","0");},pause(){m=true,cancelAnimationFrame(l);},resume(){m&&(m=false,b&&(l=requestAnimationFrame(T)));},seek(t){f=Math.min(1,Math.max(0,t)),p=f,m=true,cancelAnimationFrame(l),P(f);},getProgress(){return f}}}exports.scrollDrawTimeline=H;
+'use strict';function U({bounces:e=3,decay:t=.5}={}){let r=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,t)),u=Math.sqrt(o),c=0,d=[];for(let s=0;s<r;s++){let i=Math.pow(u,s);d.push(i),c+=i;}let f=[0],b=0;for(let s=0;s<r;s++)b+=d[s]/c,f.push(b);return s=>{if(s<=0)return 0;if(s>=1)return 1;for(let i=0;i<r;i++)if(s<=f[i+1]){let w=(s-f[i])/(f[i+1]-f[i]);if(i===0)return w*(2-w);let M=1-Math.pow(o,i);return M+(1-M)*(2*w-1)*(2*w-1)}return 1}}function Z({amplitude:e=1,period:t=.4}={}){let r=Math.max(1,e),o=Math.max(.1,t),u=r<=1?o/4:o/(2*Math.PI)*Math.asin(1/r);return c=>c<=0?0:c>=1?1:r*Math.pow(2,-10*c)*Math.sin((c-u)*(2*Math.PI)/o)+1}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),bounce:U(),elastic:Z()};function F(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 V(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 B(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 P(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 _(e,t,r){return Math.min(r,Math.max(t,e))}function W(e,t,r,o){return r===t?0:_((e-t)/(r-t)*o,0,1)}function X(e,t,r,o,u){let c=V(e.top,e.height,t,o.element)-B(o.viewport,r),d=V(e.top,e.height,t,u.element)-B(u.viewport,r);return {tStart:c,tEnd:d}}function ee(e,t){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let o=typeof e=="string"?document.querySelector(e):e;if(!o)return console.warn("[svg-scroll-draw/timeline] Container not found:",e),r;let u=o,{trigger:c={},speed:d=1,once:f=false,axis:b="y",tracks:s,onComplete:i}=t,w=F(c.start??"top bottom"),M=F(c.end??"bottom top"),A=s.map(n=>{let m=typeof n.easing=="function"?n.easing:$[n.easing??"linear"]??$.linear,l=Array.from(u.querySelectorAll(n.selector)),a=l.map(p=>P(p));return l.forEach((p,S)=>{p.style.strokeDasharray=`${a[S]}`,p.style.strokeDashoffset=`${a[S]}`,n.fade&&(p.style.opacity="0");}),{...n,elements:l,lengths:a,easeFn:m}}),L=0,k=0,E=false,h=false,g=0,I=false,y=-1,x=0;function q(){return b==="x"?window.scrollX:window.scrollY}function j(){return b==="x"?window.innerWidth:window.innerHeight}function z(){let n=u.getBoundingClientRect(),m=q(),l=b==="x"?n.left:n.top,a=b==="x"?n.width:n.height,p=X({top:l,height:a},m,j(),w,M);L=p.tStart,k=p.tEnd;}function C(n){u.style.setProperty("--scroll-draw-progress",String(n)),A.forEach(({elements:m,lengths:l,from:a,to:p,easeFn:S,fade:J})=>{let N=p-a,K=N>0?Math.min(1,Math.max(0,(n-a)/N)):0,R=S(K);m.forEach((O,Q)=>{O.style.strokeDashoffset=`${l[Q]*(1-R)}`,J&&(O.style.opacity=String(R));});});}function v(){if(!E||h)return;let n=W(q(),L,k,d);f&&(y=Math.max(y,n),n=y),x=n,C(n),n>=1&&!I?(I=true,i?.()):n<1&&!f&&(I=false),g=requestAnimationFrame(v);}z();let G=new IntersectionObserver(n=>{n.forEach(m=>{E=m.isIntersecting,E&&!h?g=requestAnimationFrame(v):cancelAnimationFrame(g);});},{threshold:0});G.observe(u);let D;function T(){clearTimeout(D),D=setTimeout(()=>{A.forEach(({elements:n,lengths:m})=>{n.forEach((l,a)=>{m[a]=P(l),l.style.strokeDasharray=`${m[a]}`;});}),z();},150);}return window.addEventListener("resize",T),window.addEventListener("orientationchange",T),{destroy(){cancelAnimationFrame(g),clearTimeout(D),G.disconnect(),window.removeEventListener("resize",T),window.removeEventListener("orientationchange",T);},replay(){y=-1,I=false,h=false,A.forEach(({elements:n,lengths:m,fade:l})=>{n.forEach((a,p)=>{a.style.strokeDashoffset=`${m[p]}`,l&&(a.style.opacity="0");});}),u.style.setProperty("--scroll-draw-progress","0");},pause(){h=true,cancelAnimationFrame(g);},resume(){h&&(h=false,E&&(g=requestAnimationFrame(v)));},seek(n){x=Math.min(1,Math.max(0,n)),y=x,h=true,cancelAnimationFrame(g),C(x);},getProgress(){return x}}}exports.scrollDrawTimeline=ee;

package/dist/timeline/index.d.mts

@@ -1,4 +1,4 @@
-type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
 interface ScrollDrawInstance {
     destroy: () => void;
     /** Reset and replay the animation from the beginning. */

package/dist/timeline/index.d.ts

@@ -1,4 +1,4 @@
-type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
 interface ScrollDrawInstance {
     destroy: () => void;
     /** Reset and replay the animation from the beginning. */

package/dist/timeline/index.mjs

@@ -1 +1 @@
-var S={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 A(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[n="top",s="bottom"]=r.split(/\s+/).filter(Boolean);return {element:n,viewport:s}}function N(e,r,n,s){switch(s){case "top":return e+n;case "center":return e+n+r/2;case "bottom":return e+n+r;default:return e+n}}function q(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 M(e){let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),s=parseFloat(e.getAttribute("height")??"0");return 2*(n+s)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function U(e,r,n){return Math.min(n,Math.max(r,e))}function R(e,r,n,s){return n===r?0:U((e-r)/(n-r)*s,0,1)}function O(e,r,n,s,c){let g=N(e.top,e.height,r,s.element)-q(s.viewport,n),x=N(e.top,e.height,r,c.element)-q(c.viewport,n);return {tStart:g,tEnd:x}}function H(e,r){let n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return n;let s=typeof e=="string"?document.querySelector(e):e;if(!s)return console.warn("[svg-scroll-draw/timeline] Container not found:",e),n;let c=s,{trigger:g={},speed:x=1,once:v=false,axis:d="y",tracks:V,onComplete:B}=r,W=A(g.start??"top bottom"),X=A(g.end??"bottom top"),E=V.map(t=>{let i=typeof t.easing=="function"?t.easing:S[t.easing??"linear"]??S.linear,a=Array.from(c.querySelectorAll(t.selector)),o=a.map(u=>M(u));return a.forEach((u,y)=>{u.style.strokeDasharray=`${o[y]}`,u.style.strokeDashoffset=`${o[y]}`,t.fade&&(u.style.opacity="0");}),{...t,elements:a,lengths:o,easeFn:i}}),$=0,D=0,b=false,m=false,l=0,h=false,p=-1,f=0;function F(){return d==="x"?window.scrollX:window.scrollY}function j(){return d==="x"?window.innerWidth:window.innerHeight}function L(){let t=c.getBoundingClientRect(),i=F(),a=d==="x"?t.left:t.top,o=d==="x"?t.width:t.height,u=O({top:a,height:o},i,j(),W,X);$=u.tStart,D=u.tEnd;}function P(t){c.style.setProperty("--scroll-draw-progress",String(t)),E.forEach(({elements:i,lengths:a,from:o,to:u,easeFn:y,fade:J})=>{let z=u-o,K=z>0?Math.min(1,Math.max(0,(t-o)/z)):0,C=y(K);i.forEach((G,Q)=>{G.style.strokeDashoffset=`${a[Q]*(1-C)}`,J&&(G.style.opacity=String(C));});});}function T(){if(!b||m)return;let t=R(F(),$,D,x);v&&(p=Math.max(p,t),t=p),f=t,P(t),t>=1&&!h?(h=true,B?.()):t<1&&!v&&(h=false),l=requestAnimationFrame(T);}L();let k=new IntersectionObserver(t=>{t.forEach(i=>{b=i.isIntersecting,b&&!m?l=requestAnimationFrame(T):cancelAnimationFrame(l);});},{threshold:0});k.observe(c);let I;function w(){clearTimeout(I),I=setTimeout(()=>{E.forEach(({elements:t,lengths:i})=>{t.forEach((a,o)=>{i[o]=M(a),a.style.strokeDasharray=`${i[o]}`;});}),L();},150);}return window.addEventListener("resize",w),window.addEventListener("orientationchange",w),{destroy(){cancelAnimationFrame(l),clearTimeout(I),k.disconnect(),window.removeEventListener("resize",w),window.removeEventListener("orientationchange",w);},replay(){p=-1,h=false,m=false,E.forEach(({elements:t,lengths:i,fade:a})=>{t.forEach((o,u)=>{o.style.strokeDashoffset=`${i[u]}`,a&&(o.style.opacity="0");});}),c.style.setProperty("--scroll-draw-progress","0");},pause(){m=true,cancelAnimationFrame(l);},resume(){m&&(m=false,b&&(l=requestAnimationFrame(T)));},seek(t){f=Math.min(1,Math.max(0,t)),p=f,m=true,cancelAnimationFrame(l),P(f);},getProgress(){return f}}}export{H as scrollDrawTimeline};
+function U({bounces:e=3,decay:t=.5}={}){let r=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,t)),u=Math.sqrt(o),c=0,d=[];for(let s=0;s<r;s++){let i=Math.pow(u,s);d.push(i),c+=i;}let f=[0],b=0;for(let s=0;s<r;s++)b+=d[s]/c,f.push(b);return s=>{if(s<=0)return 0;if(s>=1)return 1;for(let i=0;i<r;i++)if(s<=f[i+1]){let w=(s-f[i])/(f[i+1]-f[i]);if(i===0)return w*(2-w);let M=1-Math.pow(o,i);return M+(1-M)*(2*w-1)*(2*w-1)}return 1}}function Z({amplitude:e=1,period:t=.4}={}){let r=Math.max(1,e),o=Math.max(.1,t),u=r<=1?o/4:o/(2*Math.PI)*Math.asin(1/r);return c=>c<=0?0:c>=1?1:r*Math.pow(2,-10*c)*Math.sin((c-u)*(2*Math.PI)/o)+1}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),bounce:U(),elastic:Z()};function F(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 V(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 B(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 P(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 _(e,t,r){return Math.min(r,Math.max(t,e))}function W(e,t,r,o){return r===t?0:_((e-t)/(r-t)*o,0,1)}function X(e,t,r,o,u){let c=V(e.top,e.height,t,o.element)-B(o.viewport,r),d=V(e.top,e.height,t,u.element)-B(u.viewport,r);return {tStart:c,tEnd:d}}function ee(e,t){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let o=typeof e=="string"?document.querySelector(e):e;if(!o)return console.warn("[svg-scroll-draw/timeline] Container not found:",e),r;let u=o,{trigger:c={},speed:d=1,once:f=false,axis:b="y",tracks:s,onComplete:i}=t,w=F(c.start??"top bottom"),M=F(c.end??"bottom top"),A=s.map(n=>{let m=typeof n.easing=="function"?n.easing:$[n.easing??"linear"]??$.linear,l=Array.from(u.querySelectorAll(n.selector)),a=l.map(p=>P(p));return l.forEach((p,S)=>{p.style.strokeDasharray=`${a[S]}`,p.style.strokeDashoffset=`${a[S]}`,n.fade&&(p.style.opacity="0");}),{...n,elements:l,lengths:a,easeFn:m}}),L=0,k=0,E=false,h=false,g=0,I=false,y=-1,x=0;function q(){return b==="x"?window.scrollX:window.scrollY}function j(){return b==="x"?window.innerWidth:window.innerHeight}function z(){let n=u.getBoundingClientRect(),m=q(),l=b==="x"?n.left:n.top,a=b==="x"?n.width:n.height,p=X({top:l,height:a},m,j(),w,M);L=p.tStart,k=p.tEnd;}function C(n){u.style.setProperty("--scroll-draw-progress",String(n)),A.forEach(({elements:m,lengths:l,from:a,to:p,easeFn:S,fade:J})=>{let N=p-a,K=N>0?Math.min(1,Math.max(0,(n-a)/N)):0,R=S(K);m.forEach((O,Q)=>{O.style.strokeDashoffset=`${l[Q]*(1-R)}`,J&&(O.style.opacity=String(R));});});}function v(){if(!E||h)return;let n=W(q(),L,k,d);f&&(y=Math.max(y,n),n=y),x=n,C(n),n>=1&&!I?(I=true,i?.()):n<1&&!f&&(I=false),g=requestAnimationFrame(v);}z();let G=new IntersectionObserver(n=>{n.forEach(m=>{E=m.isIntersecting,E&&!h?g=requestAnimationFrame(v):cancelAnimationFrame(g);});},{threshold:0});G.observe(u);let D;function T(){clearTimeout(D),D=setTimeout(()=>{A.forEach(({elements:n,lengths:m})=>{n.forEach((l,a)=>{m[a]=P(l),l.style.strokeDasharray=`${m[a]}`;});}),z();},150);}return window.addEventListener("resize",T),window.addEventListener("orientationchange",T),{destroy(){cancelAnimationFrame(g),clearTimeout(D),G.disconnect(),window.removeEventListener("resize",T),window.removeEventListener("orientationchange",T);},replay(){y=-1,I=false,h=false,A.forEach(({elements:n,lengths:m,fade:l})=>{n.forEach((a,p)=>{a.style.strokeDashoffset=`${m[p]}`,l&&(a.style.opacity="0");});}),u.style.setProperty("--scroll-draw-progress","0");},pause(){h=true,cancelAnimationFrame(g);},resume(){h&&(h=false,E&&(g=requestAnimationFrame(v)));},seek(n){x=Math.min(1,Math.max(0,n)),y=x,h=true,cancelAnimationFrame(g),C(x);},getProgress(){return x}}}export{ee as scrollDrawTimeline};

package/dist/vue/index.cjs

@@ -1,3 +1,3 @@
-'use strict';var vue=require('vue');var ve={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 we(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 Oe(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 Fe(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 Se(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 Je(e,r,s){return Math.min(s,Math.max(r,e))}function q(e,r,s,n){return s===r?0:Je((e-r)/(s-r)*n,0,1)}function $e(e,r,s,n,l){let d=Oe(e.top,e.height,r,n.element)-Fe(n.viewport,s),m=Oe(e.top,e.height,r,l.element)-Fe(l.viewport,s);return {tStart:d,tEnd:m}}function Ie(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 Ee(e,r,s){let n=Ie(e),l=Ie(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 Ne(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}var Re={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},Ke=0;function Qe(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function Ye(e){let r=e.getAttribute("stroke"),s=e.getAttribute("fill");!r||r==="none"?Ne("Element has no stroke \u2014 path will not be visible.",e):s&&s!=="none"&&s!=="transparent"&&Ne("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Ze(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 d=s==="x"?window.scrollX:window.scrollY,m=e-d,D=r-d,U=s==="x";n.innerHTML=`
-      <div style="position:absolute;${U?`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;${U?`left:${D}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${D}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 He(e,r,s){let n=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),l=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,d=>{let m=parseFloat(d),D=n[l++]??m;return String(+(m+(D-m)*s).toFixed(4))})}function xe(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:d=false,easing:m="linear",trigger:D={},stagger:U=0,direction:y="forward",once:X=false,debug:ze=false,axis:S="y",scrollContainer:ce,autoReverse:Z=false,delay:me=0,strokeColor:R,strokeWidth:H,fillOpacity:V,waypoints:ee,velocityScale:te=false,threshold:Be=0,rootMargin:qe="0px",repeat:j=0,repeatDelay:ke=0,morphTo:L,clip:pe,native:_e=true,onProgress:de,onStart:ye,onComplete:J}=r,W=pe===true?"left":typeof pe=="string"?pe:false,re=typeof m=="function"?m:ve[m]??ve.linear,Te=we(D.start??"top bottom"),Ae=we(D.end??"bottom top"),b=typeof ce=="string"?document.querySelector(ce):ce??null,C=Array.isArray(R)?R[0]:null,$=Array.isArray(R)?R[1]:typeof R=="string"?R:null,E=Array.isArray(H)?H[0]:null,x=Array.isArray(H)?H[1]:typeof H=="number"?H:null,k=Array.isArray(V)?V[0]:null,T=Array.isArray(V)?V[1]:typeof V=="number"?V:null;function _(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 v=W?[]:Array.from(e.querySelectorAll(n)),g=[],O=[],F=0,I=0,P=false,G=false,N=0,ne=false,A=-1,se=-1,z=false,oe=0,K=0,ie,ge=null,ae=new Set,le=-1,Me=performance.now();function Q(){return b?S==="x"?b.scrollLeft:b.scrollTop:S==="x"?window.scrollX:window.scrollY}function De(){return b?S==="x"?b.clientWidth:b.clientHeight:S==="x"?window.innerWidth:window.innerHeight}function Pe(){let t=e.getBoundingClientRect(),o,a,p;if(b){let w=b.getBoundingClientRect();o=S==="x"?t.left-w.left+b.scrollLeft:t.top-w.top+b.scrollTop,a=S==="x"?t.width:t.height,p=Q();}else o=S==="x"?t.left:t.top,a=S==="x"?t.width:t.height,p=Q();let B=$e({top:o,height:a},p,De(),Te,Ae);F=B.tStart,I=B.tEnd,ze&&process.env.NODE_ENV!=="production"&&(ge?.remove(),ge=Ze(F,I,S));}function Ue(t,o){if(e.style.setProperty("--scroll-draw-progress",String(t)),W){let a=o==="reverse"?1-t:t;e.style.clipPath=_(a);return}v.forEach((a,p)=>{a.style.strokeDashoffset=o==="reverse"?`${g[p]*t}`:`${g[p]*(1-t)}`,d&&(a.style.opacity=o==="reverse"?`${1-t}`:`${t}`),C&&$?a.style.stroke=Ee(C,$,t):$&&(a.style.stroke=$),E!==null&&x!==null?a.style.strokeWidth=`${E+(x-E)*t}`:x!==null&&(a.style.strokeWidth=`${x}`),k!==null&&T!==null?a.style.fillOpacity=`${k+(T-k)*t}`:T!==null&&(a.style.fillOpacity=`${T}`),L&&a.tagName.toLowerCase()==="path"&&O[p]&&a.setAttribute("d",He(O[p],L,t));});}function Le(){if(e.style.setProperty("--scroll-draw-progress","0"),W){e.style.clipPath=_(0);return}v.forEach((t,o)=>{t.style.strokeDasharray=`${g[o]}`,t.style.strokeDashoffset=y==="reverse"?"0":`${g[o]}`,d?t.style.opacity=y==="reverse"?"1":"0":t.style.opacity="",C&&(t.style.stroke=C),E!==null&&(t.style.strokeWidth=`${E}`),k!==null&&(t.style.fillOpacity=`${k}`),L&&t.tagName.toLowerCase()==="path"&&O[o]&&t.setAttribute("d",O[o]);});}if(v.forEach(t=>{Ye(t);let o=Se(t);g.push(o),t.tagName.toLowerCase()==="path"?O.push(t.getAttribute("d")??""):O.push(""),s?(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=y==="reverse"?`${o}`:"0",d&&(t.style.opacity="1"),$&&(t.style.stroke=$),x!==null&&(t.style.strokeWidth=`${x}`),T!==null&&(t.style.fillOpacity=`${T}`),L&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",L)):(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=y==="reverse"?"0":`${o}`,d?t.style.opacity=y==="reverse"?"1":"0":t.style.opacity="",C&&(t.style.stroke=C),E!==null&&(t.style.strokeWidth=`${E}`),k!==null&&(t.style.fillOpacity=`${k}`));}),W){if(s)return e.style.clipPath=_(1),J?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=_(0);}else if(s)return J?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function Xe(){return !(_e===false||!Qe()||!v.length||typeof m!="string"||!(m in Re)||W||S!=="y"||b||l!==1||U!==0||X||Z||te!==false||L||ee||j||me>0||de||ye||J||R!=null||H!=null||V!=null||(D.start??"top bottom").trim()!=="top bottom"||(D.end??"bottom top").trim()!=="bottom top")}function je(){let t=`svg-scroll-draw-${++Ke}`,o=y==="reverse"?"0":"var(--ssd-len)",a=y==="reverse"?"var(--ssd-len)":"0",p=`stroke-dashoffset:${o};`,B=`stroke-dashoffset:${a};`;d&&(p+=`opacity:${y==="reverse"?1:0};`,B+=`opacity:${y==="reverse"?0:1};`);let w=document.createElement("style");w.setAttribute("data-svg-scroll-draw",""),w.textContent=`@keyframes ${t}{from{${p}}to{${B}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Re[m]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(w);function i(f,M){f.style.setProperty("--ssd-len",String(g[M])),f.style.strokeDasharray=`${g[M]}`,f.style.strokeDashoffset="",f.style.opacity="",f.style.animationPlayState="",f.classList.add(t);}v.forEach(i);let u=false,h=-1;function c(){if(h>=0)return h;let f=e.getBoundingClientRect(),{tStart:M,tEnd:Y}=$e({top:f.top,height:f.height},Q(),De(),Te,Ae);return re(q(Q(),M,Y,l))}return {destroy(){v.forEach(f=>{f.classList.remove(t),f.style.removeProperty("--ssd-len"),f.style.animationPlayState="";}),w.remove();},replay(){u=false,h=-1,v.forEach(i);},pause(){u=true,v.forEach(f=>{f.style.animationPlayState="paused";});},resume(){u&&(u=false,v.forEach(f=>{f.style.animationPlayState="running";}));},seek(f){let M=Math.min(1,Math.max(0,f));h=M,u=true,v.forEach((Y,Ce)=>{Y.classList.remove(t),Y.style.strokeDashoffset=y==="reverse"?`${g[Ce]*M}`:`${g[Ce]*(1-M)}`,d&&(Y.style.opacity=y==="reverse"?`${1-M}`:`${M}`);});},getProgress(){return c()}}}if(Xe())return je();Pe();function ue(){if(!ne||z)return;let t=performance.now(),o=Q(),a=l;if(te!==false){let i=t-Me,u=i>0?Math.abs(o-(le<0?o:le))/i:0;a=l*Math.max(.2,1+u*(typeof te=="number"?te:1)*.04);}le=o,Me=t;let p=Z?se===-1||o>=se?"forward":"reverse":y;se=o;let B=I-F,w=true;if(W){let i=re(q(o,F,I,a));X&&!Z&&(A=Math.max(A,i),i=A),oe=i,e.style.setProperty("--scroll-draw-progress",String(i));let u=p==="reverse"?1-i:i;e.style.clipPath=_(u),de?.(i),!G&&q(o,F,I,a)>0&&(G=true,ye?.()),i>=1&&!P?(P=true,J?.(),K<(j==="infinite"?1/0:j??0)&&(K++,ie=setTimeout(()=>{A=-1,G=false,P=false,e.style.clipPath=_(0);},ke))):i<1&&!X&&(P=false),N=requestAnimationFrame(ue);return}if(v.forEach((i,u)=>{let h=u*U*B,c=re(q(o,F+h,I+h,a));X&&!Z&&(A=Math.max(A,c),c=A),oe=c,i.style.strokeDashoffset=p==="reverse"?`${g[u]*c}`:`${g[u]*(1-c)}`,d&&(i.style.opacity=p==="reverse"?`${1-c}`:`${c}`),C&&$?i.style.stroke=Ee(C,$,c):$&&(i.style.stroke=$),E!==null&&x!==null?i.style.strokeWidth=`${E+(x-E)*c}`:x!==null&&(i.style.strokeWidth=`${x}`),k!==null&&T!==null?i.style.fillOpacity=`${k+(T-k)*c}`:T!==null&&(i.style.fillOpacity=`${T}`),L&&i.tagName.toLowerCase()==="path"&&O[u]&&i.setAttribute("d",He(O[u],L,c)),u===0&&(de?.(c),e.style.setProperty("--scroll-draw-progress",String(c))),c<1&&(w=false);}),ee){let i=re(q(o,F,I,a));for(let u in ee){let h=parseFloat(u);i>=h&&!ae.has(h)&&(ae.add(h),ee[u]?.());}}!G&&q(o,F,I,a)>0&&(G=true,ye?.()),w&&!P?(P=true,J?.(),K<(j==="infinite"?1/0:j??0)&&(K++,ie=setTimeout(()=>{A=-1,G=false,P=false,ae.clear(),Le();},ke))):!w&&!X&&(P=false),N=requestAnimationFrame(ue);}let he=new IntersectionObserver(t=>{t.forEach(o=>{ne=o.isIntersecting,ne&&!z?N=requestAnimationFrame(ue):cancelAnimationFrame(N);});},{root:b??null,threshold:Be,rootMargin:qe}),be;function fe(){clearTimeout(be),be=setTimeout(()=>{v.forEach((t,o)=>{g[o]=Se(t),t.style.strokeDasharray=`${g[o]}`;}),Pe();},150);}return window.addEventListener("resize",fe),window.addEventListener("orientationchange",fe),me>0?setTimeout(()=>he.observe(e),me):he.observe(e),{destroy(){cancelAnimationFrame(N),clearTimeout(ie),he.disconnect(),window.removeEventListener("resize",fe),window.removeEventListener("orientationchange",fe),clearTimeout(be),ge?.remove();},replay(){A=-1,se=-1,le=-1,G=false,P=false,K=0,z=false,ae.clear(),clearTimeout(ie),Le();},pause(){z=true,cancelAnimationFrame(N);},resume(){z&&(z=false,ne&&(N=requestAnimationFrame(ue)));},seek(t){let o=Math.min(1,Math.max(0,t));oe=o,A=o,z=true,cancelAnimationFrame(N),Ue(o,y);},getProgress(){return oe}}}function at(e={}){let r=vue.ref(null);return vue.onMounted(()=>{if(!r.value)return;let s=xe(r.value,e);vue.onUnmounted(()=>s.destroy());}),r}var lt=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 s=vue.ref(null);return vue.onMounted(()=>{if(!s.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 l=xe(s.value,n);vue.onUnmounted(()=>l.destroy());}),()=>vue.h("div",{ref:s},r.default?.())}});exports.ScrollDraw=lt;exports.useScrollDraw=at;
+'use strict';var vue=require('vue');function et({bounces:e=3,decay:r=.5}={}){let n=Math.max(1,Math.round(e)),s=Math.max(.01,Math.min(.99,r)),m=Math.sqrt(s),p=0,b=[];for(let u=0;u<n;u++){let g=Math.pow(m,u);b.push(g),p+=g;}let $=[0],R=0;for(let u=0;u<n;u++)R+=b[u]/p,$.push(R);return u=>{if(u<=0)return 0;if(u>=1)return 1;for(let g=0;g<n;g++)if(u<=$[g+1]){let se=(u-$[g])/($[g+1]-$[g]);if(g===0)return se*(2-se);let P=1-Math.pow(s,g);return P+(1-P)*(2*se-1)*(2*se-1)}return 1}}function tt({amplitude:e=1,period:r=.4}={}){let n=Math.max(1,e),s=Math.max(.1,r),m=n<=1?s/4:s/(2*Math.PI)*Math.asin(1/n);return p=>p<=0?0:p>=1?1:n*Math.pow(2,-10*p)*Math.sin((p-m)*(2*Math.PI)/s)+1}var Ae={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),bounce:et(),elastic:tt()};function ke(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[n="top",s="bottom"]=r.split(/\s+/).filter(Boolean);return {element:n,viewport:s}}function We(e,r,n,s){switch(s){case "top":return e+n;case "center":return e+n+r/2;case "bottom":return e+n+r;default:return e+n}}function ze(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 we(e){let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),s=parseFloat(e.getAttribute("height")??"0");return 2*(n+s)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function rt(e,r,n){return Math.min(n,Math.max(r,e))}function ne(e,r,n,s){return n===r?0:rt((e-r)/(n-r)*s,0,1)}function De(e,r,n,s,m){let p=We(e.top,e.height,r,s.element)-ze(s.viewport,n),b=We(e.top,e.height,r,m.element)-ze(m.viewport,n);return {tStart:p,tEnd:b}}function qe(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 s=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return s?[parseInt(s[1]),parseInt(s[2]),parseInt(s[3])]:null}function ve(e,r,n){let s=qe(e),m=qe(r);return !s||!m?e:`rgb(${Math.round(s[0]+(m[0]-s[0])*n)},${Math.round(s[1]+(m[1]-s[1])*n)},${Math.round(s[2]+(m[2]-s[2])*n)})`}function Ve(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}var Be={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},nt=0;function st(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function ot(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?Ve("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&Ve("Element has a fill \u2014 it may obscure the stroke animation.",e);}function it(e,r,n){let s=document.createElement("div");s.setAttribute("data-svg-scroll-draw-debug",""),s.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 m(){let p=n==="x"?window.scrollX:window.scrollY,b=e-p,$=r-p,R=n==="x";s.innerHTML=`
+      <div style="position:absolute;${R?`left:${b}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${b}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;${R?`left:${$}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${$}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(s),window.addEventListener("scroll",m,{passive:true}),m(),s}function Pe(e,r,n){let s=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),m=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,p=>{let b=parseFloat(p),$=s[m++]??b;return String(+(b+($-b)*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:s="path, polyline, line, polygon, rect, circle",speed:m=1,fade:p=false,easing:b="linear",trigger:$={},stagger:R=0,direction:u="forward",once:g=false,debug:se=false,axis:P="y",scrollContainer:Ee,autoReverse:ce=false,delay:ae=0,strokeColor:j,strokeWidth:J,fillOpacity:K,waypoints:Q,velocityScale:fe=false,threshold:Fe=0,rootMargin:Ce="0px",repeat:Y=0,repeatDelay:$e=0,morphTo:N,clip:xe,autoplay:Xe=false,duration:je=1e3,native:Je=true,onProgress:le,onStart:me,onComplete:oe}=r,B=xe===true?"left":typeof xe=="string"?xe:false,Z=typeof b=="function"?b:Ae[b]??Ae.linear,Oe=ke($.start??"top bottom"),Ie=ke($.end??"bottom top"),L=typeof Ee=="string"?document.querySelector(Ee):Ee??null,H=Array.isArray(j)?j[0]:null,M=Array.isArray(j)?j[1]:typeof j=="string"?j:null,F=Array.isArray(J)?J[0]:null,T=Array.isArray(J)?J[1]:typeof J=="number"?J:null,C=Array.isArray(K)?K[0]:null,A=Array.isArray(K)?K[1]:typeof K=="number"?K:null;function ee(t){let o=t*100;switch(B){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 x=B?[]:Array.from(e.querySelectorAll(s)),v=[],W=[],G=0,_=0,S=false,I=false,E=0,pe=false,z=-1,de=-1,k=false,te=0,V=0,U,Se=null,X=new Set,ye=-1,Re=performance.now();function ue(){return L?P==="x"?L.scrollLeft:L.scrollTop:P==="x"?window.scrollX:window.scrollY}function Ne(){return L?P==="x"?L.clientWidth:L.clientHeight:P==="x"?window.innerWidth:window.innerHeight}function He(){let t=e.getBoundingClientRect(),o,l,h;if(L){let D=L.getBoundingClientRect();o=P==="x"?t.left-D.left+L.scrollLeft:t.top-D.top+L.scrollTop,l=P==="x"?t.width:t.height,h=ue();}else o=P==="x"?t.left:t.top,l=P==="x"?t.width:t.height,h=ue();let O=De({top:o,height:l},h,Ne(),Oe,Ie);G=O.tStart,_=O.tEnd,se&&process.env.NODE_ENV!=="production"&&(Se?.remove(),Se=it(G,_,P));}function Ke(t,o){if(e.style.setProperty("--scroll-draw-progress",String(t)),B){let l=o==="reverse"?1-t:t;e.style.clipPath=ee(l);return}x.forEach((l,h)=>{l.style.strokeDashoffset=o==="reverse"?`${v[h]*t}`:`${v[h]*(1-t)}`,p&&(l.style.opacity=o==="reverse"?`${1-t}`:`${t}`),H&&M?l.style.stroke=ve(H,M,t):M&&(l.style.stroke=M),F!==null&&T!==null?l.style.strokeWidth=`${F+(T-F)*t}`:T!==null&&(l.style.strokeWidth=`${T}`),C!==null&&A!==null?l.style.fillOpacity=`${C+(A-C)*t}`:A!==null&&(l.style.fillOpacity=`${A}`),N&&l.tagName.toLowerCase()==="path"&&W[h]&&l.setAttribute("d",Pe(W[h],N,t));});}function ge(){if(e.style.setProperty("--scroll-draw-progress","0"),B){e.style.clipPath=ee(0);return}x.forEach((t,o)=>{t.style.strokeDasharray=`${v[o]}`,t.style.strokeDashoffset=u==="reverse"?"0":`${v[o]}`,p?t.style.opacity=u==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),F!==null&&(t.style.strokeWidth=`${F}`),C!==null&&(t.style.fillOpacity=`${C}`),N&&t.tagName.toLowerCase()==="path"&&W[o]&&t.setAttribute("d",W[o]);});}if(x.forEach(t=>{ot(t);let o=we(t);v.push(o),t.tagName.toLowerCase()==="path"?W.push(t.getAttribute("d")??""):W.push(""),n?(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=u==="reverse"?`${o}`:"0",p&&(t.style.opacity="1"),M&&(t.style.stroke=M),T!==null&&(t.style.strokeWidth=`${T}`),A!==null&&(t.style.fillOpacity=`${A}`),N&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",N)):(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=u==="reverse"?"0":`${o}`,p?t.style.opacity=u==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),F!==null&&(t.style.strokeWidth=`${F}`),C!==null&&(t.style.fillOpacity=`${C}`));}),B){if(n)return e.style.clipPath=ee(1),oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=ee(0);}else if(n)return oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function Qe(){return !(Je===false||!st()||!x.length||typeof b!="string"||!(b in Be)||B||P!=="y"||L||m!==1||R!==0||g||ce||fe!==false||N||Q||Y||ae>0||le||me||oe||j!=null||J!=null||K!=null||($.start??"top bottom").trim()!=="top bottom"||($.end??"bottom top").trim()!=="bottom top")}function Ye(){let t=`svg-scroll-draw-${++nt}`,o=u==="reverse"?"0":"var(--ssd-len)",l=u==="reverse"?"var(--ssd-len)":"0",h=`stroke-dashoffset:${o};`,O=`stroke-dashoffset:${l};`;p&&(h+=`opacity:${u==="reverse"?1:0};`,O+=`opacity:${u==="reverse"?0:1};`);let D=document.createElement("style");D.setAttribute("data-svg-scroll-draw",""),D.textContent=`@keyframes ${t}{from{${h}}to{${O}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Be[b]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(D);function a(i,f){i.style.setProperty("--ssd-len",String(v[f])),i.style.strokeDasharray=`${v[f]}`,i.style.strokeDashoffset="",i.style.opacity="",i.style.animationPlayState="",i.classList.add(t);}x.forEach(a);let d=false,w=-1;function c(){if(w>=0)return w;let i=e.getBoundingClientRect(),{tStart:f,tEnd:y}=De({top:i.top,height:i.height},ue(),Ne(),Oe,Ie);return Z(ne(ue(),f,y,m))}return {destroy(){x.forEach(i=>{i.classList.remove(t),i.style.removeProperty("--ssd-len"),i.style.animationPlayState="";}),D.remove();},replay(){d=false,w=-1,x.forEach(a);},pause(){d=true,x.forEach(i=>{i.style.animationPlayState="paused";});},resume(){d&&(d=false,x.forEach(i=>{i.style.animationPlayState="running";}));},seek(i){let f=Math.min(1,Math.max(0,i));w=f,d=true,x.forEach((y,re)=>{y.classList.remove(t),y.style.strokeDashoffset=u==="reverse"?`${v[re]*f}`:`${v[re]*(1-f)}`,p&&(y.style.opacity=u==="reverse"?`${1-f}`:`${f}`);});},getProgress(){return c()}}}if(Qe())return Ye();function Ze(){let t=Math.max(1,je),o=0,l=0;function h(c){let i=true;if(B){let f=Math.min(1,Math.max(0,c/t)),y=Z(f);te=y,e.style.setProperty("--scroll-draw-progress",String(y)),e.style.clipPath=ee(u==="reverse"?1-y:y),le?.(y),f<1&&(i=false);}else x.forEach((f,y)=>{let re=y*R*t,ie=Math.min(1,Math.max(0,(c-re)/t)),q=Z(ie);f.style.strokeDashoffset=u==="reverse"?`${v[y]*q}`:`${v[y]*(1-q)}`,p&&(f.style.opacity=u==="reverse"?`${1-q}`:`${q}`),H&&M?f.style.stroke=ve(H,M,q):M&&(f.style.stroke=M),F!==null&&T!==null?f.style.strokeWidth=`${F+(T-F)*q}`:T!==null&&(f.style.strokeWidth=`${T}`),C!==null&&A!==null?f.style.fillOpacity=`${C+(A-C)*q}`:A!==null&&(f.style.fillOpacity=`${A}`),N&&f.tagName.toLowerCase()==="path"&&W[y]&&f.setAttribute("d",Pe(W[y],N,q)),y===0&&(le?.(q),e.style.setProperty("--scroll-draw-progress",String(q))),ie<1&&(i=false);});if(Q){let f=Math.min(1,Math.max(0,c/t)),y=Z(f);for(let re in Q){let ie=parseFloat(re);y>=ie&&!X.has(ie)&&(X.add(ie),Q[re]?.());}}return i}function O(c){if(k)return;let i=c-o;I||(I=true,me?.());let f=h(i);if(f&&!S){S=true,h(t*(1+Math.max(0,x.length-1)*R)),oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,U=setTimeout(()=>{o=performance.now(),I=false,S=false,X.clear(),ge(),E=requestAnimationFrame(O);},$e));return}f||(E=requestAnimationFrame(O));}function D(){cancelAnimationFrame(E),clearTimeout(U),o=performance.now(),l=0,k=false,I=false,S=false,V=0,X.clear(),ge(),E=requestAnimationFrame(O);}let a=new IntersectionObserver(c=>{c.forEach(i=>{i.isIntersecting&&!(g&&S)?D():!i.isIntersecting&&!g&&!S&&(cancelAnimationFrame(E),clearTimeout(U),o=null);});},{root:L??null,threshold:Fe,rootMargin:Ce}),d;function w(){clearTimeout(d),d=setTimeout(()=>{x.forEach((c,i)=>{v[i]=we(c),c.style.strokeDasharray=`${v[i]}`;});},150);}return window.addEventListener("resize",w),window.addEventListener("orientationchange",w),ae>0?setTimeout(()=>a.observe(e),ae):a.observe(e),{destroy(){cancelAnimationFrame(E),clearTimeout(U),a.disconnect(),window.removeEventListener("resize",w),window.removeEventListener("orientationchange",w),clearTimeout(d);},replay(){V=0,D();},pause(){k||(k=true,l=performance.now()-o,cancelAnimationFrame(E));},resume(){k&&(k=false,o=performance.now()-l,E=requestAnimationFrame(O));},seek(c){let i=Math.min(1,Math.max(0,c));te=i,k=true,l=i*t,o=performance.now()-l,cancelAnimationFrame(E),h(l);},getProgress(){return te}}}if(Xe)return Ze();He();function he(){if(!pe||k)return;let t=performance.now(),o=ue(),l=m;if(fe!==false){let a=t-Re,d=a>0?Math.abs(o-(ye<0?o:ye))/a:0;l=m*Math.max(.2,1+d*(typeof fe=="number"?fe:1)*.04);}ye=o,Re=t;let h=ce?de===-1||o>=de?"forward":"reverse":u;de=o;let O=_-G,D=true;if(B){let a=Z(ne(o,G,_,l));g&&!ce&&(z=Math.max(z,a),a=z),te=a,e.style.setProperty("--scroll-draw-progress",String(a));let d=h==="reverse"?1-a:a;e.style.clipPath=ee(d),le?.(a),!I&&ne(o,G,_,l)>0&&(I=true,me?.()),a>=1&&!S?(S=true,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,U=setTimeout(()=>{z=-1,I=false,S=false,e.style.clipPath=ee(0);},$e))):a<1&&!g&&(S=false),E=requestAnimationFrame(he);return}if(x.forEach((a,d)=>{let w=d*R*O,c=Z(ne(o,G+w,_+w,l));g&&!ce&&(z=Math.max(z,c),c=z),te=c,a.style.strokeDashoffset=h==="reverse"?`${v[d]*c}`:`${v[d]*(1-c)}`,p&&(a.style.opacity=h==="reverse"?`${1-c}`:`${c}`),H&&M?a.style.stroke=ve(H,M,c):M&&(a.style.stroke=M),F!==null&&T!==null?a.style.strokeWidth=`${F+(T-F)*c}`:T!==null&&(a.style.strokeWidth=`${T}`),C!==null&&A!==null?a.style.fillOpacity=`${C+(A-C)*c}`:A!==null&&(a.style.fillOpacity=`${A}`),N&&a.tagName.toLowerCase()==="path"&&W[d]&&a.setAttribute("d",Pe(W[d],N,c)),d===0&&(le?.(c),e.style.setProperty("--scroll-draw-progress",String(c))),c<1&&(D=false);}),Q){let a=Z(ne(o,G,_,l));for(let d in Q){let w=parseFloat(d);a>=w&&!X.has(w)&&(X.add(w),Q[d]?.());}}!I&&ne(o,G,_,l)>0&&(I=true,me?.()),D&&!S?(S=true,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,U=setTimeout(()=>{z=-1,I=false,S=false,X.clear(),ge();},$e))):!D&&!g&&(S=false),E=requestAnimationFrame(he);}let Me=new IntersectionObserver(t=>{t.forEach(o=>{pe=o.isIntersecting,pe&&!k?E=requestAnimationFrame(he):cancelAnimationFrame(E);});},{root:L??null,threshold:Fe,rootMargin:Ce}),Te;function be(){clearTimeout(Te),Te=setTimeout(()=>{x.forEach((t,o)=>{v[o]=we(t),t.style.strokeDasharray=`${v[o]}`;}),He();},150);}return window.addEventListener("resize",be),window.addEventListener("orientationchange",be),ae>0?setTimeout(()=>Me.observe(e),ae):Me.observe(e),{destroy(){cancelAnimationFrame(E),clearTimeout(U),Me.disconnect(),window.removeEventListener("resize",be),window.removeEventListener("orientationchange",be),clearTimeout(Te),Se?.remove();},replay(){z=-1,de=-1,ye=-1,I=false,S=false,V=0,k=false,X.clear(),clearTimeout(U),ge();},pause(){k=true,cancelAnimationFrame(E);},resume(){k&&(k=false,pe&&(E=requestAnimationFrame(he)));},seek(t){let o=Math.min(1,Math.max(0,t));te=o,z=o,k=true,cancelAnimationFrame(E),Ke(o,u);},getProgress(){return te}}}function dt(e={}){let r=vue.ref(null);return vue.onMounted(()=>{if(!r.value)return;let n=Le(r.value,e);vue.onUnmounted(()=>n.destroy());}),r}var yt=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 n=vue.ref(null);return vue.onMounted(()=>{if(!n.value)return;let s={};e.selector!=null&&(s.selector=e.selector),e.speed!=null&&(s.speed=e.speed),e.fade!=null&&(s.fade=e.fade),e.stagger!=null&&(s.stagger=e.stagger),e.easing!=null&&(s.easing=e.easing),e.direction!=null&&(s.direction=e.direction),e.trigger!=null&&(s.trigger=e.trigger),e.once!=null&&(s.once=e.once),e.debug!=null&&(s.debug=e.debug),e.onProgress!=null&&(s.onProgress=e.onProgress),e.onStart!=null&&(s.onStart=e.onStart),e.onComplete!=null&&(s.onComplete=e.onComplete);let m=Le(n.value,s);vue.onUnmounted(()=>m.destroy());}),()=>vue.h("div",{ref:n},r.default?.())}});exports.ScrollDraw=yt;exports.useScrollDraw=dt;

package/dist/vue/index.d.mts

@@ -1,6 +1,6 @@
 import * as vue from 'vue';
 
-type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
 interface TriggerConfig {
     start?: string;
     end?: string;
@@ -62,6 +62,25 @@ interface ScrollDrawOptions {
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
+    /**
+     * Trigger the animation when the element enters the viewport instead of
+     * tying it to scroll position. The draw runs over `duration` milliseconds,
+     * replaying each time the element re-enters the viewport (use `once: true`
+     * to play only the first time).
+     *
+     * All visual options work in autoplay mode — `easing`, `stagger`, `fade`,
+     * `strokeColor`, `strokeWidth`, `fillOpacity`, `clip`, `morphTo`, `waypoints`,
+     * `repeat`, `repeatDelay`, `onStart`, `onComplete`, `onProgress`, etc.
+     *
+     * The full instance API (`pause`, `resume`, `seek`, `replay`, `getProgress`)
+     * also works — `seek(0.5)` pauses at 50% of the duration.
+     */
+    autoplay?: boolean;
+    /**
+     * Duration of the autoplay animation in milliseconds. Only used when
+     * `autoplay: true`. Default `1000`.
+     */
+    duration?: number;
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and