svg-scroll-draw 1.0.0 → 1.2.0

package/dist/solid/index.cjs

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

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,20 @@ interface ScrollDrawOptions {
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
+    /**
+     * Use the browser's native CSS scroll-driven animation
+     * (`animation-timeline: view()`) when the configuration is simple enough and
+     * the browser supports it. This runs the draw entirely on the compositor —
+     * zero per-frame JavaScript, zero scroll/resize listeners.
+     *
+     * Falls back to the JS engine automatically when unsupported or when the
+     * config uses a feature native CSS can't express (callbacks, stagger, morph,
+     * velocity scaling, custom triggers, `once`, custom easing functions, etc.).
+     *
+     * - `undefined` / `true` (default): use native when eligible.
+     * - `false`: always use the JS engine.
+     */
+    native?: boolean;
 }
 interface ScrollDrawInstance {
     destroy: () => void;

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,20 @@ interface ScrollDrawOptions {
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
+    /**
+     * Use the browser's native CSS scroll-driven animation
+     * (`animation-timeline: view()`) when the configuration is simple enough and
+     * the browser supports it. This runs the draw entirely on the compositor —
+     * zero per-frame JavaScript, zero scroll/resize listeners.
+     *
+     * Falls back to the JS engine automatically when unsupported or when the
+     * config uses a feature native CSS can't express (callbacks, stagger, morph,
+     * velocity scaling, custom triggers, `once`, custom easing functions, etc.).
+     *
+     * - `undefined` / `true` (default): use native when eligible.
+     * - `false`: always use the JS engine.
+     */
+    native?: boolean;
 }
 interface ScrollDrawInstance {
     destroy: () => void;

package/dist/solid/index.mjs

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

package/dist/svelte/index.cjs

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

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,20 @@ interface ScrollDrawOptions {
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
+    /**
+     * Use the browser's native CSS scroll-driven animation
+     * (`animation-timeline: view()`) when the configuration is simple enough and
+     * the browser supports it. This runs the draw entirely on the compositor —
+     * zero per-frame JavaScript, zero scroll/resize listeners.
+     *
+     * Falls back to the JS engine automatically when unsupported or when the
+     * config uses a feature native CSS can't express (callbacks, stagger, morph,
+     * velocity scaling, custom triggers, `once`, custom easing functions, etc.).
+     *
+     * - `undefined` / `true` (default): use native when eligible.
+     * - `false`: always use the JS engine.
+     */
+    native?: boolean;
 }
 interface ScrollDrawInstance {
     destroy: () => void;

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,20 @@ interface ScrollDrawOptions {
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
+    /**
+     * Use the browser's native CSS scroll-driven animation
+     * (`animation-timeline: view()`) when the configuration is simple enough and
+     * the browser supports it. This runs the draw entirely on the compositor —
+     * zero per-frame JavaScript, zero scroll/resize listeners.
+     *
+     * Falls back to the JS engine automatically when unsupported or when the
+     * config uses a feature native CSS can't express (callbacks, stagger, morph,
+     * velocity scaling, custom triggers, `once`, custom easing functions, etc.).
+     *
+     * - `undefined` / `true` (default): use native when eligible.
+     * - `false`: always use the JS engine.
+     */
+    native?: boolean;
 }
 interface ScrollDrawInstance {
     destroy: () => void;

package/dist/svelte/index.mjs

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