svg-scroll-draw 1.1.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/dist/angular/index.cjs +3 -3
  2. package/dist/angular/index.d.mts +20 -1
  3. package/dist/angular/index.d.ts +20 -1
  4. package/dist/angular/index.mjs +3 -3
  5. package/dist/astro/index.cjs +3 -3
  6. package/dist/astro/index.d.mts +20 -1
  7. package/dist/astro/index.d.ts +20 -1
  8. package/dist/astro/index.mjs +3 -3
  9. package/dist/cdn/svg-scroll-draw.global.js +3 -3
  10. package/dist/group/index.cjs +3 -3
  11. package/dist/group/index.d.mts +20 -1
  12. package/dist/group/index.d.ts +20 -1
  13. package/dist/group/index.mjs +3 -3
  14. package/dist/index.cjs +3 -3
  15. package/dist/index.d.mts +50 -2
  16. package/dist/index.d.ts +50 -2
  17. package/dist/index.mjs +3 -3
  18. package/dist/nuxt/index.cjs +3 -3
  19. package/dist/nuxt/index.d.mts +20 -1
  20. package/dist/nuxt/index.d.ts +20 -1
  21. package/dist/nuxt/index.mjs +3 -3
  22. package/dist/react/index.cjs +3 -3
  23. package/dist/react/index.d.mts +20 -1
  24. package/dist/react/index.d.ts +20 -1
  25. package/dist/react/index.mjs +3 -3
  26. package/dist/solid/index.cjs +3 -3
  27. package/dist/solid/index.d.mts +20 -1
  28. package/dist/solid/index.d.ts +20 -1
  29. package/dist/solid/index.mjs +3 -3
  30. package/dist/svelte/index.cjs +3 -3
  31. package/dist/svelte/index.d.mts +20 -1
  32. package/dist/svelte/index.d.ts +20 -1
  33. package/dist/svelte/index.mjs +3 -3
  34. package/dist/timeline/index.cjs +1 -1
  35. package/dist/timeline/index.d.mts +1 -1
  36. package/dist/timeline/index.d.ts +1 -1
  37. package/dist/timeline/index.mjs +1 -1
  38. package/dist/vue/index.cjs +3 -3
  39. package/dist/vue/index.d.mts +20 -1
  40. package/dist/vue/index.d.ts +20 -1
  41. package/dist/vue/index.mjs +3 -3
  42. package/dist/web-component/index.cjs +3 -3
  43. package/dist/web-component/index.mjs +3 -3
  44. package/package.json +6 -2
@@ -1,3 +1,3 @@
1
- 'use strict';var ve={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2)};function we(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[s="top",o="bottom"]=r.split(/\s+/).filter(Boolean);return {element:s,viewport:o}}function Ie(e,r,s,o){switch(o){case "top":return e+s;case "center":return e+s+r/2;case "bottom":return e+s+r;default:return e+s}}function Ce(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 s=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(s+o)}if(r==="circle"){let s=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*s}return e.getTotalLength()}function Ue(e,r,s){return Math.min(s,Math.max(r,e))}function B(e,r,s,o){return s===r?0:Ue((e-r)/(s-r)*o,0,1)}function Ee(e,r,s,o,f){let d=Ie(e.top,e.height,r,o.element)-Ce(o.viewport,s),p=Ie(e.top,e.height,r,f.element)-Ce(f.viewport,s);return {tStart:d,tEnd:p}}function Oe(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let s=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(s)return [parseInt(s[1],16),parseInt(s[2],16),parseInt(s[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function xe(e,r,s){let o=Oe(e),f=Oe(r);return !o||!f?e:`rgb(${Math.round(o[0]+(f[0]-o[0])*s)},${Math.round(o[1]+(f[1]-o[1])*s)},${Math.round(o[2]+(f[2]-o[2])*s)})`}function Fe(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}var Ne={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},je=0;function Je(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function Ke(e){let r=e.getAttribute("stroke"),s=e.getAttribute("fill");!r||r==="none"?Fe("Element has no stroke \u2014 path will not be visible.",e):s&&s!=="none"&&s!=="transparent"&&Fe("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Qe(e,r,s){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function f(){let d=s==="x"?window.scrollX:window.scrollY,p=e-d,L=r-d,X=s==="x";o.innerHTML=`
2
- <div style="position:absolute;${X?`left:${p}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${p}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
3
- <div style="position:absolute;${X?`left:${L}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${L}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(o),window.addEventListener("scroll",f,{passive:true}),f(),o}function Re(e,r,s){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),f=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,d=>{let p=parseFloat(d),L=o[f++]??p;return String(+(p+(L-p)*s).toFixed(4))})}function He(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let s=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:f=1,fade:d=false,easing:p="linear",trigger:L={},stagger:X=0,direction:y="forward",once:U=false,debug:We=false,axis:$="y",scrollContainer:ce,autoReverse:Z=false,delay:pe=0,strokeColor:R,strokeWidth:H,fillOpacity:V,waypoints:ee,velocityScale:te=false,threshold:Ge=0,rootMargin:ze="0px",repeat:j=0,repeatDelay:Se=0,morphTo:D,clip:me,native:qe=true,onProgress:de,onStart:ye,onComplete:J}=r,W=me===true?"left":typeof me=="string"?me:false,re=typeof p=="function"?p:ve[p]??ve.linear,ke=we(L.start??"top bottom"),Ae=we(L.end??"bottom top"),b=typeof ce=="string"?document.querySelector(ce):ce??null,I=Array.isArray(R)?R[0]:null,E=Array.isArray(R)?R[1]:typeof R=="string"?R:null,x=Array.isArray(H)?H[0]:null,S=Array.isArray(H)?H[1]:typeof H=="number"?H:null,k=Array.isArray(V)?V[0]:null,A=Array.isArray(V)?V[1]:typeof V=="number"?V:null;function _(t){let n=t*100;switch(W){case "right":return `inset(0 0 0 ${100-n}%)`;case "top":return `inset(0 0 ${100-n}% 0)`;case "bottom":return `inset(${100-n}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-n}% 0 0)`}}let v=W?[]:Array.from(e.querySelectorAll(o)),h=[],C=[],O=0,F=0,P=false,G=false,N=0,ne=false,T=-1,se=-1,z=false,oe=0,K=0,ie,he=null,ae=new Set,le=-1,Te=performance.now();function Q(){return b?$==="x"?b.scrollLeft:b.scrollTop:$==="x"?window.scrollX:window.scrollY}function Me(){return b?$==="x"?b.clientWidth:b.clientHeight:$==="x"?window.innerWidth:window.innerHeight}function Le(){let t=e.getBoundingClientRect(),n,a,m;if(b){let w=b.getBoundingClientRect();n=$==="x"?t.left-w.left+b.scrollLeft:t.top-w.top+b.scrollTop,a=$==="x"?t.width:t.height,m=Q();}else n=$==="x"?t.left:t.top,a=$==="x"?t.width:t.height,m=Q();let q=Ee({top:n,height:a},m,Me(),ke,Ae);O=q.tStart,F=q.tEnd,We&&process.env.NODE_ENV!=="production"&&(he?.remove(),he=Qe(O,F,$));}function Be(t,n){if(e.style.setProperty("--scroll-draw-progress",String(t)),W){let a=n==="reverse"?1-t:t;e.style.clipPath=_(a);return}v.forEach((a,m)=>{a.style.strokeDashoffset=n==="reverse"?`${h[m]*t}`:`${h[m]*(1-t)}`,d&&(a.style.opacity=n==="reverse"?`${1-t}`:`${t}`),I&&E?a.style.stroke=xe(I,E,t):E&&(a.style.stroke=E),x!==null&&S!==null?a.style.strokeWidth=`${x+(S-x)*t}`:S!==null&&(a.style.strokeWidth=`${S}`),k!==null&&A!==null?a.style.fillOpacity=`${k+(A-k)*t}`:A!==null&&(a.style.fillOpacity=`${A}`),D&&a.tagName.toLowerCase()==="path"&&C[m]&&a.setAttribute("d",Re(C[m],D,t));});}function Pe(){if(e.style.setProperty("--scroll-draw-progress","0"),W){e.style.clipPath=_(0);return}v.forEach((t,n)=>{t.style.strokeDasharray=`${h[n]}`,t.style.strokeDashoffset=y==="reverse"?"0":`${h[n]}`,d?t.style.opacity=y==="reverse"?"1":"0":t.style.opacity="",I&&(t.style.stroke=I),x!==null&&(t.style.strokeWidth=`${x}`),k!==null&&(t.style.fillOpacity=`${k}`),D&&t.tagName.toLowerCase()==="path"&&C[n]&&t.setAttribute("d",C[n]);});}if(v.forEach(t=>{Ke(t);let n=$e(t);h.push(n),t.tagName.toLowerCase()==="path"?C.push(t.getAttribute("d")??""):C.push(""),s?(t.style.strokeDasharray=`${n}`,t.style.strokeDashoffset=y==="reverse"?`${n}`:"0",d&&(t.style.opacity="1"),E&&(t.style.stroke=E),S!==null&&(t.style.strokeWidth=`${S}`),A!==null&&(t.style.fillOpacity=`${A}`),D&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",D)):(t.style.strokeDasharray=`${n}`,t.style.strokeDashoffset=y==="reverse"?"0":`${n}`,d?t.style.opacity=y==="reverse"?"1":"0":t.style.opacity="",I&&(t.style.stroke=I),x!==null&&(t.style.strokeWidth=`${x}`),k!==null&&(t.style.fillOpacity=`${k}`));}),W){if(s)return e.style.clipPath=_(1),J?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=_(0);}else if(s)return J?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function _e(){return !(qe===false||!Je()||!v.length||typeof p!="string"||!(p in Ne)||W||$!=="y"||b||f!==1||X!==0||U||Z||te!==false||D||ee||j||pe>0||de||ye||J||R!=null||H!=null||V!=null||(L.start??"top bottom").trim()!=="top bottom"||(L.end??"bottom top").trim()!=="bottom top")}function Xe(){let t=`svg-scroll-draw-${++je}`,n=y==="reverse"?"0":"var(--ssd-len)",a=y==="reverse"?"var(--ssd-len)":"0",m=`stroke-dashoffset:${n};`,q=`stroke-dashoffset:${a};`;d&&(m+=`opacity:${y==="reverse"?1:0};`,q+=`opacity:${y==="reverse"?0:1};`);let w=document.createElement("style");w.setAttribute("data-svg-scroll-draw",""),w.textContent=`@keyframes ${t}{from{${m}}to{${q}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Ne[p]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(w);function i(u,M){u.style.setProperty("--ssd-len",String(h[M])),u.style.strokeDasharray=`${h[M]}`,u.style.strokeDashoffset="",u.style.opacity="",u.style.animationPlayState="",u.classList.add(t);}v.forEach(i);let l=false,g=-1;function c(){if(g>=0)return g;let u=e.getBoundingClientRect(),{tStart:M,tEnd:Y}=Ee({top:u.top,height:u.height},Q(),Me(),ke,Ae);return re(B(Q(),M,Y,f))}return {destroy(){v.forEach(u=>{u.classList.remove(t),u.style.removeProperty("--ssd-len"),u.style.animationPlayState="";}),w.remove();},replay(){l=false,g=-1,v.forEach(i);},pause(){l=true,v.forEach(u=>{u.style.animationPlayState="paused";});},resume(){l&&(l=false,v.forEach(u=>{u.style.animationPlayState="running";}));},seek(u){let M=Math.min(1,Math.max(0,u));g=M,l=true,v.forEach((Y,De)=>{Y.classList.remove(t),Y.style.strokeDashoffset=y==="reverse"?`${h[De]*M}`:`${h[De]*(1-M)}`,d&&(Y.style.opacity=y==="reverse"?`${1-M}`:`${M}`);});},getProgress(){return c()}}}if(_e())return Xe();Le();function ue(){if(!ne||z)return;let t=performance.now(),n=Q(),a=f;if(te!==false){let i=t-Te,l=i>0?Math.abs(n-(le<0?n:le))/i:0;a=f*Math.max(.2,1+l*(typeof te=="number"?te:1)*.04);}le=n,Te=t;let m=Z?se===-1||n>=se?"forward":"reverse":y;se=n;let q=F-O,w=true;if(W){let i=re(B(n,O,F,a));U&&!Z&&(T=Math.max(T,i),i=T),oe=i,e.style.setProperty("--scroll-draw-progress",String(i));let l=m==="reverse"?1-i:i;e.style.clipPath=_(l),de?.(i),!G&&B(n,O,F,a)>0&&(G=true,ye?.()),i>=1&&!P?(P=true,J?.(),K<(j==="infinite"?1/0:j??0)&&(K++,ie=setTimeout(()=>{T=-1,G=false,P=false,e.style.clipPath=_(0);},Se))):i<1&&!U&&(P=false),N=requestAnimationFrame(ue);return}if(v.forEach((i,l)=>{let g=l*X*q,c=re(B(n,O+g,F+g,a));U&&!Z&&(T=Math.max(T,c),c=T),oe=c,i.style.strokeDashoffset=m==="reverse"?`${h[l]*c}`:`${h[l]*(1-c)}`,d&&(i.style.opacity=m==="reverse"?`${1-c}`:`${c}`),I&&E?i.style.stroke=xe(I,E,c):E&&(i.style.stroke=E),x!==null&&S!==null?i.style.strokeWidth=`${x+(S-x)*c}`:S!==null&&(i.style.strokeWidth=`${S}`),k!==null&&A!==null?i.style.fillOpacity=`${k+(A-k)*c}`:A!==null&&(i.style.fillOpacity=`${A}`),D&&i.tagName.toLowerCase()==="path"&&C[l]&&i.setAttribute("d",Re(C[l],D,c)),l===0&&(de?.(c),e.style.setProperty("--scroll-draw-progress",String(c))),c<1&&(w=false);}),ee){let i=re(B(n,O,F,a));for(let l in ee){let g=parseFloat(l);i>=g&&!ae.has(g)&&(ae.add(g),ee[l]?.());}}!G&&B(n,O,F,a)>0&&(G=true,ye?.()),w&&!P?(P=true,J?.(),K<(j==="infinite"?1/0:j??0)&&(K++,ie=setTimeout(()=>{T=-1,G=false,P=false,ae.clear(),Pe();},Se))):!w&&!U&&(P=false),N=requestAnimationFrame(ue);}let ge=new IntersectionObserver(t=>{t.forEach(n=>{ne=n.isIntersecting,ne&&!z?N=requestAnimationFrame(ue):cancelAnimationFrame(N);});},{root:b??null,threshold:Ge,rootMargin:ze}),be;function fe(){clearTimeout(be),be=setTimeout(()=>{v.forEach((t,n)=>{h[n]=$e(t),t.style.strokeDasharray=`${h[n]}`;}),Le();},150);}return window.addEventListener("resize",fe),window.addEventListener("orientationchange",fe),pe>0?setTimeout(()=>ge.observe(e),pe):ge.observe(e),{destroy(){cancelAnimationFrame(N),clearTimeout(ie),ge.disconnect(),window.removeEventListener("resize",fe),window.removeEventListener("orientationchange",fe),clearTimeout(be),he?.remove();},replay(){T=-1,se=-1,le=-1,G=false,P=false,K=0,z=false,ae.clear(),clearTimeout(ie),Pe();},pause(){z=true,cancelAnimationFrame(N);},resume(){z&&(z=false,ne&&(N=requestAnimationFrame(ue)));},seek(t){let n=Math.min(1,Math.max(0,t));oe=n,T=n,z=true,cancelAnimationFrame(N),Be(n,y);},getProgress(){return oe}}}var Ve=class{constructor(){this.instance=null;}init(r,s={}){return this.destroy(),this.instance=He(r,s),this}replay(){return this.instance?.replay(),this}destroy(){return this.instance?.destroy(),this.instance=null,this}};exports.ScrollDrawRef=Ve;
1
+ 'use strict';function Ye({bounces:e=3,decay:n=.5}={}){let s=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,n)),d=Math.sqrt(o),m=0,b=[];for(let u=0;u<s;u++){let h=Math.pow(d,u);b.push(h),m+=h;}let $=[0],N=0;for(let u=0;u<s;u++)N+=b[u]/m,$.push(N);return u=>{if(u<=0)return 0;if(u>=1)return 1;for(let h=0;h<s;h++)if(u<=$[h+1]){let se=(u-$[h])/($[h+1]-$[h]);if(h===0)return se*(2-se);let P=1-Math.pow(o,h);return P+(1-P)*(2*se-1)*(2*se-1)}return 1}}function Ze({amplitude:e=1,period:n=.4}={}){let s=Math.max(1,e),o=Math.max(.1,n),d=s<=1?o/4:o/(2*Math.PI)*Math.asin(1/s);return m=>m<=0?0:m>=1?1:s*Math.pow(2,-10*m)*Math.sin((m-d)*(2*Math.PI)/o)+1}var Se={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:Ye(),elastic:Ze()};function ke(e="top bottom"){let n=e.trim();if(/^\d+(\.\d+)?%$/.test(n))return {element:"top",viewport:n};let[s="top",o="bottom"]=n.split(/\s+/).filter(Boolean);return {element:s,viewport:o}}function He(e,n,s,o){switch(o){case "top":return e+s;case "center":return e+s+n/2;case "bottom":return e+s+n;default:return e+s}}function We(e,n){if(/^\d+(\.\d+)?%$/.test(e))return n*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return n/2;case "bottom":return n;default:return n}}function we(e){let n=e.tagName.toLowerCase();if(n==="rect"){let s=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(s+o)}if(n==="circle"){let s=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*s}return e.getTotalLength()}function et(e,n,s){return Math.min(s,Math.max(n,e))}function ne(e,n,s,o){return s===n?0:et((e-n)/(s-n)*o,0,1)}function Le(e,n,s,o,d){let m=He(e.top,e.height,n,o.element)-We(o.viewport,s),b=He(e.top,e.height,n,d.element)-We(d.viewport,s);return {tStart:m,tEnd:b}}function ze(e){let n=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(n)return [parseInt(n[1]+n[1],16),parseInt(n[2]+n[2],16),parseInt(n[3]+n[3],16)];let s=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(s)return [parseInt(s[1],16),parseInt(s[2],16),parseInt(s[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function ve(e,n,s){let o=ze(e),d=ze(n);return !o||!d?e:`rgb(${Math.round(o[0]+(d[0]-o[0])*s)},${Math.round(o[1]+(d[1]-o[1])*s)},${Math.round(o[2]+(d[2]-o[2])*s)})`}function qe(e,n){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,n);}var Ve={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},tt=0;function rt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function nt(e){let n=e.getAttribute("stroke"),s=e.getAttribute("fill");!n||n==="none"?qe("Element has no stroke \u2014 path will not be visible.",e):s&&s!=="none"&&s!=="transparent"&&qe("Element has a fill \u2014 it may obscure the stroke animation.",e);}function st(e,n,s){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function d(){let m=s==="x"?window.scrollX:window.scrollY,b=e-m,$=n-m,N=s==="x";o.innerHTML=`
2
+ <div style="position:absolute;${N?`left:${b}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${b}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
3
+ <div style="position:absolute;${N?`left:${$}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${$}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(o),window.addEventListener("scroll",d,{passive:true}),d(),o}function Pe(e,n,s){let o=(n.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),d=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,m=>{let b=parseFloat(m),$=o[d++]??b;return String(+(b+($-b)*s).toFixed(4))})}function Ge(e,n={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let s=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:d=1,fade:m=false,easing:b="linear",trigger:$={},stagger:N=0,direction:u="forward",once:h=false,debug:se=false,axis:P="y",scrollContainer:Ee,autoReverse:ce=false,delay:ae=0,strokeColor:j,strokeWidth:J,fillOpacity:K,waypoints:Q,velocityScale:fe=false,threshold:De=0,rootMargin:Ie="0px",repeat:Y=0,repeatDelay:$e=0,morphTo:R,clip:xe,autoplay:_e=false,duration:Xe=1e3,native:Ue=true,onProgress:le,onStart:me,onComplete:oe}=n,G=xe===true?"left":typeof xe=="string"?xe:false,Z=typeof b=="function"?b:Se[b]??Se.linear,Fe=ke($.start??"top bottom"),Ce=ke($.end??"bottom top"),D=typeof Ee=="string"?document.querySelector(Ee):Ee??null,H=Array.isArray(j)?j[0]:null,A=Array.isArray(j)?j[1]:typeof j=="string"?j:null,I=Array.isArray(J)?J[0]:null,T=Array.isArray(J)?J[1]:typeof J=="number"?J:null,F=Array.isArray(K)?K[0]:null,S=Array.isArray(K)?K[1]:typeof K=="number"?K:null;function ee(t){let r=t*100;switch(G){case "right":return `inset(0 0 0 ${100-r}%)`;case "top":return `inset(0 0 ${100-r}% 0)`;case "bottom":return `inset(${100-r}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-r}% 0 0)`}}let x=G?[]:Array.from(e.querySelectorAll(o)),v=[],W=[],B=0,_=0,M=false,O=false,E=0,pe=false,z=-1,de=-1,k=false,te=0,V=0,X,Me=null,U=new Set,ye=-1,Oe=performance.now();function ue(){return D?P==="x"?D.scrollLeft:D.scrollTop:P==="x"?window.scrollX:window.scrollY}function Ne(){return D?P==="x"?D.clientWidth:D.clientHeight:P==="x"?window.innerWidth:window.innerHeight}function Re(){let t=e.getBoundingClientRect(),r,l,g;if(D){let L=D.getBoundingClientRect();r=P==="x"?t.left-L.left+D.scrollLeft:t.top-L.top+D.scrollTop,l=P==="x"?t.width:t.height,g=ue();}else r=P==="x"?t.left:t.top,l=P==="x"?t.width:t.height,g=ue();let C=Le({top:r,height:l},g,Ne(),Fe,Ce);B=C.tStart,_=C.tEnd,se&&process.env.NODE_ENV!=="production"&&(Me?.remove(),Me=st(B,_,P));}function je(t,r){if(e.style.setProperty("--scroll-draw-progress",String(t)),G){let l=r==="reverse"?1-t:t;e.style.clipPath=ee(l);return}x.forEach((l,g)=>{l.style.strokeDashoffset=r==="reverse"?`${v[g]*t}`:`${v[g]*(1-t)}`,m&&(l.style.opacity=r==="reverse"?`${1-t}`:`${t}`),H&&A?l.style.stroke=ve(H,A,t):A&&(l.style.stroke=A),I!==null&&T!==null?l.style.strokeWidth=`${I+(T-I)*t}`:T!==null&&(l.style.strokeWidth=`${T}`),F!==null&&S!==null?l.style.fillOpacity=`${F+(S-F)*t}`:S!==null&&(l.style.fillOpacity=`${S}`),R&&l.tagName.toLowerCase()==="path"&&W[g]&&l.setAttribute("d",Pe(W[g],R,t));});}function he(){if(e.style.setProperty("--scroll-draw-progress","0"),G){e.style.clipPath=ee(0);return}x.forEach((t,r)=>{t.style.strokeDasharray=`${v[r]}`,t.style.strokeDashoffset=u==="reverse"?"0":`${v[r]}`,m?t.style.opacity=u==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),I!==null&&(t.style.strokeWidth=`${I}`),F!==null&&(t.style.fillOpacity=`${F}`),R&&t.tagName.toLowerCase()==="path"&&W[r]&&t.setAttribute("d",W[r]);});}if(x.forEach(t=>{nt(t);let r=we(t);v.push(r),t.tagName.toLowerCase()==="path"?W.push(t.getAttribute("d")??""):W.push(""),s?(t.style.strokeDasharray=`${r}`,t.style.strokeDashoffset=u==="reverse"?`${r}`:"0",m&&(t.style.opacity="1"),A&&(t.style.stroke=A),T!==null&&(t.style.strokeWidth=`${T}`),S!==null&&(t.style.fillOpacity=`${S}`),R&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",R)):(t.style.strokeDasharray=`${r}`,t.style.strokeDashoffset=u==="reverse"?"0":`${r}`,m?t.style.opacity=u==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),I!==null&&(t.style.strokeWidth=`${I}`),F!==null&&(t.style.fillOpacity=`${F}`));}),G){if(s)return e.style.clipPath=ee(1),oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=ee(0);}else if(s)return oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function Je(){return !(Ue===false||!rt()||!x.length||typeof b!="string"||!(b in Ve)||G||P!=="y"||D||d!==1||N!==0||h||ce||fe!==false||R||Q||Y||ae>0||le||me||oe||j!=null||J!=null||K!=null||($.start??"top bottom").trim()!=="top bottom"||($.end??"bottom top").trim()!=="bottom top")}function Ke(){let t=`svg-scroll-draw-${++tt}`,r=u==="reverse"?"0":"var(--ssd-len)",l=u==="reverse"?"var(--ssd-len)":"0",g=`stroke-dashoffset:${r};`,C=`stroke-dashoffset:${l};`;m&&(g+=`opacity:${u==="reverse"?1:0};`,C+=`opacity:${u==="reverse"?0:1};`);let L=document.createElement("style");L.setAttribute("data-svg-scroll-draw",""),L.textContent=`@keyframes ${t}{from{${g}}to{${C}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Ve[b]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(L);function a(i,f){i.style.setProperty("--ssd-len",String(v[f])),i.style.strokeDasharray=`${v[f]}`,i.style.strokeDashoffset="",i.style.opacity="",i.style.animationPlayState="",i.classList.add(t);}x.forEach(a);let p=false,w=-1;function c(){if(w>=0)return w;let i=e.getBoundingClientRect(),{tStart:f,tEnd:y}=Le({top:i.top,height:i.height},ue(),Ne(),Fe,Ce);return Z(ne(ue(),f,y,d))}return {destroy(){x.forEach(i=>{i.classList.remove(t),i.style.removeProperty("--ssd-len"),i.style.animationPlayState="";}),L.remove();},replay(){p=false,w=-1,x.forEach(a);},pause(){p=true,x.forEach(i=>{i.style.animationPlayState="paused";});},resume(){p&&(p=false,x.forEach(i=>{i.style.animationPlayState="running";}));},seek(i){let f=Math.min(1,Math.max(0,i));w=f,p=true,x.forEach((y,re)=>{y.classList.remove(t),y.style.strokeDashoffset=u==="reverse"?`${v[re]*f}`:`${v[re]*(1-f)}`,m&&(y.style.opacity=u==="reverse"?`${1-f}`:`${f}`);});},getProgress(){return c()}}}if(Je())return Ke();function Qe(){let t=Math.max(1,Xe),r=0,l=0;function g(c){let i=true;if(G){let f=Math.min(1,Math.max(0,c/t)),y=Z(f);te=y,e.style.setProperty("--scroll-draw-progress",String(y)),e.style.clipPath=ee(u==="reverse"?1-y:y),le?.(y),f<1&&(i=false);}else x.forEach((f,y)=>{let re=y*N*t,ie=Math.min(1,Math.max(0,(c-re)/t)),q=Z(ie);f.style.strokeDashoffset=u==="reverse"?`${v[y]*q}`:`${v[y]*(1-q)}`,m&&(f.style.opacity=u==="reverse"?`${1-q}`:`${q}`),H&&A?f.style.stroke=ve(H,A,q):A&&(f.style.stroke=A),I!==null&&T!==null?f.style.strokeWidth=`${I+(T-I)*q}`:T!==null&&(f.style.strokeWidth=`${T}`),F!==null&&S!==null?f.style.fillOpacity=`${F+(S-F)*q}`:S!==null&&(f.style.fillOpacity=`${S}`),R&&f.tagName.toLowerCase()==="path"&&W[y]&&f.setAttribute("d",Pe(W[y],R,q)),y===0&&(le?.(q),e.style.setProperty("--scroll-draw-progress",String(q))),ie<1&&(i=false);});if(Q){let f=Math.min(1,Math.max(0,c/t)),y=Z(f);for(let re in Q){let ie=parseFloat(re);y>=ie&&!U.has(ie)&&(U.add(ie),Q[re]?.());}}return i}function C(c){if(k)return;let i=c-r;O||(O=true,me?.());let f=g(i);if(f&&!M){M=true,g(t*(1+Math.max(0,x.length-1)*N)),oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{r=performance.now(),O=false,M=false,U.clear(),he(),E=requestAnimationFrame(C);},$e));return}f||(E=requestAnimationFrame(C));}function L(){cancelAnimationFrame(E),clearTimeout(X),r=performance.now(),l=0,k=false,O=false,M=false,V=0,U.clear(),he(),E=requestAnimationFrame(C);}let a=new IntersectionObserver(c=>{c.forEach(i=>{i.isIntersecting&&!(h&&M)?L():!i.isIntersecting&&!h&&!M&&(cancelAnimationFrame(E),clearTimeout(X),r=null);});},{root:D??null,threshold:De,rootMargin:Ie}),p;function w(){clearTimeout(p),p=setTimeout(()=>{x.forEach((c,i)=>{v[i]=we(c),c.style.strokeDasharray=`${v[i]}`;});},150);}return window.addEventListener("resize",w),window.addEventListener("orientationchange",w),ae>0?setTimeout(()=>a.observe(e),ae):a.observe(e),{destroy(){cancelAnimationFrame(E),clearTimeout(X),a.disconnect(),window.removeEventListener("resize",w),window.removeEventListener("orientationchange",w),clearTimeout(p);},replay(){V=0,L();},pause(){k||(k=true,l=performance.now()-r,cancelAnimationFrame(E));},resume(){k&&(k=false,r=performance.now()-l,E=requestAnimationFrame(C));},seek(c){let i=Math.min(1,Math.max(0,c));te=i,k=true,l=i*t,r=performance.now()-l,cancelAnimationFrame(E),g(l);},getProgress(){return te}}}if(_e)return Qe();Re();function ge(){if(!pe||k)return;let t=performance.now(),r=ue(),l=d;if(fe!==false){let a=t-Oe,p=a>0?Math.abs(r-(ye<0?r:ye))/a:0;l=d*Math.max(.2,1+p*(typeof fe=="number"?fe:1)*.04);}ye=r,Oe=t;let g=ce?de===-1||r>=de?"forward":"reverse":u;de=r;let C=_-B,L=true;if(G){let a=Z(ne(r,B,_,l));h&&!ce&&(z=Math.max(z,a),a=z),te=a,e.style.setProperty("--scroll-draw-progress",String(a));let p=g==="reverse"?1-a:a;e.style.clipPath=ee(p),le?.(a),!O&&ne(r,B,_,l)>0&&(O=true,me?.()),a>=1&&!M?(M=true,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{z=-1,O=false,M=false,e.style.clipPath=ee(0);},$e))):a<1&&!h&&(M=false),E=requestAnimationFrame(ge);return}if(x.forEach((a,p)=>{let w=p*N*C,c=Z(ne(r,B+w,_+w,l));h&&!ce&&(z=Math.max(z,c),c=z),te=c,a.style.strokeDashoffset=g==="reverse"?`${v[p]*c}`:`${v[p]*(1-c)}`,m&&(a.style.opacity=g==="reverse"?`${1-c}`:`${c}`),H&&A?a.style.stroke=ve(H,A,c):A&&(a.style.stroke=A),I!==null&&T!==null?a.style.strokeWidth=`${I+(T-I)*c}`:T!==null&&(a.style.strokeWidth=`${T}`),F!==null&&S!==null?a.style.fillOpacity=`${F+(S-F)*c}`:S!==null&&(a.style.fillOpacity=`${S}`),R&&a.tagName.toLowerCase()==="path"&&W[p]&&a.setAttribute("d",Pe(W[p],R,c)),p===0&&(le?.(c),e.style.setProperty("--scroll-draw-progress",String(c))),c<1&&(L=false);}),Q){let a=Z(ne(r,B,_,l));for(let p in Q){let w=parseFloat(p);a>=w&&!U.has(w)&&(U.add(w),Q[p]?.());}}!O&&ne(r,B,_,l)>0&&(O=true,me?.()),L&&!M?(M=true,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{z=-1,O=false,M=false,U.clear(),he();},$e))):!L&&!h&&(M=false),E=requestAnimationFrame(ge);}let Ae=new IntersectionObserver(t=>{t.forEach(r=>{pe=r.isIntersecting,pe&&!k?E=requestAnimationFrame(ge):cancelAnimationFrame(E);});},{root:D??null,threshold:De,rootMargin:Ie}),Te;function be(){clearTimeout(Te),Te=setTimeout(()=>{x.forEach((t,r)=>{v[r]=we(t),t.style.strokeDasharray=`${v[r]}`;}),Re();},150);}return window.addEventListener("resize",be),window.addEventListener("orientationchange",be),ae>0?setTimeout(()=>Ae.observe(e),ae):Ae.observe(e),{destroy(){cancelAnimationFrame(E),clearTimeout(X),Ae.disconnect(),window.removeEventListener("resize",be),window.removeEventListener("orientationchange",be),clearTimeout(Te),Me?.remove();},replay(){z=-1,de=-1,ye=-1,O=false,M=false,V=0,k=false,U.clear(),clearTimeout(X),he();},pause(){k=true,cancelAnimationFrame(E);},resume(){k&&(k=false,pe&&(E=requestAnimationFrame(ge)));},seek(t){let r=Math.min(1,Math.max(0,t));te=r,z=r,k=true,cancelAnimationFrame(E),je(r,u);},getProgress(){return te}}}var Be=class{constructor(){this.instance=null;}init(n,s={}){return this.destroy(),this.instance=Ge(n,s),this}replay(){return this.instance?.replay(),this}destroy(){return this.instance?.destroy(),this.instance=null,this}};exports.ScrollDrawRef=Be;
@@ -1,4 +1,4 @@
1
- type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
1
+ type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
2
2
  interface TriggerConfig {
3
3
  start?: string;
4
4
  end?: string;
@@ -60,6 +60,25 @@ interface ScrollDrawOptions {
60
60
  onProgress?: (alpha: number) => void;
61
61
  onStart?: () => void;
62
62
  onComplete?: () => void;
63
+ /**
64
+ * Trigger the animation when the element enters the viewport instead of
65
+ * tying it to scroll position. The draw runs over `duration` milliseconds,
66
+ * replaying each time the element re-enters the viewport (use `once: true`
67
+ * to play only the first time).
68
+ *
69
+ * All visual options work in autoplay mode — `easing`, `stagger`, `fade`,
70
+ * `strokeColor`, `strokeWidth`, `fillOpacity`, `clip`, `morphTo`, `waypoints`,
71
+ * `repeat`, `repeatDelay`, `onStart`, `onComplete`, `onProgress`, etc.
72
+ *
73
+ * The full instance API (`pause`, `resume`, `seek`, `replay`, `getProgress`)
74
+ * also works — `seek(0.5)` pauses at 50% of the duration.
75
+ */
76
+ autoplay?: boolean;
77
+ /**
78
+ * Duration of the autoplay animation in milliseconds. Only used when
79
+ * `autoplay: true`. Default `1000`.
80
+ */
81
+ duration?: number;
63
82
  /**
64
83
  * Use the browser's native CSS scroll-driven animation
65
84
  * (`animation-timeline: view()`) when the configuration is simple enough and
@@ -1,4 +1,4 @@
1
- type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
1
+ type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
2
2
  interface TriggerConfig {
3
3
  start?: string;
4
4
  end?: string;
@@ -60,6 +60,25 @@ interface ScrollDrawOptions {
60
60
  onProgress?: (alpha: number) => void;
61
61
  onStart?: () => void;
62
62
  onComplete?: () => void;
63
+ /**
64
+ * Trigger the animation when the element enters the viewport instead of
65
+ * tying it to scroll position. The draw runs over `duration` milliseconds,
66
+ * replaying each time the element re-enters the viewport (use `once: true`
67
+ * to play only the first time).
68
+ *
69
+ * All visual options work in autoplay mode — `easing`, `stagger`, `fade`,
70
+ * `strokeColor`, `strokeWidth`, `fillOpacity`, `clip`, `morphTo`, `waypoints`,
71
+ * `repeat`, `repeatDelay`, `onStart`, `onComplete`, `onProgress`, etc.
72
+ *
73
+ * The full instance API (`pause`, `resume`, `seek`, `replay`, `getProgress`)
74
+ * also works — `seek(0.5)` pauses at 50% of the duration.
75
+ */
76
+ autoplay?: boolean;
77
+ /**
78
+ * Duration of the autoplay animation in milliseconds. Only used when
79
+ * `autoplay: true`. Default `1000`.
80
+ */
81
+ duration?: number;
63
82
  /**
64
83
  * Use the browser's native CSS scroll-driven animation
65
84
  * (`animation-timeline: view()`) when the configuration is simple enough and
@@ -1,3 +1,3 @@
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)};function we(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[s="top",o="bottom"]=r.split(/\s+/).filter(Boolean);return {element:s,viewport:o}}function Ie(e,r,s,o){switch(o){case "top":return e+s;case "center":return e+s+r/2;case "bottom":return e+s+r;default:return e+s}}function Ce(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 s=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(s+o)}if(r==="circle"){let s=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*s}return e.getTotalLength()}function Ue(e,r,s){return Math.min(s,Math.max(r,e))}function B(e,r,s,o){return s===r?0:Ue((e-r)/(s-r)*o,0,1)}function Ee(e,r,s,o,f){let d=Ie(e.top,e.height,r,o.element)-Ce(o.viewport,s),p=Ie(e.top,e.height,r,f.element)-Ce(f.viewport,s);return {tStart:d,tEnd:p}}function Oe(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let s=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(s)return [parseInt(s[1],16),parseInt(s[2],16),parseInt(s[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function xe(e,r,s){let o=Oe(e),f=Oe(r);return !o||!f?e:`rgb(${Math.round(o[0]+(f[0]-o[0])*s)},${Math.round(o[1]+(f[1]-o[1])*s)},${Math.round(o[2]+(f[2]-o[2])*s)})`}function Fe(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}var Ne={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},je=0;function Je(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function Ke(e){let r=e.getAttribute("stroke"),s=e.getAttribute("fill");!r||r==="none"?Fe("Element has no stroke \u2014 path will not be visible.",e):s&&s!=="none"&&s!=="transparent"&&Fe("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Qe(e,r,s){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function f(){let d=s==="x"?window.scrollX:window.scrollY,p=e-d,L=r-d,X=s==="x";o.innerHTML=`
2
- <div style="position:absolute;${X?`left:${p}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${p}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
3
- <div style="position:absolute;${X?`left:${L}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${L}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(o),window.addEventListener("scroll",f,{passive:true}),f(),o}function Re(e,r,s){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),f=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,d=>{let p=parseFloat(d),L=o[f++]??p;return String(+(p+(L-p)*s).toFixed(4))})}function He(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let s=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:f=1,fade:d=false,easing:p="linear",trigger:L={},stagger:X=0,direction:y="forward",once:U=false,debug:We=false,axis:$="y",scrollContainer:ce,autoReverse:Z=false,delay:pe=0,strokeColor:R,strokeWidth:H,fillOpacity:V,waypoints:ee,velocityScale:te=false,threshold:Ge=0,rootMargin:ze="0px",repeat:j=0,repeatDelay:Se=0,morphTo:D,clip:me,native:qe=true,onProgress:de,onStart:ye,onComplete:J}=r,W=me===true?"left":typeof me=="string"?me:false,re=typeof p=="function"?p:ve[p]??ve.linear,ke=we(L.start??"top bottom"),Ae=we(L.end??"bottom top"),b=typeof ce=="string"?document.querySelector(ce):ce??null,I=Array.isArray(R)?R[0]:null,E=Array.isArray(R)?R[1]:typeof R=="string"?R:null,x=Array.isArray(H)?H[0]:null,S=Array.isArray(H)?H[1]:typeof H=="number"?H:null,k=Array.isArray(V)?V[0]:null,A=Array.isArray(V)?V[1]:typeof V=="number"?V:null;function _(t){let n=t*100;switch(W){case "right":return `inset(0 0 0 ${100-n}%)`;case "top":return `inset(0 0 ${100-n}% 0)`;case "bottom":return `inset(${100-n}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-n}% 0 0)`}}let v=W?[]:Array.from(e.querySelectorAll(o)),h=[],C=[],O=0,F=0,P=false,G=false,N=0,ne=false,T=-1,se=-1,z=false,oe=0,K=0,ie,he=null,ae=new Set,le=-1,Te=performance.now();function Q(){return b?$==="x"?b.scrollLeft:b.scrollTop:$==="x"?window.scrollX:window.scrollY}function Me(){return b?$==="x"?b.clientWidth:b.clientHeight:$==="x"?window.innerWidth:window.innerHeight}function Le(){let t=e.getBoundingClientRect(),n,a,m;if(b){let w=b.getBoundingClientRect();n=$==="x"?t.left-w.left+b.scrollLeft:t.top-w.top+b.scrollTop,a=$==="x"?t.width:t.height,m=Q();}else n=$==="x"?t.left:t.top,a=$==="x"?t.width:t.height,m=Q();let q=Ee({top:n,height:a},m,Me(),ke,Ae);O=q.tStart,F=q.tEnd,We&&process.env.NODE_ENV!=="production"&&(he?.remove(),he=Qe(O,F,$));}function Be(t,n){if(e.style.setProperty("--scroll-draw-progress",String(t)),W){let a=n==="reverse"?1-t:t;e.style.clipPath=_(a);return}v.forEach((a,m)=>{a.style.strokeDashoffset=n==="reverse"?`${h[m]*t}`:`${h[m]*(1-t)}`,d&&(a.style.opacity=n==="reverse"?`${1-t}`:`${t}`),I&&E?a.style.stroke=xe(I,E,t):E&&(a.style.stroke=E),x!==null&&S!==null?a.style.strokeWidth=`${x+(S-x)*t}`:S!==null&&(a.style.strokeWidth=`${S}`),k!==null&&A!==null?a.style.fillOpacity=`${k+(A-k)*t}`:A!==null&&(a.style.fillOpacity=`${A}`),D&&a.tagName.toLowerCase()==="path"&&C[m]&&a.setAttribute("d",Re(C[m],D,t));});}function Pe(){if(e.style.setProperty("--scroll-draw-progress","0"),W){e.style.clipPath=_(0);return}v.forEach((t,n)=>{t.style.strokeDasharray=`${h[n]}`,t.style.strokeDashoffset=y==="reverse"?"0":`${h[n]}`,d?t.style.opacity=y==="reverse"?"1":"0":t.style.opacity="",I&&(t.style.stroke=I),x!==null&&(t.style.strokeWidth=`${x}`),k!==null&&(t.style.fillOpacity=`${k}`),D&&t.tagName.toLowerCase()==="path"&&C[n]&&t.setAttribute("d",C[n]);});}if(v.forEach(t=>{Ke(t);let n=$e(t);h.push(n),t.tagName.toLowerCase()==="path"?C.push(t.getAttribute("d")??""):C.push(""),s?(t.style.strokeDasharray=`${n}`,t.style.strokeDashoffset=y==="reverse"?`${n}`:"0",d&&(t.style.opacity="1"),E&&(t.style.stroke=E),S!==null&&(t.style.strokeWidth=`${S}`),A!==null&&(t.style.fillOpacity=`${A}`),D&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",D)):(t.style.strokeDasharray=`${n}`,t.style.strokeDashoffset=y==="reverse"?"0":`${n}`,d?t.style.opacity=y==="reverse"?"1":"0":t.style.opacity="",I&&(t.style.stroke=I),x!==null&&(t.style.strokeWidth=`${x}`),k!==null&&(t.style.fillOpacity=`${k}`));}),W){if(s)return e.style.clipPath=_(1),J?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=_(0);}else if(s)return J?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function _e(){return !(qe===false||!Je()||!v.length||typeof p!="string"||!(p in Ne)||W||$!=="y"||b||f!==1||X!==0||U||Z||te!==false||D||ee||j||pe>0||de||ye||J||R!=null||H!=null||V!=null||(L.start??"top bottom").trim()!=="top bottom"||(L.end??"bottom top").trim()!=="bottom top")}function Xe(){let t=`svg-scroll-draw-${++je}`,n=y==="reverse"?"0":"var(--ssd-len)",a=y==="reverse"?"var(--ssd-len)":"0",m=`stroke-dashoffset:${n};`,q=`stroke-dashoffset:${a};`;d&&(m+=`opacity:${y==="reverse"?1:0};`,q+=`opacity:${y==="reverse"?0:1};`);let w=document.createElement("style");w.setAttribute("data-svg-scroll-draw",""),w.textContent=`@keyframes ${t}{from{${m}}to{${q}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Ne[p]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(w);function i(u,M){u.style.setProperty("--ssd-len",String(h[M])),u.style.strokeDasharray=`${h[M]}`,u.style.strokeDashoffset="",u.style.opacity="",u.style.animationPlayState="",u.classList.add(t);}v.forEach(i);let l=false,g=-1;function c(){if(g>=0)return g;let u=e.getBoundingClientRect(),{tStart:M,tEnd:Y}=Ee({top:u.top,height:u.height},Q(),Me(),ke,Ae);return re(B(Q(),M,Y,f))}return {destroy(){v.forEach(u=>{u.classList.remove(t),u.style.removeProperty("--ssd-len"),u.style.animationPlayState="";}),w.remove();},replay(){l=false,g=-1,v.forEach(i);},pause(){l=true,v.forEach(u=>{u.style.animationPlayState="paused";});},resume(){l&&(l=false,v.forEach(u=>{u.style.animationPlayState="running";}));},seek(u){let M=Math.min(1,Math.max(0,u));g=M,l=true,v.forEach((Y,De)=>{Y.classList.remove(t),Y.style.strokeDashoffset=y==="reverse"?`${h[De]*M}`:`${h[De]*(1-M)}`,d&&(Y.style.opacity=y==="reverse"?`${1-M}`:`${M}`);});},getProgress(){return c()}}}if(_e())return Xe();Le();function ue(){if(!ne||z)return;let t=performance.now(),n=Q(),a=f;if(te!==false){let i=t-Te,l=i>0?Math.abs(n-(le<0?n:le))/i:0;a=f*Math.max(.2,1+l*(typeof te=="number"?te:1)*.04);}le=n,Te=t;let m=Z?se===-1||n>=se?"forward":"reverse":y;se=n;let q=F-O,w=true;if(W){let i=re(B(n,O,F,a));U&&!Z&&(T=Math.max(T,i),i=T),oe=i,e.style.setProperty("--scroll-draw-progress",String(i));let l=m==="reverse"?1-i:i;e.style.clipPath=_(l),de?.(i),!G&&B(n,O,F,a)>0&&(G=true,ye?.()),i>=1&&!P?(P=true,J?.(),K<(j==="infinite"?1/0:j??0)&&(K++,ie=setTimeout(()=>{T=-1,G=false,P=false,e.style.clipPath=_(0);},Se))):i<1&&!U&&(P=false),N=requestAnimationFrame(ue);return}if(v.forEach((i,l)=>{let g=l*X*q,c=re(B(n,O+g,F+g,a));U&&!Z&&(T=Math.max(T,c),c=T),oe=c,i.style.strokeDashoffset=m==="reverse"?`${h[l]*c}`:`${h[l]*(1-c)}`,d&&(i.style.opacity=m==="reverse"?`${1-c}`:`${c}`),I&&E?i.style.stroke=xe(I,E,c):E&&(i.style.stroke=E),x!==null&&S!==null?i.style.strokeWidth=`${x+(S-x)*c}`:S!==null&&(i.style.strokeWidth=`${S}`),k!==null&&A!==null?i.style.fillOpacity=`${k+(A-k)*c}`:A!==null&&(i.style.fillOpacity=`${A}`),D&&i.tagName.toLowerCase()==="path"&&C[l]&&i.setAttribute("d",Re(C[l],D,c)),l===0&&(de?.(c),e.style.setProperty("--scroll-draw-progress",String(c))),c<1&&(w=false);}),ee){let i=re(B(n,O,F,a));for(let l in ee){let g=parseFloat(l);i>=g&&!ae.has(g)&&(ae.add(g),ee[l]?.());}}!G&&B(n,O,F,a)>0&&(G=true,ye?.()),w&&!P?(P=true,J?.(),K<(j==="infinite"?1/0:j??0)&&(K++,ie=setTimeout(()=>{T=-1,G=false,P=false,ae.clear(),Pe();},Se))):!w&&!U&&(P=false),N=requestAnimationFrame(ue);}let ge=new IntersectionObserver(t=>{t.forEach(n=>{ne=n.isIntersecting,ne&&!z?N=requestAnimationFrame(ue):cancelAnimationFrame(N);});},{root:b??null,threshold:Ge,rootMargin:ze}),be;function fe(){clearTimeout(be),be=setTimeout(()=>{v.forEach((t,n)=>{h[n]=$e(t),t.style.strokeDasharray=`${h[n]}`;}),Le();},150);}return window.addEventListener("resize",fe),window.addEventListener("orientationchange",fe),pe>0?setTimeout(()=>ge.observe(e),pe):ge.observe(e),{destroy(){cancelAnimationFrame(N),clearTimeout(ie),ge.disconnect(),window.removeEventListener("resize",fe),window.removeEventListener("orientationchange",fe),clearTimeout(be),he?.remove();},replay(){T=-1,se=-1,le=-1,G=false,P=false,K=0,z=false,ae.clear(),clearTimeout(ie),Pe();},pause(){z=true,cancelAnimationFrame(N);},resume(){z&&(z=false,ne&&(N=requestAnimationFrame(ue)));},seek(t){let n=Math.min(1,Math.max(0,t));oe=n,T=n,z=true,cancelAnimationFrame(N),Be(n,y);},getProgress(){return oe}}}var Ve=class{constructor(){this.instance=null;}init(r,s={}){return this.destroy(),this.instance=He(r,s),this}replay(){return this.instance?.replay(),this}destroy(){return this.instance?.destroy(),this.instance=null,this}};export{Ve as ScrollDrawRef};
1
+ function Ye({bounces:e=3,decay:n=.5}={}){let s=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,n)),d=Math.sqrt(o),m=0,b=[];for(let u=0;u<s;u++){let h=Math.pow(d,u);b.push(h),m+=h;}let $=[0],N=0;for(let u=0;u<s;u++)N+=b[u]/m,$.push(N);return u=>{if(u<=0)return 0;if(u>=1)return 1;for(let h=0;h<s;h++)if(u<=$[h+1]){let se=(u-$[h])/($[h+1]-$[h]);if(h===0)return se*(2-se);let P=1-Math.pow(o,h);return P+(1-P)*(2*se-1)*(2*se-1)}return 1}}function Ze({amplitude:e=1,period:n=.4}={}){let s=Math.max(1,e),o=Math.max(.1,n),d=s<=1?o/4:o/(2*Math.PI)*Math.asin(1/s);return m=>m<=0?0:m>=1?1:s*Math.pow(2,-10*m)*Math.sin((m-d)*(2*Math.PI)/o)+1}var Se={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:Ye(),elastic:Ze()};function ke(e="top bottom"){let n=e.trim();if(/^\d+(\.\d+)?%$/.test(n))return {element:"top",viewport:n};let[s="top",o="bottom"]=n.split(/\s+/).filter(Boolean);return {element:s,viewport:o}}function He(e,n,s,o){switch(o){case "top":return e+s;case "center":return e+s+n/2;case "bottom":return e+s+n;default:return e+s}}function We(e,n){if(/^\d+(\.\d+)?%$/.test(e))return n*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return n/2;case "bottom":return n;default:return n}}function we(e){let n=e.tagName.toLowerCase();if(n==="rect"){let s=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(s+o)}if(n==="circle"){let s=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*s}return e.getTotalLength()}function et(e,n,s){return Math.min(s,Math.max(n,e))}function ne(e,n,s,o){return s===n?0:et((e-n)/(s-n)*o,0,1)}function Le(e,n,s,o,d){let m=He(e.top,e.height,n,o.element)-We(o.viewport,s),b=He(e.top,e.height,n,d.element)-We(d.viewport,s);return {tStart:m,tEnd:b}}function ze(e){let n=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(n)return [parseInt(n[1]+n[1],16),parseInt(n[2]+n[2],16),parseInt(n[3]+n[3],16)];let s=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(s)return [parseInt(s[1],16),parseInt(s[2],16),parseInt(s[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function ve(e,n,s){let o=ze(e),d=ze(n);return !o||!d?e:`rgb(${Math.round(o[0]+(d[0]-o[0])*s)},${Math.round(o[1]+(d[1]-o[1])*s)},${Math.round(o[2]+(d[2]-o[2])*s)})`}function qe(e,n){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,n);}var Ve={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},tt=0;function rt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function nt(e){let n=e.getAttribute("stroke"),s=e.getAttribute("fill");!n||n==="none"?qe("Element has no stroke \u2014 path will not be visible.",e):s&&s!=="none"&&s!=="transparent"&&qe("Element has a fill \u2014 it may obscure the stroke animation.",e);}function st(e,n,s){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function d(){let m=s==="x"?window.scrollX:window.scrollY,b=e-m,$=n-m,N=s==="x";o.innerHTML=`
2
+ <div style="position:absolute;${N?`left:${b}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${b}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
3
+ <div style="position:absolute;${N?`left:${$}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${$}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(o),window.addEventListener("scroll",d,{passive:true}),d(),o}function Pe(e,n,s){let o=(n.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),d=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,m=>{let b=parseFloat(m),$=o[d++]??b;return String(+(b+($-b)*s).toFixed(4))})}function Ge(e,n={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let s=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:d=1,fade:m=false,easing:b="linear",trigger:$={},stagger:N=0,direction:u="forward",once:h=false,debug:se=false,axis:P="y",scrollContainer:Ee,autoReverse:ce=false,delay:ae=0,strokeColor:j,strokeWidth:J,fillOpacity:K,waypoints:Q,velocityScale:fe=false,threshold:De=0,rootMargin:Ie="0px",repeat:Y=0,repeatDelay:$e=0,morphTo:R,clip:xe,autoplay:_e=false,duration:Xe=1e3,native:Ue=true,onProgress:le,onStart:me,onComplete:oe}=n,G=xe===true?"left":typeof xe=="string"?xe:false,Z=typeof b=="function"?b:Se[b]??Se.linear,Fe=ke($.start??"top bottom"),Ce=ke($.end??"bottom top"),D=typeof Ee=="string"?document.querySelector(Ee):Ee??null,H=Array.isArray(j)?j[0]:null,A=Array.isArray(j)?j[1]:typeof j=="string"?j:null,I=Array.isArray(J)?J[0]:null,T=Array.isArray(J)?J[1]:typeof J=="number"?J:null,F=Array.isArray(K)?K[0]:null,S=Array.isArray(K)?K[1]:typeof K=="number"?K:null;function ee(t){let r=t*100;switch(G){case "right":return `inset(0 0 0 ${100-r}%)`;case "top":return `inset(0 0 ${100-r}% 0)`;case "bottom":return `inset(${100-r}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-r}% 0 0)`}}let x=G?[]:Array.from(e.querySelectorAll(o)),v=[],W=[],B=0,_=0,M=false,O=false,E=0,pe=false,z=-1,de=-1,k=false,te=0,V=0,X,Me=null,U=new Set,ye=-1,Oe=performance.now();function ue(){return D?P==="x"?D.scrollLeft:D.scrollTop:P==="x"?window.scrollX:window.scrollY}function Ne(){return D?P==="x"?D.clientWidth:D.clientHeight:P==="x"?window.innerWidth:window.innerHeight}function Re(){let t=e.getBoundingClientRect(),r,l,g;if(D){let L=D.getBoundingClientRect();r=P==="x"?t.left-L.left+D.scrollLeft:t.top-L.top+D.scrollTop,l=P==="x"?t.width:t.height,g=ue();}else r=P==="x"?t.left:t.top,l=P==="x"?t.width:t.height,g=ue();let C=Le({top:r,height:l},g,Ne(),Fe,Ce);B=C.tStart,_=C.tEnd,se&&process.env.NODE_ENV!=="production"&&(Me?.remove(),Me=st(B,_,P));}function je(t,r){if(e.style.setProperty("--scroll-draw-progress",String(t)),G){let l=r==="reverse"?1-t:t;e.style.clipPath=ee(l);return}x.forEach((l,g)=>{l.style.strokeDashoffset=r==="reverse"?`${v[g]*t}`:`${v[g]*(1-t)}`,m&&(l.style.opacity=r==="reverse"?`${1-t}`:`${t}`),H&&A?l.style.stroke=ve(H,A,t):A&&(l.style.stroke=A),I!==null&&T!==null?l.style.strokeWidth=`${I+(T-I)*t}`:T!==null&&(l.style.strokeWidth=`${T}`),F!==null&&S!==null?l.style.fillOpacity=`${F+(S-F)*t}`:S!==null&&(l.style.fillOpacity=`${S}`),R&&l.tagName.toLowerCase()==="path"&&W[g]&&l.setAttribute("d",Pe(W[g],R,t));});}function he(){if(e.style.setProperty("--scroll-draw-progress","0"),G){e.style.clipPath=ee(0);return}x.forEach((t,r)=>{t.style.strokeDasharray=`${v[r]}`,t.style.strokeDashoffset=u==="reverse"?"0":`${v[r]}`,m?t.style.opacity=u==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),I!==null&&(t.style.strokeWidth=`${I}`),F!==null&&(t.style.fillOpacity=`${F}`),R&&t.tagName.toLowerCase()==="path"&&W[r]&&t.setAttribute("d",W[r]);});}if(x.forEach(t=>{nt(t);let r=we(t);v.push(r),t.tagName.toLowerCase()==="path"?W.push(t.getAttribute("d")??""):W.push(""),s?(t.style.strokeDasharray=`${r}`,t.style.strokeDashoffset=u==="reverse"?`${r}`:"0",m&&(t.style.opacity="1"),A&&(t.style.stroke=A),T!==null&&(t.style.strokeWidth=`${T}`),S!==null&&(t.style.fillOpacity=`${S}`),R&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",R)):(t.style.strokeDasharray=`${r}`,t.style.strokeDashoffset=u==="reverse"?"0":`${r}`,m?t.style.opacity=u==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),I!==null&&(t.style.strokeWidth=`${I}`),F!==null&&(t.style.fillOpacity=`${F}`));}),G){if(s)return e.style.clipPath=ee(1),oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=ee(0);}else if(s)return oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function Je(){return !(Ue===false||!rt()||!x.length||typeof b!="string"||!(b in Ve)||G||P!=="y"||D||d!==1||N!==0||h||ce||fe!==false||R||Q||Y||ae>0||le||me||oe||j!=null||J!=null||K!=null||($.start??"top bottom").trim()!=="top bottom"||($.end??"bottom top").trim()!=="bottom top")}function Ke(){let t=`svg-scroll-draw-${++tt}`,r=u==="reverse"?"0":"var(--ssd-len)",l=u==="reverse"?"var(--ssd-len)":"0",g=`stroke-dashoffset:${r};`,C=`stroke-dashoffset:${l};`;m&&(g+=`opacity:${u==="reverse"?1:0};`,C+=`opacity:${u==="reverse"?0:1};`);let L=document.createElement("style");L.setAttribute("data-svg-scroll-draw",""),L.textContent=`@keyframes ${t}{from{${g}}to{${C}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Ve[b]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(L);function a(i,f){i.style.setProperty("--ssd-len",String(v[f])),i.style.strokeDasharray=`${v[f]}`,i.style.strokeDashoffset="",i.style.opacity="",i.style.animationPlayState="",i.classList.add(t);}x.forEach(a);let p=false,w=-1;function c(){if(w>=0)return w;let i=e.getBoundingClientRect(),{tStart:f,tEnd:y}=Le({top:i.top,height:i.height},ue(),Ne(),Fe,Ce);return Z(ne(ue(),f,y,d))}return {destroy(){x.forEach(i=>{i.classList.remove(t),i.style.removeProperty("--ssd-len"),i.style.animationPlayState="";}),L.remove();},replay(){p=false,w=-1,x.forEach(a);},pause(){p=true,x.forEach(i=>{i.style.animationPlayState="paused";});},resume(){p&&(p=false,x.forEach(i=>{i.style.animationPlayState="running";}));},seek(i){let f=Math.min(1,Math.max(0,i));w=f,p=true,x.forEach((y,re)=>{y.classList.remove(t),y.style.strokeDashoffset=u==="reverse"?`${v[re]*f}`:`${v[re]*(1-f)}`,m&&(y.style.opacity=u==="reverse"?`${1-f}`:`${f}`);});},getProgress(){return c()}}}if(Je())return Ke();function Qe(){let t=Math.max(1,Xe),r=0,l=0;function g(c){let i=true;if(G){let f=Math.min(1,Math.max(0,c/t)),y=Z(f);te=y,e.style.setProperty("--scroll-draw-progress",String(y)),e.style.clipPath=ee(u==="reverse"?1-y:y),le?.(y),f<1&&(i=false);}else x.forEach((f,y)=>{let re=y*N*t,ie=Math.min(1,Math.max(0,(c-re)/t)),q=Z(ie);f.style.strokeDashoffset=u==="reverse"?`${v[y]*q}`:`${v[y]*(1-q)}`,m&&(f.style.opacity=u==="reverse"?`${1-q}`:`${q}`),H&&A?f.style.stroke=ve(H,A,q):A&&(f.style.stroke=A),I!==null&&T!==null?f.style.strokeWidth=`${I+(T-I)*q}`:T!==null&&(f.style.strokeWidth=`${T}`),F!==null&&S!==null?f.style.fillOpacity=`${F+(S-F)*q}`:S!==null&&(f.style.fillOpacity=`${S}`),R&&f.tagName.toLowerCase()==="path"&&W[y]&&f.setAttribute("d",Pe(W[y],R,q)),y===0&&(le?.(q),e.style.setProperty("--scroll-draw-progress",String(q))),ie<1&&(i=false);});if(Q){let f=Math.min(1,Math.max(0,c/t)),y=Z(f);for(let re in Q){let ie=parseFloat(re);y>=ie&&!U.has(ie)&&(U.add(ie),Q[re]?.());}}return i}function C(c){if(k)return;let i=c-r;O||(O=true,me?.());let f=g(i);if(f&&!M){M=true,g(t*(1+Math.max(0,x.length-1)*N)),oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{r=performance.now(),O=false,M=false,U.clear(),he(),E=requestAnimationFrame(C);},$e));return}f||(E=requestAnimationFrame(C));}function L(){cancelAnimationFrame(E),clearTimeout(X),r=performance.now(),l=0,k=false,O=false,M=false,V=0,U.clear(),he(),E=requestAnimationFrame(C);}let a=new IntersectionObserver(c=>{c.forEach(i=>{i.isIntersecting&&!(h&&M)?L():!i.isIntersecting&&!h&&!M&&(cancelAnimationFrame(E),clearTimeout(X),r=null);});},{root:D??null,threshold:De,rootMargin:Ie}),p;function w(){clearTimeout(p),p=setTimeout(()=>{x.forEach((c,i)=>{v[i]=we(c),c.style.strokeDasharray=`${v[i]}`;});},150);}return window.addEventListener("resize",w),window.addEventListener("orientationchange",w),ae>0?setTimeout(()=>a.observe(e),ae):a.observe(e),{destroy(){cancelAnimationFrame(E),clearTimeout(X),a.disconnect(),window.removeEventListener("resize",w),window.removeEventListener("orientationchange",w),clearTimeout(p);},replay(){V=0,L();},pause(){k||(k=true,l=performance.now()-r,cancelAnimationFrame(E));},resume(){k&&(k=false,r=performance.now()-l,E=requestAnimationFrame(C));},seek(c){let i=Math.min(1,Math.max(0,c));te=i,k=true,l=i*t,r=performance.now()-l,cancelAnimationFrame(E),g(l);},getProgress(){return te}}}if(_e)return Qe();Re();function ge(){if(!pe||k)return;let t=performance.now(),r=ue(),l=d;if(fe!==false){let a=t-Oe,p=a>0?Math.abs(r-(ye<0?r:ye))/a:0;l=d*Math.max(.2,1+p*(typeof fe=="number"?fe:1)*.04);}ye=r,Oe=t;let g=ce?de===-1||r>=de?"forward":"reverse":u;de=r;let C=_-B,L=true;if(G){let a=Z(ne(r,B,_,l));h&&!ce&&(z=Math.max(z,a),a=z),te=a,e.style.setProperty("--scroll-draw-progress",String(a));let p=g==="reverse"?1-a:a;e.style.clipPath=ee(p),le?.(a),!O&&ne(r,B,_,l)>0&&(O=true,me?.()),a>=1&&!M?(M=true,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{z=-1,O=false,M=false,e.style.clipPath=ee(0);},$e))):a<1&&!h&&(M=false),E=requestAnimationFrame(ge);return}if(x.forEach((a,p)=>{let w=p*N*C,c=Z(ne(r,B+w,_+w,l));h&&!ce&&(z=Math.max(z,c),c=z),te=c,a.style.strokeDashoffset=g==="reverse"?`${v[p]*c}`:`${v[p]*(1-c)}`,m&&(a.style.opacity=g==="reverse"?`${1-c}`:`${c}`),H&&A?a.style.stroke=ve(H,A,c):A&&(a.style.stroke=A),I!==null&&T!==null?a.style.strokeWidth=`${I+(T-I)*c}`:T!==null&&(a.style.strokeWidth=`${T}`),F!==null&&S!==null?a.style.fillOpacity=`${F+(S-F)*c}`:S!==null&&(a.style.fillOpacity=`${S}`),R&&a.tagName.toLowerCase()==="path"&&W[p]&&a.setAttribute("d",Pe(W[p],R,c)),p===0&&(le?.(c),e.style.setProperty("--scroll-draw-progress",String(c))),c<1&&(L=false);}),Q){let a=Z(ne(r,B,_,l));for(let p in Q){let w=parseFloat(p);a>=w&&!U.has(w)&&(U.add(w),Q[p]?.());}}!O&&ne(r,B,_,l)>0&&(O=true,me?.()),L&&!M?(M=true,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{z=-1,O=false,M=false,U.clear(),he();},$e))):!L&&!h&&(M=false),E=requestAnimationFrame(ge);}let Ae=new IntersectionObserver(t=>{t.forEach(r=>{pe=r.isIntersecting,pe&&!k?E=requestAnimationFrame(ge):cancelAnimationFrame(E);});},{root:D??null,threshold:De,rootMargin:Ie}),Te;function be(){clearTimeout(Te),Te=setTimeout(()=>{x.forEach((t,r)=>{v[r]=we(t),t.style.strokeDasharray=`${v[r]}`;}),Re();},150);}return window.addEventListener("resize",be),window.addEventListener("orientationchange",be),ae>0?setTimeout(()=>Ae.observe(e),ae):Ae.observe(e),{destroy(){cancelAnimationFrame(E),clearTimeout(X),Ae.disconnect(),window.removeEventListener("resize",be),window.removeEventListener("orientationchange",be),clearTimeout(Te),Me?.remove();},replay(){z=-1,de=-1,ye=-1,O=false,M=false,V=0,k=false,U.clear(),clearTimeout(X),he();},pause(){k=true,cancelAnimationFrame(E);},resume(){k&&(k=false,pe&&(E=requestAnimationFrame(ge)));},seek(t){let r=Math.min(1,Math.max(0,t));te=r,z=r,k=true,cancelAnimationFrame(E),je(r,u);},getProgress(){return te}}}var Be=class{constructor(){this.instance=null;}init(n,s={}){return this.destroy(),this.instance=Ge(n,s),this}replay(){return this.instance?.replay(),this}destroy(){return this.instance?.destroy(),this.instance=null,this}};export{Be as ScrollDrawRef};
@@ -1,3 +1,3 @@
1
- 'use strict';var ve={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2)};function Se(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 Ce(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function Ee(e){let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(n+o)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function Xe(e,r,n){return Math.min(n,Math.max(r,e))}function B(e,r,n,o){return n===r?0:Xe((e-r)/(n-r)*o,0,1)}function $e(e,r,n,o,c){let d=Oe(e.top,e.height,r,o.element)-Ce(o.viewport,n),p=Oe(e.top,e.height,r,c.element)-Ce(c.viewport,n);return {tStart:d,tEnd:p}}function Fe(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function xe(e,r,n){let o=Fe(e),c=Fe(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 Ne(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}var Re={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},Je=0;function Ue(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function je(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?Ne("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&Ne("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Ke(e,r,n){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function c(){let d=n==="x"?window.scrollX:window.scrollY,p=e-d,M=r-d,X=n==="x";o.innerHTML=`
2
- <div style="position:absolute;${X?`left:${p}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${p}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
3
- <div style="position:absolute;${X?`left:${M}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${M}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 He(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),c=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,d=>{let p=parseFloat(d),M=o[c++]??p;return String(+(p+(M-p)*n).toFixed(4))})}function fe(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:d=false,easing:p="linear",trigger:M={},stagger:X=0,direction:y="forward",once:J=false,debug:Ve=false,axis:S="y",scrollContainer:pe,autoReverse:Z=false,delay:me=0,strokeColor:R,strokeWidth:H,fillOpacity:V,waypoints:ee,velocityScale:te=false,threshold:We=0,rootMargin:Ge="0px",repeat:U=0,repeatDelay:ke=0,morphTo:P,clip:de,native:ze=true,onProgress:ye,onStart:ge,onComplete:j}=r,W=de===true?"left":typeof de=="string"?de:false,re=typeof p=="function"?p:ve[p]??ve.linear,Ae=Se(M.start??"top bottom"),De=Se(M.end??"bottom top"),b=typeof pe=="string"?document.querySelector(pe):pe??null,I=Array.isArray(R)?R[0]:null,E=Array.isArray(R)?R[1]:typeof R=="string"?R:null,$=Array.isArray(H)?H[0]:null,x=Array.isArray(H)?H[1]:typeof H=="number"?H:null,k=Array.isArray(V)?V[0]:null,A=Array.isArray(V)?V[1]:typeof V=="number"?V:null;function _(t){let s=t*100;switch(W){case "right":return `inset(0 0 0 ${100-s}%)`;case "top":return `inset(0 0 ${100-s}% 0)`;case "bottom":return `inset(${100-s}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-s}% 0 0)`}}let w=W?[]:Array.from(e.querySelectorAll(o)),g=[],O=[],C=0,F=0,L=false,G=false,N=0,ne=false,D=-1,se=-1,z=false,oe=0,K=0,ie,he=null,ae=new Set,le=-1,Te=performance.now();function Q(){return b?S==="x"?b.scrollLeft:b.scrollTop:S==="x"?window.scrollX:window.scrollY}function Me(){return b?S==="x"?b.clientWidth:b.clientHeight:S==="x"?window.innerWidth:window.innerHeight}function Le(){let t=e.getBoundingClientRect(),s,a,m;if(b){let v=b.getBoundingClientRect();s=S==="x"?t.left-v.left+b.scrollLeft:t.top-v.top+b.scrollTop,a=S==="x"?t.width:t.height,m=Q();}else s=S==="x"?t.left:t.top,a=S==="x"?t.width:t.height,m=Q();let q=$e({top:s,height:a},m,Me(),Ae,De);C=q.tStart,F=q.tEnd,Ve&&process.env.NODE_ENV!=="production"&&(he?.remove(),he=Ke(C,F,S));}function qe(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),W){let a=s==="reverse"?1-t:t;e.style.clipPath=_(a);return}w.forEach((a,m)=>{a.style.strokeDashoffset=s==="reverse"?`${g[m]*t}`:`${g[m]*(1-t)}`,d&&(a.style.opacity=s==="reverse"?`${1-t}`:`${t}`),I&&E?a.style.stroke=xe(I,E,t):E&&(a.style.stroke=E),$!==null&&x!==null?a.style.strokeWidth=`${$+(x-$)*t}`:x!==null&&(a.style.strokeWidth=`${x}`),k!==null&&A!==null?a.style.fillOpacity=`${k+(A-k)*t}`:A!==null&&(a.style.fillOpacity=`${A}`),P&&a.tagName.toLowerCase()==="path"&&O[m]&&a.setAttribute("d",He(O[m],P,t));});}function Pe(){if(e.style.setProperty("--scroll-draw-progress","0"),W){e.style.clipPath=_(0);return}w.forEach((t,s)=>{t.style.strokeDasharray=`${g[s]}`,t.style.strokeDashoffset=y==="reverse"?"0":`${g[s]}`,d?t.style.opacity=y==="reverse"?"1":"0":t.style.opacity="",I&&(t.style.stroke=I),$!==null&&(t.style.strokeWidth=`${$}`),k!==null&&(t.style.fillOpacity=`${k}`),P&&t.tagName.toLowerCase()==="path"&&O[s]&&t.setAttribute("d",O[s]);});}if(w.forEach(t=>{je(t);let s=Ee(t);g.push(s),t.tagName.toLowerCase()==="path"?O.push(t.getAttribute("d")??""):O.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=y==="reverse"?`${s}`:"0",d&&(t.style.opacity="1"),E&&(t.style.stroke=E),x!==null&&(t.style.strokeWidth=`${x}`),A!==null&&(t.style.fillOpacity=`${A}`),P&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",P)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=y==="reverse"?"0":`${s}`,d?t.style.opacity=y==="reverse"?"1":"0":t.style.opacity="",I&&(t.style.stroke=I),$!==null&&(t.style.strokeWidth=`${$}`),k!==null&&(t.style.fillOpacity=`${k}`));}),W){if(n)return e.style.clipPath=_(1),j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=_(0);}else if(n)return j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function Be(){return !(ze===false||!Ue()||!w.length||typeof p!="string"||!(p in Re)||W||S!=="y"||b||c!==1||X!==0||J||Z||te!==false||P||ee||U||me>0||ye||ge||j||R!=null||H!=null||V!=null||(M.start??"top bottom").trim()!=="top bottom"||(M.end??"bottom top").trim()!=="bottom top")}function _e(){let t=`svg-scroll-draw-${++Je}`,s=y==="reverse"?"0":"var(--ssd-len)",a=y==="reverse"?"var(--ssd-len)":"0",m=`stroke-dashoffset:${s};`,q=`stroke-dashoffset:${a};`;d&&(m+=`opacity:${y==="reverse"?1:0};`,q+=`opacity:${y==="reverse"?0:1};`);let v=document.createElement("style");v.setAttribute("data-svg-scroll-draw",""),v.textContent=`@keyframes ${t}{from{${m}}to{${q}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Re[p]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(v);function i(u,T){u.style.setProperty("--ssd-len",String(g[T])),u.style.strokeDasharray=`${g[T]}`,u.style.strokeDashoffset="",u.style.opacity="",u.style.animationPlayState="",u.classList.add(t);}w.forEach(i);let l=false,h=-1;function f(){if(h>=0)return h;let u=e.getBoundingClientRect(),{tStart:T,tEnd:Y}=$e({top:u.top,height:u.height},Q(),Me(),Ae,De);return re(B(Q(),T,Y,c))}return {destroy(){w.forEach(u=>{u.classList.remove(t),u.style.removeProperty("--ssd-len"),u.style.animationPlayState="";}),v.remove();},replay(){l=false,h=-1,w.forEach(i);},pause(){l=true,w.forEach(u=>{u.style.animationPlayState="paused";});},resume(){l&&(l=false,w.forEach(u=>{u.style.animationPlayState="running";}));},seek(u){let T=Math.min(1,Math.max(0,u));h=T,l=true,w.forEach((Y,Ie)=>{Y.classList.remove(t),Y.style.strokeDashoffset=y==="reverse"?`${g[Ie]*T}`:`${g[Ie]*(1-T)}`,d&&(Y.style.opacity=y==="reverse"?`${1-T}`:`${T}`);});},getProgress(){return f()}}}if(Be())return _e();Le();function ue(){if(!ne||z)return;let t=performance.now(),s=Q(),a=c;if(te!==false){let i=t-Te,l=i>0?Math.abs(s-(le<0?s:le))/i:0;a=c*Math.max(.2,1+l*(typeof te=="number"?te:1)*.04);}le=s,Te=t;let m=Z?se===-1||s>=se?"forward":"reverse":y;se=s;let q=F-C,v=true;if(W){let i=re(B(s,C,F,a));J&&!Z&&(D=Math.max(D,i),i=D),oe=i,e.style.setProperty("--scroll-draw-progress",String(i));let l=m==="reverse"?1-i:i;e.style.clipPath=_(l),ye?.(i),!G&&B(s,C,F,a)>0&&(G=true,ge?.()),i>=1&&!L?(L=true,j?.(),K<(U==="infinite"?1/0:U??0)&&(K++,ie=setTimeout(()=>{D=-1,G=false,L=false,e.style.clipPath=_(0);},ke))):i<1&&!J&&(L=false),N=requestAnimationFrame(ue);return}if(w.forEach((i,l)=>{let h=l*X*q,f=re(B(s,C+h,F+h,a));J&&!Z&&(D=Math.max(D,f),f=D),oe=f,i.style.strokeDashoffset=m==="reverse"?`${g[l]*f}`:`${g[l]*(1-f)}`,d&&(i.style.opacity=m==="reverse"?`${1-f}`:`${f}`),I&&E?i.style.stroke=xe(I,E,f):E&&(i.style.stroke=E),$!==null&&x!==null?i.style.strokeWidth=`${$+(x-$)*f}`:x!==null&&(i.style.strokeWidth=`${x}`),k!==null&&A!==null?i.style.fillOpacity=`${k+(A-k)*f}`:A!==null&&(i.style.fillOpacity=`${A}`),P&&i.tagName.toLowerCase()==="path"&&O[l]&&i.setAttribute("d",He(O[l],P,f)),l===0&&(ye?.(f),e.style.setProperty("--scroll-draw-progress",String(f))),f<1&&(v=false);}),ee){let i=re(B(s,C,F,a));for(let l in ee){let h=parseFloat(l);i>=h&&!ae.has(h)&&(ae.add(h),ee[l]?.());}}!G&&B(s,C,F,a)>0&&(G=true,ge?.()),v&&!L?(L=true,j?.(),K<(U==="infinite"?1/0:U??0)&&(K++,ie=setTimeout(()=>{D=-1,G=false,L=false,ae.clear(),Pe();},ke))):!v&&!J&&(L=false),N=requestAnimationFrame(ue);}let be=new IntersectionObserver(t=>{t.forEach(s=>{ne=s.isIntersecting,ne&&!z?N=requestAnimationFrame(ue):cancelAnimationFrame(N);});},{root:b??null,threshold:We,rootMargin:Ge}),we;function ce(){clearTimeout(we),we=setTimeout(()=>{w.forEach((t,s)=>{g[s]=Ee(t),t.style.strokeDasharray=`${g[s]}`;}),Le();},150);}return window.addEventListener("resize",ce),window.addEventListener("orientationchange",ce),me>0?setTimeout(()=>be.observe(e),me):be.observe(e),{destroy(){cancelAnimationFrame(N),clearTimeout(ie),be.disconnect(),window.removeEventListener("resize",ce),window.removeEventListener("orientationchange",ce),clearTimeout(we),he?.remove();},replay(){D=-1,se=-1,le=-1,G=false,L=false,K=0,z=false,ae.clear(),clearTimeout(ie),Pe();},pause(){z=true,cancelAnimationFrame(N);},resume(){z&&(z=false,ne&&(N=requestAnimationFrame(ue)));},seek(t){let s=Math.min(1,Math.max(0,t));oe=s,D=s,z=true,cancelAnimationFrame(N),qe(s,y);},getProgress(){return oe}}}function Qe(e,r){let n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return n;let o=typeof e=="string"?document.querySelector(e):e;return o?fe(o,r):(console.warn("[svg-scroll-draw] Container not found:",e),n)}function it(e=document){return Array.from(e.querySelectorAll("[data-scroll-draw]")).map(r=>{let n={};try{let o=r.dataset.scrollDrawOptions??r.dataset.scrollDrawoptions??"";o&&(n=JSON.parse(o));}catch{}return fe(r,n)})}exports.initScrollDraw=it;exports.scrollDraw=Qe;
1
+ 'use strict';function Ve({bounces:e=3,decay:r=.5}={}){let n=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,r)),d=Math.sqrt(o),m=0,b=[];for(let u=0;u<n;u++){let h=Math.pow(d,u);b.push(h),m+=h;}let x=[0],N=0;for(let u=0;u<n;u++)N+=b[u]/m,x.push(N);return u=>{if(u<=0)return 0;if(u>=1)return 1;for(let h=0;h<n;h++)if(u<=x[h+1]){let se=(u-x[h])/(x[h+1]-x[h]);if(h===0)return se*(2-se);let L=1-Math.pow(o,h);return L+(1-L)*(2*se-1)*(2*se-1)}return 1}}function Ge({amplitude:e=1,period:r=.4}={}){let n=Math.max(1,e),o=Math.max(.1,r),d=n<=1?o/4:o/(2*Math.PI)*Math.asin(1/n);return m=>m<=0?0:m>=1?1:n*Math.pow(2,-10*m)*Math.sin((m-d)*(2*Math.PI)/o)+1}var ke={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:Ve(),elastic:Ge()};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 We(e,r,n,o){switch(o){case "top":return e+n;case "center":return e+n+r/2;case "bottom":return e+n+r;default:return e+n}}function qe(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function we(e){let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(n+o)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function Ze(e,r,n){return Math.min(n,Math.max(r,e))}function ne(e,r,n,o){return n===r?0:Ze((e-r)/(n-r)*o,0,1)}function Le(e,r,n,o,d){let m=We(e.top,e.height,r,o.element)-qe(o.viewport,n),b=We(e.top,e.height,r,d.element)-qe(d.viewport,n);return {tStart:m,tEnd:b}}function ze(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function ve(e,r,n){let o=ze(e),d=ze(r);return !o||!d?e:`rgb(${Math.round(o[0]+(d[0]-o[0])*n)},${Math.round(o[1]+(d[1]-o[1])*n)},${Math.round(o[2]+(d[2]-o[2])*n)})`}function Be(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}var _e={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},et=0;function tt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function rt(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?Be("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&Be("Element has a fill \u2014 it may obscure the stroke animation.",e);}function nt(e,r,n){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function d(){let m=n==="x"?window.scrollX:window.scrollY,b=e-m,x=r-m,N=n==="x";o.innerHTML=`
2
+ <div style="position:absolute;${N?`left:${b}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${b}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
3
+ <div style="position:absolute;${N?`left:${x}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${x}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(o),window.addEventListener("scroll",d,{passive:true}),d(),o}function Pe(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),d=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,m=>{let b=parseFloat(m),x=o[d++]??b;return String(+(b+(x-b)*n).toFixed(4))})}function Ee(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let n=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:d=1,fade:m=false,easing:b="linear",trigger:x={},stagger:N=0,direction:u="forward",once:h=false,debug:se=false,axis:L="y",scrollContainer:xe,autoReverse:ce=false,delay:ie=0,strokeColor:U,strokeWidth:j,fillOpacity:K,waypoints:Q,velocityScale:fe=false,threshold:Ie=0,rootMargin:Oe="0px",repeat:Y=0,repeatDelay:$e=0,morphTo:R,clip:Se,autoplay:Xe=false,duration:Je=1e3,native:Ue=true,onProgress:le,onStart:me,onComplete:oe}=r,G=Se===true?"left":typeof Se=="string"?Se:false,Z=typeof b=="function"?b:ke[b]??ke.linear,Fe=De(x.start??"top bottom"),Ce=De(x.end??"bottom top"),P=typeof xe=="string"?document.querySelector(xe):xe??null,H=Array.isArray(U)?U[0]:null,M=Array.isArray(U)?U[1]:typeof U=="string"?U:null,I=Array.isArray(j)?j[0]:null,A=Array.isArray(j)?j[1]:typeof j=="number"?j:null,O=Array.isArray(K)?K[0]:null,T=Array.isArray(K)?K[1]:typeof K=="number"?K:null;function ee(t){let s=t*100;switch(G){case "right":return `inset(0 0 0 ${100-s}%)`;case "top":return `inset(0 0 ${100-s}% 0)`;case "bottom":return `inset(${100-s}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-s}% 0 0)`}}let $=G?[]:Array.from(e.querySelectorAll(o)),v=[],W=[],B=0,_=0,S=false,C=false,E=0,pe=false,q=-1,de=-1,k=false,te=0,V=0,X,Me=null,J=new Set,ye=-1,Ne=performance.now();function ue(){return P?L==="x"?P.scrollLeft:P.scrollTop:L==="x"?window.scrollX:window.scrollY}function Re(){return P?L==="x"?P.clientWidth:P.clientHeight:L==="x"?window.innerWidth:window.innerHeight}function He(){let t=e.getBoundingClientRect(),s,l,g;if(P){let D=P.getBoundingClientRect();s=L==="x"?t.left-D.left+P.scrollLeft:t.top-D.top+P.scrollTop,l=L==="x"?t.width:t.height,g=ue();}else s=L==="x"?t.left:t.top,l=L==="x"?t.width:t.height,g=ue();let F=Le({top:s,height:l},g,Re(),Fe,Ce);B=F.tStart,_=F.tEnd,se&&process.env.NODE_ENV!=="production"&&(Me?.remove(),Me=nt(B,_,L));}function je(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),G){let l=s==="reverse"?1-t:t;e.style.clipPath=ee(l);return}$.forEach((l,g)=>{l.style.strokeDashoffset=s==="reverse"?`${v[g]*t}`:`${v[g]*(1-t)}`,m&&(l.style.opacity=s==="reverse"?`${1-t}`:`${t}`),H&&M?l.style.stroke=ve(H,M,t):M&&(l.style.stroke=M),I!==null&&A!==null?l.style.strokeWidth=`${I+(A-I)*t}`:A!==null&&(l.style.strokeWidth=`${A}`),O!==null&&T!==null?l.style.fillOpacity=`${O+(T-O)*t}`:T!==null&&(l.style.fillOpacity=`${T}`),R&&l.tagName.toLowerCase()==="path"&&W[g]&&l.setAttribute("d",Pe(W[g],R,t));});}function he(){if(e.style.setProperty("--scroll-draw-progress","0"),G){e.style.clipPath=ee(0);return}$.forEach((t,s)=>{t.style.strokeDasharray=`${v[s]}`,t.style.strokeDashoffset=u==="reverse"?"0":`${v[s]}`,m?t.style.opacity=u==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),I!==null&&(t.style.strokeWidth=`${I}`),O!==null&&(t.style.fillOpacity=`${O}`),R&&t.tagName.toLowerCase()==="path"&&W[s]&&t.setAttribute("d",W[s]);});}if($.forEach(t=>{rt(t);let s=we(t);v.push(s),t.tagName.toLowerCase()==="path"?W.push(t.getAttribute("d")??""):W.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=u==="reverse"?`${s}`:"0",m&&(t.style.opacity="1"),M&&(t.style.stroke=M),A!==null&&(t.style.strokeWidth=`${A}`),T!==null&&(t.style.fillOpacity=`${T}`),R&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",R)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=u==="reverse"?"0":`${s}`,m?t.style.opacity=u==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),I!==null&&(t.style.strokeWidth=`${I}`),O!==null&&(t.style.fillOpacity=`${O}`));}),G){if(n)return e.style.clipPath=ee(1),oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=ee(0);}else if(n)return oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function Ke(){return !(Ue===false||!tt()||!$.length||typeof b!="string"||!(b in _e)||G||L!=="y"||P||d!==1||N!==0||h||ce||fe!==false||R||Q||Y||ie>0||le||me||oe||U!=null||j!=null||K!=null||(x.start??"top bottom").trim()!=="top bottom"||(x.end??"bottom top").trim()!=="bottom top")}function Qe(){let t=`svg-scroll-draw-${++et}`,s=u==="reverse"?"0":"var(--ssd-len)",l=u==="reverse"?"var(--ssd-len)":"0",g=`stroke-dashoffset:${s};`,F=`stroke-dashoffset:${l};`;m&&(g+=`opacity:${u==="reverse"?1:0};`,F+=`opacity:${u==="reverse"?0:1};`);let D=document.createElement("style");D.setAttribute("data-svg-scroll-draw",""),D.textContent=`@keyframes ${t}{from{${g}}to{${F}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${_e[b]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(D);function i(a,f){a.style.setProperty("--ssd-len",String(v[f])),a.style.strokeDasharray=`${v[f]}`,a.style.strokeDashoffset="",a.style.opacity="",a.style.animationPlayState="",a.classList.add(t);}$.forEach(i);let p=false,w=-1;function c(){if(w>=0)return w;let a=e.getBoundingClientRect(),{tStart:f,tEnd:y}=Le({top:a.top,height:a.height},ue(),Re(),Fe,Ce);return Z(ne(ue(),f,y,d))}return {destroy(){$.forEach(a=>{a.classList.remove(t),a.style.removeProperty("--ssd-len"),a.style.animationPlayState="";}),D.remove();},replay(){p=false,w=-1,$.forEach(i);},pause(){p=true,$.forEach(a=>{a.style.animationPlayState="paused";});},resume(){p&&(p=false,$.forEach(a=>{a.style.animationPlayState="running";}));},seek(a){let f=Math.min(1,Math.max(0,a));w=f,p=true,$.forEach((y,re)=>{y.classList.remove(t),y.style.strokeDashoffset=u==="reverse"?`${v[re]*f}`:`${v[re]*(1-f)}`,m&&(y.style.opacity=u==="reverse"?`${1-f}`:`${f}`);});},getProgress(){return c()}}}if(Ke())return Qe();function Ye(){let t=Math.max(1,Je),s=0,l=0;function g(c){let a=true;if(G){let f=Math.min(1,Math.max(0,c/t)),y=Z(f);te=y,e.style.setProperty("--scroll-draw-progress",String(y)),e.style.clipPath=ee(u==="reverse"?1-y:y),le?.(y),f<1&&(a=false);}else $.forEach((f,y)=>{let re=y*N*t,ae=Math.min(1,Math.max(0,(c-re)/t)),z=Z(ae);f.style.strokeDashoffset=u==="reverse"?`${v[y]*z}`:`${v[y]*(1-z)}`,m&&(f.style.opacity=u==="reverse"?`${1-z}`:`${z}`),H&&M?f.style.stroke=ve(H,M,z):M&&(f.style.stroke=M),I!==null&&A!==null?f.style.strokeWidth=`${I+(A-I)*z}`:A!==null&&(f.style.strokeWidth=`${A}`),O!==null&&T!==null?f.style.fillOpacity=`${O+(T-O)*z}`:T!==null&&(f.style.fillOpacity=`${T}`),R&&f.tagName.toLowerCase()==="path"&&W[y]&&f.setAttribute("d",Pe(W[y],R,z)),y===0&&(le?.(z),e.style.setProperty("--scroll-draw-progress",String(z))),ae<1&&(a=false);});if(Q){let f=Math.min(1,Math.max(0,c/t)),y=Z(f);for(let re in Q){let ae=parseFloat(re);y>=ae&&!J.has(ae)&&(J.add(ae),Q[re]?.());}}return a}function F(c){if(k)return;let a=c-s;C||(C=true,me?.());let f=g(a);if(f&&!S){S=true,g(t*(1+Math.max(0,$.length-1)*N)),oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{s=performance.now(),C=false,S=false,J.clear(),he(),E=requestAnimationFrame(F);},$e));return}f||(E=requestAnimationFrame(F));}function D(){cancelAnimationFrame(E),clearTimeout(X),s=performance.now(),l=0,k=false,C=false,S=false,V=0,J.clear(),he(),E=requestAnimationFrame(F);}let i=new IntersectionObserver(c=>{c.forEach(a=>{a.isIntersecting&&!(h&&S)?D():!a.isIntersecting&&!h&&!S&&(cancelAnimationFrame(E),clearTimeout(X),s=null);});},{root:P??null,threshold:Ie,rootMargin:Oe}),p;function w(){clearTimeout(p),p=setTimeout(()=>{$.forEach((c,a)=>{v[a]=we(c),c.style.strokeDasharray=`${v[a]}`;});},150);}return window.addEventListener("resize",w),window.addEventListener("orientationchange",w),ie>0?setTimeout(()=>i.observe(e),ie):i.observe(e),{destroy(){cancelAnimationFrame(E),clearTimeout(X),i.disconnect(),window.removeEventListener("resize",w),window.removeEventListener("orientationchange",w),clearTimeout(p);},replay(){V=0,D();},pause(){k||(k=true,l=performance.now()-s,cancelAnimationFrame(E));},resume(){k&&(k=false,s=performance.now()-l,E=requestAnimationFrame(F));},seek(c){let a=Math.min(1,Math.max(0,c));te=a,k=true,l=a*t,s=performance.now()-l,cancelAnimationFrame(E),g(l);},getProgress(){return te}}}if(Xe)return Ye();He();function ge(){if(!pe||k)return;let t=performance.now(),s=ue(),l=d;if(fe!==false){let i=t-Ne,p=i>0?Math.abs(s-(ye<0?s:ye))/i:0;l=d*Math.max(.2,1+p*(typeof fe=="number"?fe:1)*.04);}ye=s,Ne=t;let g=ce?de===-1||s>=de?"forward":"reverse":u;de=s;let F=_-B,D=true;if(G){let i=Z(ne(s,B,_,l));h&&!ce&&(q=Math.max(q,i),i=q),te=i,e.style.setProperty("--scroll-draw-progress",String(i));let p=g==="reverse"?1-i:i;e.style.clipPath=ee(p),le?.(i),!C&&ne(s,B,_,l)>0&&(C=true,me?.()),i>=1&&!S?(S=true,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{q=-1,C=false,S=false,e.style.clipPath=ee(0);},$e))):i<1&&!h&&(S=false),E=requestAnimationFrame(ge);return}if($.forEach((i,p)=>{let w=p*N*F,c=Z(ne(s,B+w,_+w,l));h&&!ce&&(q=Math.max(q,c),c=q),te=c,i.style.strokeDashoffset=g==="reverse"?`${v[p]*c}`:`${v[p]*(1-c)}`,m&&(i.style.opacity=g==="reverse"?`${1-c}`:`${c}`),H&&M?i.style.stroke=ve(H,M,c):M&&(i.style.stroke=M),I!==null&&A!==null?i.style.strokeWidth=`${I+(A-I)*c}`:A!==null&&(i.style.strokeWidth=`${A}`),O!==null&&T!==null?i.style.fillOpacity=`${O+(T-O)*c}`:T!==null&&(i.style.fillOpacity=`${T}`),R&&i.tagName.toLowerCase()==="path"&&W[p]&&i.setAttribute("d",Pe(W[p],R,c)),p===0&&(le?.(c),e.style.setProperty("--scroll-draw-progress",String(c))),c<1&&(D=false);}),Q){let i=Z(ne(s,B,_,l));for(let p in Q){let w=parseFloat(p);i>=w&&!J.has(w)&&(J.add(w),Q[p]?.());}}!C&&ne(s,B,_,l)>0&&(C=true,me?.()),D&&!S?(S=true,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{q=-1,C=false,S=false,J.clear(),he();},$e))):!D&&!h&&(S=false),E=requestAnimationFrame(ge);}let Ae=new IntersectionObserver(t=>{t.forEach(s=>{pe=s.isIntersecting,pe&&!k?E=requestAnimationFrame(ge):cancelAnimationFrame(E);});},{root:P??null,threshold:Ie,rootMargin:Oe}),Te;function be(){clearTimeout(Te),Te=setTimeout(()=>{$.forEach((t,s)=>{v[s]=we(t),t.style.strokeDasharray=`${v[s]}`;}),He();},150);}return window.addEventListener("resize",be),window.addEventListener("orientationchange",be),ie>0?setTimeout(()=>Ae.observe(e),ie):Ae.observe(e),{destroy(){cancelAnimationFrame(E),clearTimeout(X),Ae.disconnect(),window.removeEventListener("resize",be),window.removeEventListener("orientationchange",be),clearTimeout(Te),Me?.remove();},replay(){q=-1,de=-1,ye=-1,C=false,S=false,V=0,k=false,J.clear(),clearTimeout(X),he();},pause(){k=true,cancelAnimationFrame(E);},resume(){k&&(k=false,pe&&(E=requestAnimationFrame(ge)));},seek(t){let s=Math.min(1,Math.max(0,t));te=s,q=s,k=true,cancelAnimationFrame(E),je(s,u);},getProgress(){return te}}}function st(e,r){let n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return n;let o=typeof e=="string"?document.querySelector(e):e;return o?Ee(o,r):(console.warn("[svg-scroll-draw] Container not found:",e),n)}function pt(e=document){return Array.from(e.querySelectorAll("[data-scroll-draw]")).map(r=>{let n={};try{let o=r.dataset.scrollDrawOptions??r.dataset.scrollDrawoptions??"";o&&(n=JSON.parse(o));}catch{}return Ee(r,n)})}exports.initScrollDraw=pt;exports.scrollDraw=st;
@@ -1,4 +1,4 @@
1
- type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
1
+ type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
2
2
  interface TriggerConfig {
3
3
  start?: string;
4
4
  end?: string;
@@ -60,6 +60,25 @@ interface ScrollDrawOptions {
60
60
  onProgress?: (alpha: number) => void;
61
61
  onStart?: () => void;
62
62
  onComplete?: () => void;
63
+ /**
64
+ * Trigger the animation when the element enters the viewport instead of
65
+ * tying it to scroll position. The draw runs over `duration` milliseconds,
66
+ * replaying each time the element re-enters the viewport (use `once: true`
67
+ * to play only the first time).
68
+ *
69
+ * All visual options work in autoplay mode — `easing`, `stagger`, `fade`,
70
+ * `strokeColor`, `strokeWidth`, `fillOpacity`, `clip`, `morphTo`, `waypoints`,
71
+ * `repeat`, `repeatDelay`, `onStart`, `onComplete`, `onProgress`, etc.
72
+ *
73
+ * The full instance API (`pause`, `resume`, `seek`, `replay`, `getProgress`)
74
+ * also works — `seek(0.5)` pauses at 50% of the duration.
75
+ */
76
+ autoplay?: boolean;
77
+ /**
78
+ * Duration of the autoplay animation in milliseconds. Only used when
79
+ * `autoplay: true`. Default `1000`.
80
+ */
81
+ duration?: number;
63
82
  /**
64
83
  * Use the browser's native CSS scroll-driven animation
65
84
  * (`animation-timeline: view()`) when the configuration is simple enough and
@@ -1,4 +1,4 @@
1
- type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
1
+ type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
2
2
  interface TriggerConfig {
3
3
  start?: string;
4
4
  end?: string;
@@ -60,6 +60,25 @@ interface ScrollDrawOptions {
60
60
  onProgress?: (alpha: number) => void;
61
61
  onStart?: () => void;
62
62
  onComplete?: () => void;
63
+ /**
64
+ * Trigger the animation when the element enters the viewport instead of
65
+ * tying it to scroll position. The draw runs over `duration` milliseconds,
66
+ * replaying each time the element re-enters the viewport (use `once: true`
67
+ * to play only the first time).
68
+ *
69
+ * All visual options work in autoplay mode — `easing`, `stagger`, `fade`,
70
+ * `strokeColor`, `strokeWidth`, `fillOpacity`, `clip`, `morphTo`, `waypoints`,
71
+ * `repeat`, `repeatDelay`, `onStart`, `onComplete`, `onProgress`, etc.
72
+ *
73
+ * The full instance API (`pause`, `resume`, `seek`, `replay`, `getProgress`)
74
+ * also works — `seek(0.5)` pauses at 50% of the duration.
75
+ */
76
+ autoplay?: boolean;
77
+ /**
78
+ * Duration of the autoplay animation in milliseconds. Only used when
79
+ * `autoplay: true`. Default `1000`.
80
+ */
81
+ duration?: number;
63
82
  /**
64
83
  * Use the browser's native CSS scroll-driven animation
65
84
  * (`animation-timeline: view()`) when the configuration is simple enough and
@@ -1,3 +1,3 @@
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)};function Se(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 Ce(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function Ee(e){let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(n+o)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function Xe(e,r,n){return Math.min(n,Math.max(r,e))}function B(e,r,n,o){return n===r?0:Xe((e-r)/(n-r)*o,0,1)}function $e(e,r,n,o,c){let d=Oe(e.top,e.height,r,o.element)-Ce(o.viewport,n),p=Oe(e.top,e.height,r,c.element)-Ce(c.viewport,n);return {tStart:d,tEnd:p}}function Fe(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function xe(e,r,n){let o=Fe(e),c=Fe(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 Ne(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}var Re={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},Je=0;function Ue(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function je(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?Ne("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&Ne("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Ke(e,r,n){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function c(){let d=n==="x"?window.scrollX:window.scrollY,p=e-d,M=r-d,X=n==="x";o.innerHTML=`
2
- <div style="position:absolute;${X?`left:${p}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${p}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
3
- <div style="position:absolute;${X?`left:${M}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${M}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 He(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),c=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,d=>{let p=parseFloat(d),M=o[c++]??p;return String(+(p+(M-p)*n).toFixed(4))})}function fe(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:d=false,easing:p="linear",trigger:M={},stagger:X=0,direction:y="forward",once:J=false,debug:Ve=false,axis:S="y",scrollContainer:pe,autoReverse:Z=false,delay:me=0,strokeColor:R,strokeWidth:H,fillOpacity:V,waypoints:ee,velocityScale:te=false,threshold:We=0,rootMargin:Ge="0px",repeat:U=0,repeatDelay:ke=0,morphTo:P,clip:de,native:ze=true,onProgress:ye,onStart:ge,onComplete:j}=r,W=de===true?"left":typeof de=="string"?de:false,re=typeof p=="function"?p:ve[p]??ve.linear,Ae=Se(M.start??"top bottom"),De=Se(M.end??"bottom top"),b=typeof pe=="string"?document.querySelector(pe):pe??null,I=Array.isArray(R)?R[0]:null,E=Array.isArray(R)?R[1]:typeof R=="string"?R:null,$=Array.isArray(H)?H[0]:null,x=Array.isArray(H)?H[1]:typeof H=="number"?H:null,k=Array.isArray(V)?V[0]:null,A=Array.isArray(V)?V[1]:typeof V=="number"?V:null;function _(t){let s=t*100;switch(W){case "right":return `inset(0 0 0 ${100-s}%)`;case "top":return `inset(0 0 ${100-s}% 0)`;case "bottom":return `inset(${100-s}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-s}% 0 0)`}}let w=W?[]:Array.from(e.querySelectorAll(o)),g=[],O=[],C=0,F=0,L=false,G=false,N=0,ne=false,D=-1,se=-1,z=false,oe=0,K=0,ie,he=null,ae=new Set,le=-1,Te=performance.now();function Q(){return b?S==="x"?b.scrollLeft:b.scrollTop:S==="x"?window.scrollX:window.scrollY}function Me(){return b?S==="x"?b.clientWidth:b.clientHeight:S==="x"?window.innerWidth:window.innerHeight}function Le(){let t=e.getBoundingClientRect(),s,a,m;if(b){let v=b.getBoundingClientRect();s=S==="x"?t.left-v.left+b.scrollLeft:t.top-v.top+b.scrollTop,a=S==="x"?t.width:t.height,m=Q();}else s=S==="x"?t.left:t.top,a=S==="x"?t.width:t.height,m=Q();let q=$e({top:s,height:a},m,Me(),Ae,De);C=q.tStart,F=q.tEnd,Ve&&process.env.NODE_ENV!=="production"&&(he?.remove(),he=Ke(C,F,S));}function qe(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),W){let a=s==="reverse"?1-t:t;e.style.clipPath=_(a);return}w.forEach((a,m)=>{a.style.strokeDashoffset=s==="reverse"?`${g[m]*t}`:`${g[m]*(1-t)}`,d&&(a.style.opacity=s==="reverse"?`${1-t}`:`${t}`),I&&E?a.style.stroke=xe(I,E,t):E&&(a.style.stroke=E),$!==null&&x!==null?a.style.strokeWidth=`${$+(x-$)*t}`:x!==null&&(a.style.strokeWidth=`${x}`),k!==null&&A!==null?a.style.fillOpacity=`${k+(A-k)*t}`:A!==null&&(a.style.fillOpacity=`${A}`),P&&a.tagName.toLowerCase()==="path"&&O[m]&&a.setAttribute("d",He(O[m],P,t));});}function Pe(){if(e.style.setProperty("--scroll-draw-progress","0"),W){e.style.clipPath=_(0);return}w.forEach((t,s)=>{t.style.strokeDasharray=`${g[s]}`,t.style.strokeDashoffset=y==="reverse"?"0":`${g[s]}`,d?t.style.opacity=y==="reverse"?"1":"0":t.style.opacity="",I&&(t.style.stroke=I),$!==null&&(t.style.strokeWidth=`${$}`),k!==null&&(t.style.fillOpacity=`${k}`),P&&t.tagName.toLowerCase()==="path"&&O[s]&&t.setAttribute("d",O[s]);});}if(w.forEach(t=>{je(t);let s=Ee(t);g.push(s),t.tagName.toLowerCase()==="path"?O.push(t.getAttribute("d")??""):O.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=y==="reverse"?`${s}`:"0",d&&(t.style.opacity="1"),E&&(t.style.stroke=E),x!==null&&(t.style.strokeWidth=`${x}`),A!==null&&(t.style.fillOpacity=`${A}`),P&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",P)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=y==="reverse"?"0":`${s}`,d?t.style.opacity=y==="reverse"?"1":"0":t.style.opacity="",I&&(t.style.stroke=I),$!==null&&(t.style.strokeWidth=`${$}`),k!==null&&(t.style.fillOpacity=`${k}`));}),W){if(n)return e.style.clipPath=_(1),j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=_(0);}else if(n)return j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function Be(){return !(ze===false||!Ue()||!w.length||typeof p!="string"||!(p in Re)||W||S!=="y"||b||c!==1||X!==0||J||Z||te!==false||P||ee||U||me>0||ye||ge||j||R!=null||H!=null||V!=null||(M.start??"top bottom").trim()!=="top bottom"||(M.end??"bottom top").trim()!=="bottom top")}function _e(){let t=`svg-scroll-draw-${++Je}`,s=y==="reverse"?"0":"var(--ssd-len)",a=y==="reverse"?"var(--ssd-len)":"0",m=`stroke-dashoffset:${s};`,q=`stroke-dashoffset:${a};`;d&&(m+=`opacity:${y==="reverse"?1:0};`,q+=`opacity:${y==="reverse"?0:1};`);let v=document.createElement("style");v.setAttribute("data-svg-scroll-draw",""),v.textContent=`@keyframes ${t}{from{${m}}to{${q}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Re[p]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(v);function i(u,T){u.style.setProperty("--ssd-len",String(g[T])),u.style.strokeDasharray=`${g[T]}`,u.style.strokeDashoffset="",u.style.opacity="",u.style.animationPlayState="",u.classList.add(t);}w.forEach(i);let l=false,h=-1;function f(){if(h>=0)return h;let u=e.getBoundingClientRect(),{tStart:T,tEnd:Y}=$e({top:u.top,height:u.height},Q(),Me(),Ae,De);return re(B(Q(),T,Y,c))}return {destroy(){w.forEach(u=>{u.classList.remove(t),u.style.removeProperty("--ssd-len"),u.style.animationPlayState="";}),v.remove();},replay(){l=false,h=-1,w.forEach(i);},pause(){l=true,w.forEach(u=>{u.style.animationPlayState="paused";});},resume(){l&&(l=false,w.forEach(u=>{u.style.animationPlayState="running";}));},seek(u){let T=Math.min(1,Math.max(0,u));h=T,l=true,w.forEach((Y,Ie)=>{Y.classList.remove(t),Y.style.strokeDashoffset=y==="reverse"?`${g[Ie]*T}`:`${g[Ie]*(1-T)}`,d&&(Y.style.opacity=y==="reverse"?`${1-T}`:`${T}`);});},getProgress(){return f()}}}if(Be())return _e();Le();function ue(){if(!ne||z)return;let t=performance.now(),s=Q(),a=c;if(te!==false){let i=t-Te,l=i>0?Math.abs(s-(le<0?s:le))/i:0;a=c*Math.max(.2,1+l*(typeof te=="number"?te:1)*.04);}le=s,Te=t;let m=Z?se===-1||s>=se?"forward":"reverse":y;se=s;let q=F-C,v=true;if(W){let i=re(B(s,C,F,a));J&&!Z&&(D=Math.max(D,i),i=D),oe=i,e.style.setProperty("--scroll-draw-progress",String(i));let l=m==="reverse"?1-i:i;e.style.clipPath=_(l),ye?.(i),!G&&B(s,C,F,a)>0&&(G=true,ge?.()),i>=1&&!L?(L=true,j?.(),K<(U==="infinite"?1/0:U??0)&&(K++,ie=setTimeout(()=>{D=-1,G=false,L=false,e.style.clipPath=_(0);},ke))):i<1&&!J&&(L=false),N=requestAnimationFrame(ue);return}if(w.forEach((i,l)=>{let h=l*X*q,f=re(B(s,C+h,F+h,a));J&&!Z&&(D=Math.max(D,f),f=D),oe=f,i.style.strokeDashoffset=m==="reverse"?`${g[l]*f}`:`${g[l]*(1-f)}`,d&&(i.style.opacity=m==="reverse"?`${1-f}`:`${f}`),I&&E?i.style.stroke=xe(I,E,f):E&&(i.style.stroke=E),$!==null&&x!==null?i.style.strokeWidth=`${$+(x-$)*f}`:x!==null&&(i.style.strokeWidth=`${x}`),k!==null&&A!==null?i.style.fillOpacity=`${k+(A-k)*f}`:A!==null&&(i.style.fillOpacity=`${A}`),P&&i.tagName.toLowerCase()==="path"&&O[l]&&i.setAttribute("d",He(O[l],P,f)),l===0&&(ye?.(f),e.style.setProperty("--scroll-draw-progress",String(f))),f<1&&(v=false);}),ee){let i=re(B(s,C,F,a));for(let l in ee){let h=parseFloat(l);i>=h&&!ae.has(h)&&(ae.add(h),ee[l]?.());}}!G&&B(s,C,F,a)>0&&(G=true,ge?.()),v&&!L?(L=true,j?.(),K<(U==="infinite"?1/0:U??0)&&(K++,ie=setTimeout(()=>{D=-1,G=false,L=false,ae.clear(),Pe();},ke))):!v&&!J&&(L=false),N=requestAnimationFrame(ue);}let be=new IntersectionObserver(t=>{t.forEach(s=>{ne=s.isIntersecting,ne&&!z?N=requestAnimationFrame(ue):cancelAnimationFrame(N);});},{root:b??null,threshold:We,rootMargin:Ge}),we;function ce(){clearTimeout(we),we=setTimeout(()=>{w.forEach((t,s)=>{g[s]=Ee(t),t.style.strokeDasharray=`${g[s]}`;}),Le();},150);}return window.addEventListener("resize",ce),window.addEventListener("orientationchange",ce),me>0?setTimeout(()=>be.observe(e),me):be.observe(e),{destroy(){cancelAnimationFrame(N),clearTimeout(ie),be.disconnect(),window.removeEventListener("resize",ce),window.removeEventListener("orientationchange",ce),clearTimeout(we),he?.remove();},replay(){D=-1,se=-1,le=-1,G=false,L=false,K=0,z=false,ae.clear(),clearTimeout(ie),Pe();},pause(){z=true,cancelAnimationFrame(N);},resume(){z&&(z=false,ne&&(N=requestAnimationFrame(ue)));},seek(t){let s=Math.min(1,Math.max(0,t));oe=s,D=s,z=true,cancelAnimationFrame(N),qe(s,y);},getProgress(){return oe}}}function Qe(e,r){let n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return n;let o=typeof e=="string"?document.querySelector(e):e;return o?fe(o,r):(console.warn("[svg-scroll-draw] Container not found:",e),n)}function it(e=document){return Array.from(e.querySelectorAll("[data-scroll-draw]")).map(r=>{let n={};try{let o=r.dataset.scrollDrawOptions??r.dataset.scrollDrawoptions??"";o&&(n=JSON.parse(o));}catch{}return fe(r,n)})}export{it as initScrollDraw,Qe as scrollDraw};
1
+ function Ve({bounces:e=3,decay:r=.5}={}){let n=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,r)),d=Math.sqrt(o),m=0,b=[];for(let u=0;u<n;u++){let h=Math.pow(d,u);b.push(h),m+=h;}let x=[0],N=0;for(let u=0;u<n;u++)N+=b[u]/m,x.push(N);return u=>{if(u<=0)return 0;if(u>=1)return 1;for(let h=0;h<n;h++)if(u<=x[h+1]){let se=(u-x[h])/(x[h+1]-x[h]);if(h===0)return se*(2-se);let L=1-Math.pow(o,h);return L+(1-L)*(2*se-1)*(2*se-1)}return 1}}function Ge({amplitude:e=1,period:r=.4}={}){let n=Math.max(1,e),o=Math.max(.1,r),d=n<=1?o/4:o/(2*Math.PI)*Math.asin(1/n);return m=>m<=0?0:m>=1?1:n*Math.pow(2,-10*m)*Math.sin((m-d)*(2*Math.PI)/o)+1}var ke={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:Ve(),elastic:Ge()};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 We(e,r,n,o){switch(o){case "top":return e+n;case "center":return e+n+r/2;case "bottom":return e+n+r;default:return e+n}}function qe(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function we(e){let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(n+o)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function Ze(e,r,n){return Math.min(n,Math.max(r,e))}function ne(e,r,n,o){return n===r?0:Ze((e-r)/(n-r)*o,0,1)}function Le(e,r,n,o,d){let m=We(e.top,e.height,r,o.element)-qe(o.viewport,n),b=We(e.top,e.height,r,d.element)-qe(d.viewport,n);return {tStart:m,tEnd:b}}function ze(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function ve(e,r,n){let o=ze(e),d=ze(r);return !o||!d?e:`rgb(${Math.round(o[0]+(d[0]-o[0])*n)},${Math.round(o[1]+(d[1]-o[1])*n)},${Math.round(o[2]+(d[2]-o[2])*n)})`}function Be(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}var _e={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},et=0;function tt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function rt(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?Be("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&Be("Element has a fill \u2014 it may obscure the stroke animation.",e);}function nt(e,r,n){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function d(){let m=n==="x"?window.scrollX:window.scrollY,b=e-m,x=r-m,N=n==="x";o.innerHTML=`
2
+ <div style="position:absolute;${N?`left:${b}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${b}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
3
+ <div style="position:absolute;${N?`left:${x}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${x}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(o),window.addEventListener("scroll",d,{passive:true}),d(),o}function Pe(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),d=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,m=>{let b=parseFloat(m),x=o[d++]??b;return String(+(b+(x-b)*n).toFixed(4))})}function Ee(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let n=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:d=1,fade:m=false,easing:b="linear",trigger:x={},stagger:N=0,direction:u="forward",once:h=false,debug:se=false,axis:L="y",scrollContainer:xe,autoReverse:ce=false,delay:ie=0,strokeColor:U,strokeWidth:j,fillOpacity:K,waypoints:Q,velocityScale:fe=false,threshold:Ie=0,rootMargin:Oe="0px",repeat:Y=0,repeatDelay:$e=0,morphTo:R,clip:Se,autoplay:Xe=false,duration:Je=1e3,native:Ue=true,onProgress:le,onStart:me,onComplete:oe}=r,G=Se===true?"left":typeof Se=="string"?Se:false,Z=typeof b=="function"?b:ke[b]??ke.linear,Fe=De(x.start??"top bottom"),Ce=De(x.end??"bottom top"),P=typeof xe=="string"?document.querySelector(xe):xe??null,H=Array.isArray(U)?U[0]:null,M=Array.isArray(U)?U[1]:typeof U=="string"?U:null,I=Array.isArray(j)?j[0]:null,A=Array.isArray(j)?j[1]:typeof j=="number"?j:null,O=Array.isArray(K)?K[0]:null,T=Array.isArray(K)?K[1]:typeof K=="number"?K:null;function ee(t){let s=t*100;switch(G){case "right":return `inset(0 0 0 ${100-s}%)`;case "top":return `inset(0 0 ${100-s}% 0)`;case "bottom":return `inset(${100-s}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-s}% 0 0)`}}let $=G?[]:Array.from(e.querySelectorAll(o)),v=[],W=[],B=0,_=0,S=false,C=false,E=0,pe=false,q=-1,de=-1,k=false,te=0,V=0,X,Me=null,J=new Set,ye=-1,Ne=performance.now();function ue(){return P?L==="x"?P.scrollLeft:P.scrollTop:L==="x"?window.scrollX:window.scrollY}function Re(){return P?L==="x"?P.clientWidth:P.clientHeight:L==="x"?window.innerWidth:window.innerHeight}function He(){let t=e.getBoundingClientRect(),s,l,g;if(P){let D=P.getBoundingClientRect();s=L==="x"?t.left-D.left+P.scrollLeft:t.top-D.top+P.scrollTop,l=L==="x"?t.width:t.height,g=ue();}else s=L==="x"?t.left:t.top,l=L==="x"?t.width:t.height,g=ue();let F=Le({top:s,height:l},g,Re(),Fe,Ce);B=F.tStart,_=F.tEnd,se&&process.env.NODE_ENV!=="production"&&(Me?.remove(),Me=nt(B,_,L));}function je(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),G){let l=s==="reverse"?1-t:t;e.style.clipPath=ee(l);return}$.forEach((l,g)=>{l.style.strokeDashoffset=s==="reverse"?`${v[g]*t}`:`${v[g]*(1-t)}`,m&&(l.style.opacity=s==="reverse"?`${1-t}`:`${t}`),H&&M?l.style.stroke=ve(H,M,t):M&&(l.style.stroke=M),I!==null&&A!==null?l.style.strokeWidth=`${I+(A-I)*t}`:A!==null&&(l.style.strokeWidth=`${A}`),O!==null&&T!==null?l.style.fillOpacity=`${O+(T-O)*t}`:T!==null&&(l.style.fillOpacity=`${T}`),R&&l.tagName.toLowerCase()==="path"&&W[g]&&l.setAttribute("d",Pe(W[g],R,t));});}function he(){if(e.style.setProperty("--scroll-draw-progress","0"),G){e.style.clipPath=ee(0);return}$.forEach((t,s)=>{t.style.strokeDasharray=`${v[s]}`,t.style.strokeDashoffset=u==="reverse"?"0":`${v[s]}`,m?t.style.opacity=u==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),I!==null&&(t.style.strokeWidth=`${I}`),O!==null&&(t.style.fillOpacity=`${O}`),R&&t.tagName.toLowerCase()==="path"&&W[s]&&t.setAttribute("d",W[s]);});}if($.forEach(t=>{rt(t);let s=we(t);v.push(s),t.tagName.toLowerCase()==="path"?W.push(t.getAttribute("d")??""):W.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=u==="reverse"?`${s}`:"0",m&&(t.style.opacity="1"),M&&(t.style.stroke=M),A!==null&&(t.style.strokeWidth=`${A}`),T!==null&&(t.style.fillOpacity=`${T}`),R&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",R)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=u==="reverse"?"0":`${s}`,m?t.style.opacity=u==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),I!==null&&(t.style.strokeWidth=`${I}`),O!==null&&(t.style.fillOpacity=`${O}`));}),G){if(n)return e.style.clipPath=ee(1),oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=ee(0);}else if(n)return oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function Ke(){return !(Ue===false||!tt()||!$.length||typeof b!="string"||!(b in _e)||G||L!=="y"||P||d!==1||N!==0||h||ce||fe!==false||R||Q||Y||ie>0||le||me||oe||U!=null||j!=null||K!=null||(x.start??"top bottom").trim()!=="top bottom"||(x.end??"bottom top").trim()!=="bottom top")}function Qe(){let t=`svg-scroll-draw-${++et}`,s=u==="reverse"?"0":"var(--ssd-len)",l=u==="reverse"?"var(--ssd-len)":"0",g=`stroke-dashoffset:${s};`,F=`stroke-dashoffset:${l};`;m&&(g+=`opacity:${u==="reverse"?1:0};`,F+=`opacity:${u==="reverse"?0:1};`);let D=document.createElement("style");D.setAttribute("data-svg-scroll-draw",""),D.textContent=`@keyframes ${t}{from{${g}}to{${F}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${_e[b]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(D);function i(a,f){a.style.setProperty("--ssd-len",String(v[f])),a.style.strokeDasharray=`${v[f]}`,a.style.strokeDashoffset="",a.style.opacity="",a.style.animationPlayState="",a.classList.add(t);}$.forEach(i);let p=false,w=-1;function c(){if(w>=0)return w;let a=e.getBoundingClientRect(),{tStart:f,tEnd:y}=Le({top:a.top,height:a.height},ue(),Re(),Fe,Ce);return Z(ne(ue(),f,y,d))}return {destroy(){$.forEach(a=>{a.classList.remove(t),a.style.removeProperty("--ssd-len"),a.style.animationPlayState="";}),D.remove();},replay(){p=false,w=-1,$.forEach(i);},pause(){p=true,$.forEach(a=>{a.style.animationPlayState="paused";});},resume(){p&&(p=false,$.forEach(a=>{a.style.animationPlayState="running";}));},seek(a){let f=Math.min(1,Math.max(0,a));w=f,p=true,$.forEach((y,re)=>{y.classList.remove(t),y.style.strokeDashoffset=u==="reverse"?`${v[re]*f}`:`${v[re]*(1-f)}`,m&&(y.style.opacity=u==="reverse"?`${1-f}`:`${f}`);});},getProgress(){return c()}}}if(Ke())return Qe();function Ye(){let t=Math.max(1,Je),s=0,l=0;function g(c){let a=true;if(G){let f=Math.min(1,Math.max(0,c/t)),y=Z(f);te=y,e.style.setProperty("--scroll-draw-progress",String(y)),e.style.clipPath=ee(u==="reverse"?1-y:y),le?.(y),f<1&&(a=false);}else $.forEach((f,y)=>{let re=y*N*t,ae=Math.min(1,Math.max(0,(c-re)/t)),z=Z(ae);f.style.strokeDashoffset=u==="reverse"?`${v[y]*z}`:`${v[y]*(1-z)}`,m&&(f.style.opacity=u==="reverse"?`${1-z}`:`${z}`),H&&M?f.style.stroke=ve(H,M,z):M&&(f.style.stroke=M),I!==null&&A!==null?f.style.strokeWidth=`${I+(A-I)*z}`:A!==null&&(f.style.strokeWidth=`${A}`),O!==null&&T!==null?f.style.fillOpacity=`${O+(T-O)*z}`:T!==null&&(f.style.fillOpacity=`${T}`),R&&f.tagName.toLowerCase()==="path"&&W[y]&&f.setAttribute("d",Pe(W[y],R,z)),y===0&&(le?.(z),e.style.setProperty("--scroll-draw-progress",String(z))),ae<1&&(a=false);});if(Q){let f=Math.min(1,Math.max(0,c/t)),y=Z(f);for(let re in Q){let ae=parseFloat(re);y>=ae&&!J.has(ae)&&(J.add(ae),Q[re]?.());}}return a}function F(c){if(k)return;let a=c-s;C||(C=true,me?.());let f=g(a);if(f&&!S){S=true,g(t*(1+Math.max(0,$.length-1)*N)),oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{s=performance.now(),C=false,S=false,J.clear(),he(),E=requestAnimationFrame(F);},$e));return}f||(E=requestAnimationFrame(F));}function D(){cancelAnimationFrame(E),clearTimeout(X),s=performance.now(),l=0,k=false,C=false,S=false,V=0,J.clear(),he(),E=requestAnimationFrame(F);}let i=new IntersectionObserver(c=>{c.forEach(a=>{a.isIntersecting&&!(h&&S)?D():!a.isIntersecting&&!h&&!S&&(cancelAnimationFrame(E),clearTimeout(X),s=null);});},{root:P??null,threshold:Ie,rootMargin:Oe}),p;function w(){clearTimeout(p),p=setTimeout(()=>{$.forEach((c,a)=>{v[a]=we(c),c.style.strokeDasharray=`${v[a]}`;});},150);}return window.addEventListener("resize",w),window.addEventListener("orientationchange",w),ie>0?setTimeout(()=>i.observe(e),ie):i.observe(e),{destroy(){cancelAnimationFrame(E),clearTimeout(X),i.disconnect(),window.removeEventListener("resize",w),window.removeEventListener("orientationchange",w),clearTimeout(p);},replay(){V=0,D();},pause(){k||(k=true,l=performance.now()-s,cancelAnimationFrame(E));},resume(){k&&(k=false,s=performance.now()-l,E=requestAnimationFrame(F));},seek(c){let a=Math.min(1,Math.max(0,c));te=a,k=true,l=a*t,s=performance.now()-l,cancelAnimationFrame(E),g(l);},getProgress(){return te}}}if(Xe)return Ye();He();function ge(){if(!pe||k)return;let t=performance.now(),s=ue(),l=d;if(fe!==false){let i=t-Ne,p=i>0?Math.abs(s-(ye<0?s:ye))/i:0;l=d*Math.max(.2,1+p*(typeof fe=="number"?fe:1)*.04);}ye=s,Ne=t;let g=ce?de===-1||s>=de?"forward":"reverse":u;de=s;let F=_-B,D=true;if(G){let i=Z(ne(s,B,_,l));h&&!ce&&(q=Math.max(q,i),i=q),te=i,e.style.setProperty("--scroll-draw-progress",String(i));let p=g==="reverse"?1-i:i;e.style.clipPath=ee(p),le?.(i),!C&&ne(s,B,_,l)>0&&(C=true,me?.()),i>=1&&!S?(S=true,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{q=-1,C=false,S=false,e.style.clipPath=ee(0);},$e))):i<1&&!h&&(S=false),E=requestAnimationFrame(ge);return}if($.forEach((i,p)=>{let w=p*N*F,c=Z(ne(s,B+w,_+w,l));h&&!ce&&(q=Math.max(q,c),c=q),te=c,i.style.strokeDashoffset=g==="reverse"?`${v[p]*c}`:`${v[p]*(1-c)}`,m&&(i.style.opacity=g==="reverse"?`${1-c}`:`${c}`),H&&M?i.style.stroke=ve(H,M,c):M&&(i.style.stroke=M),I!==null&&A!==null?i.style.strokeWidth=`${I+(A-I)*c}`:A!==null&&(i.style.strokeWidth=`${A}`),O!==null&&T!==null?i.style.fillOpacity=`${O+(T-O)*c}`:T!==null&&(i.style.fillOpacity=`${T}`),R&&i.tagName.toLowerCase()==="path"&&W[p]&&i.setAttribute("d",Pe(W[p],R,c)),p===0&&(le?.(c),e.style.setProperty("--scroll-draw-progress",String(c))),c<1&&(D=false);}),Q){let i=Z(ne(s,B,_,l));for(let p in Q){let w=parseFloat(p);i>=w&&!J.has(w)&&(J.add(w),Q[p]?.());}}!C&&ne(s,B,_,l)>0&&(C=true,me?.()),D&&!S?(S=true,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{q=-1,C=false,S=false,J.clear(),he();},$e))):!D&&!h&&(S=false),E=requestAnimationFrame(ge);}let Ae=new IntersectionObserver(t=>{t.forEach(s=>{pe=s.isIntersecting,pe&&!k?E=requestAnimationFrame(ge):cancelAnimationFrame(E);});},{root:P??null,threshold:Ie,rootMargin:Oe}),Te;function be(){clearTimeout(Te),Te=setTimeout(()=>{$.forEach((t,s)=>{v[s]=we(t),t.style.strokeDasharray=`${v[s]}`;}),He();},150);}return window.addEventListener("resize",be),window.addEventListener("orientationchange",be),ie>0?setTimeout(()=>Ae.observe(e),ie):Ae.observe(e),{destroy(){cancelAnimationFrame(E),clearTimeout(X),Ae.disconnect(),window.removeEventListener("resize",be),window.removeEventListener("orientationchange",be),clearTimeout(Te),Me?.remove();},replay(){q=-1,de=-1,ye=-1,C=false,S=false,V=0,k=false,J.clear(),clearTimeout(X),he();},pause(){k=true,cancelAnimationFrame(E);},resume(){k&&(k=false,pe&&(E=requestAnimationFrame(ge)));},seek(t){let s=Math.min(1,Math.max(0,t));te=s,q=s,k=true,cancelAnimationFrame(E),je(s,u);},getProgress(){return te}}}function st(e,r){let n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return n;let o=typeof e=="string"?document.querySelector(e):e;return o?Ee(o,r):(console.warn("[svg-scroll-draw] Container not found:",e),n)}function pt(e=document){return Array.from(e.querySelectorAll("[data-scroll-draw]")).map(r=>{let n={};try{let o=r.dataset.scrollDrawOptions??r.dataset.scrollDrawoptions??"";o&&(n=JSON.parse(o));}catch{}return Ee(r,n)})}export{pt as initScrollDraw,st as scrollDraw};
@@ -1,3 +1,3 @@
1
- "use strict";var SvgScrollDraw=(()=>{var ve=Object.defineProperty;var Je=Object.getOwnPropertyDescriptor;var Ke=Object.getOwnPropertyNames;var Qe=Object.prototype.hasOwnProperty;var Ye=(e,r)=>{for(var n in r)ve(e,n,{get:r[n],enumerable:!0})},Ze=(e,r,n,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of Ke(r))!Qe.call(e,a)&&a!==n&&ve(e,a,{get:()=>r[a],enumerable:!(o=Je(r,a))||o.enumerable});return e};var et=e=>Ze(ve({},"__esModule",{value:!0}),e);var at={};Ye(at,{createSpring:()=>He,scrollDraw:()=>it});var Ee={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 He({tension:e=2.5,friction:r=2.2}={}){return n=>1-Math.cos(n*Math.PI*e)*Math.pow(1-n,r)}function $e(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return{element:"top",viewport:r};let[n="top",o="bottom"]=r.split(/\s+/).filter(Boolean);return{element:n,viewport:o}}function Fe(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 Ne(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case"top":return 0;case"center":return r/2;case"bottom":return r;default:return r}}function Se(e){let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(n+o)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function tt(e,r,n){return Math.min(n,Math.max(r,e))}function B(e,r,n,o){return n===r?0:tt((e-r)/(n-r)*o,0,1)}function xe(e,r,n,o,a){let p=Fe(e.top,e.height,r,o.element)-Ne(o.viewport,n),f=Fe(e.top,e.height,r,a.element)-Ne(a.viewport,n);return{tStart:p,tEnd:f}}function Re(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 Ae(e,r,n){let o=Re(e),a=Re(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 Ve(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r)}var We={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},rt=0;function nt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function st(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?Ve("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&Ve("Element has a fill \u2014 it may obscure the stroke animation.",e)}function ot(e,r,n){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function a(){let p=n==="x"?window.scrollX:window.scrollY,f=e-p,b=r-p,X=n==="x";o.innerHTML=`
2
- <div style="position:absolute;${X?`left:${f}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${f}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
3
- <div style="position:absolute;${X?`left:${b}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${b}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:!0}),a(),o}function Ge(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),a=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,p=>{let f=parseFloat(p),b=o[a++]??f;return String(+(f+(b-f)*n).toFixed(4))})}function fe(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:p=!1,easing:f="linear",trigger:b={},stagger:X=0,direction:y="forward",once:U=!1,debug:ze=!1,axis:$="y",scrollContainer:pe,autoReverse:Z=!1,delay:me=0,strokeColor:R,strokeWidth:H,fillOpacity:V,waypoints:ee,velocityScale:te=!1,threshold:qe=0,rootMargin:Be="0px",repeat:j=0,repeatDelay:Te=0,morphTo:P,clip:de,native:_e=!0,onProgress:ye,onStart:ge,onComplete:J}=r,W=de===!0?"left":typeof de=="string"?de:!1,re=typeof f=="function"?f:Ee[f]??Ee.linear,De=$e(b.start??"top bottom"),Me=$e(b.end??"bottom top"),w=typeof pe=="string"?document.querySelector(pe):pe??null,I=Array.isArray(R)?R[0]:null,S=Array.isArray(R)?R[1]:typeof R=="string"?R:null,x=Array.isArray(H)?H[0]:null,A=Array.isArray(H)?H[1]:typeof H=="number"?H:null,k=Array.isArray(V)?V[0]:null,T=Array.isArray(V)?V[1]:typeof V=="number"?V:null;function _(t){let s=t*100;switch(W){case"right":return`inset(0 0 0 ${100-s}%)`;case"top":return`inset(0 0 ${100-s}% 0)`;case"bottom":return`inset(${100-s}% 0 0 0)`;case"center":return`circle(${t*150}% at 50% 50%)`;default:return`inset(0 ${100-s}% 0 0)`}}let v=W?[]:Array.from(e.querySelectorAll(o)),g=[],C=[],O=0,F=0,L=!1,G=!1,N=0,ne=!1,D=-1,se=-1,z=!1,oe=0,K=0,ie,he=null,ae=new Set,le=-1,Le=performance.now();function Q(){return w?$==="x"?w.scrollLeft:w.scrollTop:$==="x"?window.scrollX:window.scrollY}function Pe(){return w?$==="x"?w.clientWidth:w.clientHeight:$==="x"?window.innerWidth:window.innerHeight}function Ie(){let t=e.getBoundingClientRect(),s,l,d;if(w){let E=w.getBoundingClientRect();s=$==="x"?t.left-E.left+w.scrollLeft:t.top-E.top+w.scrollTop,l=$==="x"?t.width:t.height,d=Q()}else s=$==="x"?t.left:t.top,l=$==="x"?t.width:t.height,d=Q();let q=xe({top:s,height:l},d,Pe(),De,Me);O=q.tStart,F=q.tEnd,ze&&process.env.NODE_ENV!=="production"&&(he?.remove(),he=ot(O,F,$))}function Xe(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),W){let l=s==="reverse"?1-t:t;e.style.clipPath=_(l);return}v.forEach((l,d)=>{l.style.strokeDashoffset=s==="reverse"?`${g[d]*t}`:`${g[d]*(1-t)}`,p&&(l.style.opacity=s==="reverse"?`${1-t}`:`${t}`),I&&S?l.style.stroke=Ae(I,S,t):S&&(l.style.stroke=S),x!==null&&A!==null?l.style.strokeWidth=`${x+(A-x)*t}`:A!==null&&(l.style.strokeWidth=`${A}`),k!==null&&T!==null?l.style.fillOpacity=`${k+(T-k)*t}`:T!==null&&(l.style.fillOpacity=`${T}`),P&&l.tagName.toLowerCase()==="path"&&C[d]&&l.setAttribute("d",Ge(C[d],P,t))})}function Ce(){if(e.style.setProperty("--scroll-draw-progress","0"),W){e.style.clipPath=_(0);return}v.forEach((t,s)=>{t.style.strokeDasharray=`${g[s]}`,t.style.strokeDashoffset=y==="reverse"?"0":`${g[s]}`,p?t.style.opacity=y==="reverse"?"1":"0":t.style.opacity="",I&&(t.style.stroke=I),x!==null&&(t.style.strokeWidth=`${x}`),k!==null&&(t.style.fillOpacity=`${k}`),P&&t.tagName.toLowerCase()==="path"&&C[s]&&t.setAttribute("d",C[s])})}if(v.forEach(t=>{st(t);let s=Se(t);g.push(s),t.tagName.toLowerCase()==="path"?C.push(t.getAttribute("d")??""):C.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=y==="reverse"?`${s}`:"0",p&&(t.style.opacity="1"),S&&(t.style.stroke=S),A!==null&&(t.style.strokeWidth=`${A}`),T!==null&&(t.style.fillOpacity=`${T}`),P&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",P)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=y==="reverse"?"0":`${s}`,p?t.style.opacity=y==="reverse"?"1":"0":t.style.opacity="",I&&(t.style.stroke=I),x!==null&&(t.style.strokeWidth=`${x}`),k!==null&&(t.style.fillOpacity=`${k}`))}),W){if(n)return e.style.clipPath=_(1),J?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=_(0)}else if(n)return J?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function Ue(){return!(_e===!1||!nt()||!v.length||typeof f!="string"||!(f in We)||W||$!=="y"||w||a!==1||X!==0||U||Z||te!==!1||P||ee||j||me>0||ye||ge||J||R!=null||H!=null||V!=null||(b.start??"top bottom").trim()!=="top bottom"||(b.end??"bottom top").trim()!=="bottom top")}function je(){let t=`svg-scroll-draw-${++rt}`,s=y==="reverse"?"0":"var(--ssd-len)",l=y==="reverse"?"var(--ssd-len)":"0",d=`stroke-dashoffset:${s};`,q=`stroke-dashoffset:${l};`;p&&(d+=`opacity:${y==="reverse"?1:0};`,q+=`opacity:${y==="reverse"?0:1};`);let E=document.createElement("style");E.setAttribute("data-svg-scroll-draw",""),E.textContent=`@keyframes ${t}{from{${d}}to{${q}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${We[f]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(E);function i(u,M){u.style.setProperty("--ssd-len",String(g[M])),u.style.strokeDasharray=`${g[M]}`,u.style.strokeDashoffset="",u.style.opacity="",u.style.animationPlayState="",u.classList.add(t)}v.forEach(i);let c=!1,h=-1;function m(){if(h>=0)return h;let u=e.getBoundingClientRect(),{tStart:M,tEnd:Y}=xe({top:u.top,height:u.height},Q(),Pe(),De,Me);return re(B(Q(),M,Y,a))}return{destroy(){v.forEach(u=>{u.classList.remove(t),u.style.removeProperty("--ssd-len"),u.style.animationPlayState=""}),E.remove()},replay(){c=!1,h=-1,v.forEach(i)},pause(){c=!0,v.forEach(u=>{u.style.animationPlayState="paused"})},resume(){c&&(c=!1,v.forEach(u=>{u.style.animationPlayState="running"}))},seek(u){let M=Math.min(1,Math.max(0,u));h=M,c=!0,v.forEach((Y,Oe)=>{Y.classList.remove(t),Y.style.strokeDashoffset=y==="reverse"?`${g[Oe]*M}`:`${g[Oe]*(1-M)}`,p&&(Y.style.opacity=y==="reverse"?`${1-M}`:`${M}`)})},getProgress(){return m()}}}if(Ue())return je();Ie();function ce(){if(!ne||z)return;let t=performance.now(),s=Q(),l=a;if(te!==!1){let i=t-Le,c=i>0?Math.abs(s-(le<0?s:le))/i:0;l=a*Math.max(.2,1+c*(typeof te=="number"?te:1)*.04)}le=s,Le=t;let d=Z?se===-1||s>=se?"forward":"reverse":y;se=s;let q=F-O,E=!0;if(W){let i=re(B(s,O,F,l));U&&!Z&&(D=Math.max(D,i),i=D),oe=i,e.style.setProperty("--scroll-draw-progress",String(i));let c=d==="reverse"?1-i:i;e.style.clipPath=_(c),ye?.(i),!G&&B(s,O,F,l)>0&&(G=!0,ge?.()),i>=1&&!L?(L=!0,J?.(),K<(j==="infinite"?1/0:j??0)&&(K++,ie=setTimeout(()=>{D=-1,G=!1,L=!1,e.style.clipPath=_(0)},Te))):i<1&&!U&&(L=!1),N=requestAnimationFrame(ce);return}if(v.forEach((i,c)=>{let h=c*X*q,m=re(B(s,O+h,F+h,l));U&&!Z&&(D=Math.max(D,m),m=D),oe=m,i.style.strokeDashoffset=d==="reverse"?`${g[c]*m}`:`${g[c]*(1-m)}`,p&&(i.style.opacity=d==="reverse"?`${1-m}`:`${m}`),I&&S?i.style.stroke=Ae(I,S,m):S&&(i.style.stroke=S),x!==null&&A!==null?i.style.strokeWidth=`${x+(A-x)*m}`:A!==null&&(i.style.strokeWidth=`${A}`),k!==null&&T!==null?i.style.fillOpacity=`${k+(T-k)*m}`:T!==null&&(i.style.fillOpacity=`${T}`),P&&i.tagName.toLowerCase()==="path"&&C[c]&&i.setAttribute("d",Ge(C[c],P,m)),c===0&&(ye?.(m),e.style.setProperty("--scroll-draw-progress",String(m))),m<1&&(E=!1)}),ee){let i=re(B(s,O,F,l));for(let c in ee){let h=parseFloat(c);i>=h&&!ae.has(h)&&(ae.add(h),ee[c]?.())}}!G&&B(s,O,F,l)>0&&(G=!0,ge?.()),E&&!L?(L=!0,J?.(),K<(j==="infinite"?1/0:j??0)&&(K++,ie=setTimeout(()=>{D=-1,G=!1,L=!1,ae.clear(),Ce()},Te))):!E&&!U&&(L=!1),N=requestAnimationFrame(ce)}let be=new IntersectionObserver(t=>{t.forEach(s=>{ne=s.isIntersecting,ne&&!z?N=requestAnimationFrame(ce):cancelAnimationFrame(N)})},{root:w??null,threshold:qe,rootMargin:Be}),we;function ue(){clearTimeout(we),we=setTimeout(()=>{v.forEach((t,s)=>{g[s]=Se(t),t.style.strokeDasharray=`${g[s]}`}),Ie()},150)}return window.addEventListener("resize",ue),window.addEventListener("orientationchange",ue),me>0?setTimeout(()=>be.observe(e),me):be.observe(e),{destroy(){cancelAnimationFrame(N),clearTimeout(ie),be.disconnect(),window.removeEventListener("resize",ue),window.removeEventListener("orientationchange",ue),clearTimeout(we),he?.remove()},replay(){D=-1,se=-1,le=-1,G=!1,L=!1,K=0,z=!1,ae.clear(),clearTimeout(ie),Ce()},pause(){z=!0,cancelAnimationFrame(N)},resume(){z&&(z=!1,ne&&(N=requestAnimationFrame(ce)))},seek(t){let s=Math.min(1,Math.max(0,t));oe=s,D=s,z=!0,cancelAnimationFrame(N),Xe(s,y)},getProgress(){return oe}}}function it(e,r){let n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return n;let o=typeof e=="string"?document.querySelector(e):e;return o?fe(o,r):(console.warn("[svg-scroll-draw] Container not found:",e),n)}var ke=class extends HTMLElement{constructor(){super(...arguments);this.instance=null}connectedCallback(){let n={},o=this.getAttribute("speed"),a=this.getAttribute("easing"),p=this.getAttribute("stagger"),f=this.getAttribute("direction"),b=this.getAttribute("selector");o&&(n.speed=parseFloat(o)),a&&(n.easing=a),p&&(n.stagger=parseFloat(p)),f&&(n.direction=f),b&&(n.selector=b),this.hasAttribute("fade")&&(n.fade=this.getAttribute("fade")!=="false"),this.instance=fe(this,n)}disconnectedCallback(){this.instance?.destroy(),this.instance=null}};typeof customElements<"u"&&!customElements.get("scroll-draw")&&customElements.define("scroll-draw",ke);return et(at);})();
1
+ "use strict";var SvgScrollDraw=(()=>{var Te=Object.defineProperty;var rt=Object.getOwnPropertyDescriptor;var nt=Object.getOwnPropertyNames;var st=Object.prototype.hasOwnProperty;var ot=(e,n)=>{for(var r in n)Te(e,r,{get:n[r],enumerable:!0})},it=(e,n,r,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let u of nt(n))!st.call(e,u)&&u!==r&&Te(e,u,{get:()=>n[u],enumerable:!(o=rt(n,u))||o.enumerable});return e};var at=e=>it(Te({},"__esModule",{value:!0}),e);var dt={};ot(dt,{createBounce:()=>De,createElastic:()=>Le,createSpring:()=>Xe,scrollDraw:()=>pt});function Xe({tension:e=2.5,friction:n=2.2}={}){return r=>1-Math.cos(r*Math.PI*e)*Math.pow(1-r,n)}function De({bounces:e=3,decay:n=.5}={}){let r=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,n)),u=Math.sqrt(o),p=0,y=[];for(let c=0;c<r;c++){let g=Math.pow(u,c);y.push(g),p+=g}let w=[0],R=0;for(let c=0;c<r;c++)R+=y[c]/p,w.push(R);return c=>{if(c<=0)return 0;if(c>=1)return 1;for(let g=0;g<r;g++)if(c<=w[g+1]){let se=(c-w[g])/(w[g+1]-w[g]);if(g===0)return se*(2-se);let L=1-Math.pow(o,g);return L+(1-L)*(2*se-1)*(2*se-1)}return 1}}function Le({amplitude:e=1,period:n=.4}={}){let r=Math.max(1,e),o=Math.max(.1,n),u=r<=1?o/4:o/(2*Math.PI)*Math.asin(1/r);return p=>p<=0?0:p>=1?1:r*Math.pow(2,-10*p)*Math.sin((p-u)*(2*Math.PI)/o)+1}var Pe={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:De(),elastic:Le()};function Ie(e="top bottom"){let n=e.trim();if(/^\d+(\.\d+)?%$/.test(n))return{element:"top",viewport:n};let[r="top",o="bottom"]=n.split(/\s+/).filter(Boolean);return{element:r,viewport:o}}function Ge(e,n,r,o){switch(o){case"top":return e+r;case"center":return e+r+n/2;case"bottom":return e+r+n;default:return e+r}}function Be(e,n){if(/^\d+(\.\d+)?%$/.test(e))return n*(parseFloat(e)/100);switch(e){case"top":return 0;case"center":return n/2;case"bottom":return n;default:return n}}function we(e){let n=e.tagName.toLowerCase();if(n==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(r+o)}if(n==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function lt(e,n,r){return Math.min(r,Math.max(n,e))}function ne(e,n,r,o){return r===n?0:lt((e-n)/(r-n)*o,0,1)}function Fe(e,n,r,o,u){let p=Ge(e.top,e.height,n,o.element)-Be(o.viewport,r),y=Ge(e.top,e.height,n,u.element)-Be(u.viewport,r);return{tStart:p,tEnd:y}}function _e(e){let n=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(n)return[parseInt(n[1]+n[1],16),parseInt(n[2]+n[2],16),parseInt(n[3]+n[3],16)];let r=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(r)return[parseInt(r[1],16),parseInt(r[2],16),parseInt(r[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function ve(e,n,r){let o=_e(e),u=_e(n);return!o||!u?e:`rgb(${Math.round(o[0]+(u[0]-o[0])*r)},${Math.round(o[1]+(u[1]-o[1])*r)},${Math.round(o[2]+(u[2]-o[2])*r)})`}function Ue(e,n){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,n)}var je={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},ut=0;function ct(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function ft(e){let n=e.getAttribute("stroke"),r=e.getAttribute("fill");!n||n==="none"?Ue("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&Ue("Element has a fill \u2014 it may obscure the stroke animation.",e)}function mt(e,n,r){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function u(){let p=r==="x"?window.scrollX:window.scrollY,y=e-p,w=n-p,R=r==="x";o.innerHTML=`
2
+ <div style="position:absolute;${R?`left:${y}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${y}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
3
+ <div style="position:absolute;${R?`left:${w}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${w}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",u,{passive:!0}),u(),o}function Ce(e,n,r){let o=(n.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),u=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,p=>{let y=parseFloat(p),w=o[u++]??y;return String(+(y+(w-y)*r).toFixed(4))})}function Ee(e,n={}){if(typeof window>"u")return{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let r=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:u=1,fade:p=!1,easing:y="linear",trigger:w={},stagger:R=0,direction:c="forward",once:g=!1,debug:se=!1,axis:L="y",scrollContainer:xe,autoReverse:ce=!1,delay:ae=0,strokeColor:j,strokeWidth:J,fillOpacity:K,waypoints:Q,velocityScale:fe=!1,threshold:Re=0,rootMargin:Ne="0px",repeat:Y=0,repeatDelay:$e=0,morphTo:N,clip:Se,autoplay:Je=!1,duration:Ke=1e3,native:Qe=!0,onProgress:le,onStart:me,onComplete:oe}=n,G=Se===!0?"left":typeof Se=="string"?Se:!1,Z=typeof y=="function"?y:Pe[y]??Pe.linear,He=Ie(w.start??"top bottom"),We=Ie(w.end??"bottom top"),P=typeof xe=="string"?document.querySelector(xe):xe??null,H=Array.isArray(j)?j[0]:null,A=Array.isArray(j)?j[1]:typeof j=="string"?j:null,I=Array.isArray(J)?J[0]:null,M=Array.isArray(J)?J[1]:typeof J=="number"?J:null,F=Array.isArray(K)?K[0]:null,k=Array.isArray(K)?K[1]:typeof K=="number"?K:null;function ee(t){let s=t*100;switch(G){case"right":return`inset(0 0 0 ${100-s}%)`;case"top":return`inset(0 0 ${100-s}% 0)`;case"bottom":return`inset(${100-s}% 0 0 0)`;case"center":return`circle(${t*150}% at 50% 50%)`;default:return`inset(0 ${100-s}% 0 0)`}}let $=G?[]:Array.from(e.querySelectorAll(o)),E=[],W=[],B=0,_=0,S=!1,O=!1,x=0,pe=!1,q=-1,de=-1,T=!1,te=0,V=0,X,Ae=null,U=new Set,ye=-1,qe=performance.now();function ue(){return P?L==="x"?P.scrollLeft:P.scrollTop:L==="x"?window.scrollX:window.scrollY}function ze(){return P?L==="x"?P.clientWidth:P.clientHeight:L==="x"?window.innerWidth:window.innerHeight}function Ve(){let t=e.getBoundingClientRect(),s,l,b;if(P){let D=P.getBoundingClientRect();s=L==="x"?t.left-D.left+P.scrollLeft:t.top-D.top+P.scrollTop,l=L==="x"?t.width:t.height,b=ue()}else s=L==="x"?t.left:t.top,l=L==="x"?t.width:t.height,b=ue();let C=Fe({top:s,height:l},b,ze(),He,We);B=C.tStart,_=C.tEnd,se&&process.env.NODE_ENV!=="production"&&(Ae?.remove(),Ae=mt(B,_,L))}function Ye(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),G){let l=s==="reverse"?1-t:t;e.style.clipPath=ee(l);return}$.forEach((l,b)=>{l.style.strokeDashoffset=s==="reverse"?`${E[b]*t}`:`${E[b]*(1-t)}`,p&&(l.style.opacity=s==="reverse"?`${1-t}`:`${t}`),H&&A?l.style.stroke=ve(H,A,t):A&&(l.style.stroke=A),I!==null&&M!==null?l.style.strokeWidth=`${I+(M-I)*t}`:M!==null&&(l.style.strokeWidth=`${M}`),F!==null&&k!==null?l.style.fillOpacity=`${F+(k-F)*t}`:k!==null&&(l.style.fillOpacity=`${k}`),N&&l.tagName.toLowerCase()==="path"&&W[b]&&l.setAttribute("d",Ce(W[b],N,t))})}function he(){if(e.style.setProperty("--scroll-draw-progress","0"),G){e.style.clipPath=ee(0);return}$.forEach((t,s)=>{t.style.strokeDasharray=`${E[s]}`,t.style.strokeDashoffset=c==="reverse"?"0":`${E[s]}`,p?t.style.opacity=c==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),I!==null&&(t.style.strokeWidth=`${I}`),F!==null&&(t.style.fillOpacity=`${F}`),N&&t.tagName.toLowerCase()==="path"&&W[s]&&t.setAttribute("d",W[s])})}if($.forEach(t=>{ft(t);let s=we(t);E.push(s),t.tagName.toLowerCase()==="path"?W.push(t.getAttribute("d")??""):W.push(""),r?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=c==="reverse"?`${s}`:"0",p&&(t.style.opacity="1"),A&&(t.style.stroke=A),M!==null&&(t.style.strokeWidth=`${M}`),k!==null&&(t.style.fillOpacity=`${k}`),N&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",N)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=c==="reverse"?"0":`${s}`,p?t.style.opacity=c==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),I!==null&&(t.style.strokeWidth=`${I}`),F!==null&&(t.style.fillOpacity=`${F}`))}),G){if(r)return e.style.clipPath=ee(1),oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=ee(0)}else if(r)return oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function Ze(){return!(Qe===!1||!ct()||!$.length||typeof y!="string"||!(y in je)||G||L!=="y"||P||u!==1||R!==0||g||ce||fe!==!1||N||Q||Y||ae>0||le||me||oe||j!=null||J!=null||K!=null||(w.start??"top bottom").trim()!=="top bottom"||(w.end??"bottom top").trim()!=="bottom top")}function et(){let t=`svg-scroll-draw-${++ut}`,s=c==="reverse"?"0":"var(--ssd-len)",l=c==="reverse"?"var(--ssd-len)":"0",b=`stroke-dashoffset:${s};`,C=`stroke-dashoffset:${l};`;p&&(b+=`opacity:${c==="reverse"?1:0};`,C+=`opacity:${c==="reverse"?0:1};`);let D=document.createElement("style");D.setAttribute("data-svg-scroll-draw",""),D.textContent=`@keyframes ${t}{from{${b}}to{${C}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${je[y]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(D);function a(i,m){i.style.setProperty("--ssd-len",String(E[m])),i.style.strokeDasharray=`${E[m]}`,i.style.strokeDashoffset="",i.style.opacity="",i.style.animationPlayState="",i.classList.add(t)}$.forEach(a);let d=!1,v=-1;function f(){if(v>=0)return v;let i=e.getBoundingClientRect(),{tStart:m,tEnd:h}=Fe({top:i.top,height:i.height},ue(),ze(),He,We);return Z(ne(ue(),m,h,u))}return{destroy(){$.forEach(i=>{i.classList.remove(t),i.style.removeProperty("--ssd-len"),i.style.animationPlayState=""}),D.remove()},replay(){d=!1,v=-1,$.forEach(a)},pause(){d=!0,$.forEach(i=>{i.style.animationPlayState="paused"})},resume(){d&&(d=!1,$.forEach(i=>{i.style.animationPlayState="running"}))},seek(i){let m=Math.min(1,Math.max(0,i));v=m,d=!0,$.forEach((h,re)=>{h.classList.remove(t),h.style.strokeDashoffset=c==="reverse"?`${E[re]*m}`:`${E[re]*(1-m)}`,p&&(h.style.opacity=c==="reverse"?`${1-m}`:`${m}`)})},getProgress(){return f()}}}if(Ze())return et();function tt(){let t=Math.max(1,Ke),s=0,l=0;function b(f){let i=!0;if(G){let m=Math.min(1,Math.max(0,f/t)),h=Z(m);te=h,e.style.setProperty("--scroll-draw-progress",String(h)),e.style.clipPath=ee(c==="reverse"?1-h:h),le?.(h),m<1&&(i=!1)}else $.forEach((m,h)=>{let re=h*R*t,ie=Math.min(1,Math.max(0,(f-re)/t)),z=Z(ie);m.style.strokeDashoffset=c==="reverse"?`${E[h]*z}`:`${E[h]*(1-z)}`,p&&(m.style.opacity=c==="reverse"?`${1-z}`:`${z}`),H&&A?m.style.stroke=ve(H,A,z):A&&(m.style.stroke=A),I!==null&&M!==null?m.style.strokeWidth=`${I+(M-I)*z}`:M!==null&&(m.style.strokeWidth=`${M}`),F!==null&&k!==null?m.style.fillOpacity=`${F+(k-F)*z}`:k!==null&&(m.style.fillOpacity=`${k}`),N&&m.tagName.toLowerCase()==="path"&&W[h]&&m.setAttribute("d",Ce(W[h],N,z)),h===0&&(le?.(z),e.style.setProperty("--scroll-draw-progress",String(z))),ie<1&&(i=!1)});if(Q){let m=Math.min(1,Math.max(0,f/t)),h=Z(m);for(let re in Q){let ie=parseFloat(re);h>=ie&&!U.has(ie)&&(U.add(ie),Q[re]?.())}}return i}function C(f){if(T)return;let i=f-s;O||(O=!0,me?.());let m=b(i);if(m&&!S){S=!0,b(t*(1+Math.max(0,$.length-1)*R)),oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{s=performance.now(),O=!1,S=!1,U.clear(),he(),x=requestAnimationFrame(C)},$e));return}m||(x=requestAnimationFrame(C))}function D(){cancelAnimationFrame(x),clearTimeout(X),s=performance.now(),l=0,T=!1,O=!1,S=!1,V=0,U.clear(),he(),x=requestAnimationFrame(C)}let a=new IntersectionObserver(f=>{f.forEach(i=>{i.isIntersecting&&!(g&&S)?D():!i.isIntersecting&&!g&&!S&&(cancelAnimationFrame(x),clearTimeout(X),s=null)})},{root:P??null,threshold:Re,rootMargin:Ne}),d;function v(){clearTimeout(d),d=setTimeout(()=>{$.forEach((f,i)=>{E[i]=we(f),f.style.strokeDasharray=`${E[i]}`})},150)}return window.addEventListener("resize",v),window.addEventListener("orientationchange",v),ae>0?setTimeout(()=>a.observe(e),ae):a.observe(e),{destroy(){cancelAnimationFrame(x),clearTimeout(X),a.disconnect(),window.removeEventListener("resize",v),window.removeEventListener("orientationchange",v),clearTimeout(d)},replay(){V=0,D()},pause(){T||(T=!0,l=performance.now()-s,cancelAnimationFrame(x))},resume(){T&&(T=!1,s=performance.now()-l,x=requestAnimationFrame(C))},seek(f){let i=Math.min(1,Math.max(0,f));te=i,T=!0,l=i*t,s=performance.now()-l,cancelAnimationFrame(x),b(l)},getProgress(){return te}}}if(Je)return tt();Ve();function ge(){if(!pe||T)return;let t=performance.now(),s=ue(),l=u;if(fe!==!1){let a=t-qe,d=a>0?Math.abs(s-(ye<0?s:ye))/a:0;l=u*Math.max(.2,1+d*(typeof fe=="number"?fe:1)*.04)}ye=s,qe=t;let b=ce?de===-1||s>=de?"forward":"reverse":c;de=s;let C=_-B,D=!0;if(G){let a=Z(ne(s,B,_,l));g&&!ce&&(q=Math.max(q,a),a=q),te=a,e.style.setProperty("--scroll-draw-progress",String(a));let d=b==="reverse"?1-a:a;e.style.clipPath=ee(d),le?.(a),!O&&ne(s,B,_,l)>0&&(O=!0,me?.()),a>=1&&!S?(S=!0,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{q=-1,O=!1,S=!1,e.style.clipPath=ee(0)},$e))):a<1&&!g&&(S=!1),x=requestAnimationFrame(ge);return}if($.forEach((a,d)=>{let v=d*R*C,f=Z(ne(s,B+v,_+v,l));g&&!ce&&(q=Math.max(q,f),f=q),te=f,a.style.strokeDashoffset=b==="reverse"?`${E[d]*f}`:`${E[d]*(1-f)}`,p&&(a.style.opacity=b==="reverse"?`${1-f}`:`${f}`),H&&A?a.style.stroke=ve(H,A,f):A&&(a.style.stroke=A),I!==null&&M!==null?a.style.strokeWidth=`${I+(M-I)*f}`:M!==null&&(a.style.strokeWidth=`${M}`),F!==null&&k!==null?a.style.fillOpacity=`${F+(k-F)*f}`:k!==null&&(a.style.fillOpacity=`${k}`),N&&a.tagName.toLowerCase()==="path"&&W[d]&&a.setAttribute("d",Ce(W[d],N,f)),d===0&&(le?.(f),e.style.setProperty("--scroll-draw-progress",String(f))),f<1&&(D=!1)}),Q){let a=Z(ne(s,B,_,l));for(let d in Q){let v=parseFloat(d);a>=v&&!U.has(v)&&(U.add(v),Q[d]?.())}}!O&&ne(s,B,_,l)>0&&(O=!0,me?.()),D&&!S?(S=!0,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{q=-1,O=!1,S=!1,U.clear(),he()},$e))):!D&&!g&&(S=!1),x=requestAnimationFrame(ge)}let Me=new IntersectionObserver(t=>{t.forEach(s=>{pe=s.isIntersecting,pe&&!T?x=requestAnimationFrame(ge):cancelAnimationFrame(x)})},{root:P??null,threshold:Re,rootMargin:Ne}),ke;function be(){clearTimeout(ke),ke=setTimeout(()=>{$.forEach((t,s)=>{E[s]=we(t),t.style.strokeDasharray=`${E[s]}`}),Ve()},150)}return window.addEventListener("resize",be),window.addEventListener("orientationchange",be),ae>0?setTimeout(()=>Me.observe(e),ae):Me.observe(e),{destroy(){cancelAnimationFrame(x),clearTimeout(X),Me.disconnect(),window.removeEventListener("resize",be),window.removeEventListener("orientationchange",be),clearTimeout(ke),Ae?.remove()},replay(){q=-1,de=-1,ye=-1,O=!1,S=!1,V=0,T=!1,U.clear(),clearTimeout(X),he()},pause(){T=!0,cancelAnimationFrame(x)},resume(){T&&(T=!1,pe&&(x=requestAnimationFrame(ge)))},seek(t){let s=Math.min(1,Math.max(0,t));te=s,q=s,T=!0,cancelAnimationFrame(x),Ye(s,c)},getProgress(){return te}}}function pt(e,n){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let o=typeof e=="string"?document.querySelector(e):e;return o?Ee(o,n):(console.warn("[svg-scroll-draw] Container not found:",e),r)}var Oe=class extends HTMLElement{constructor(){super(...arguments);this.instance=null}connectedCallback(){let r={},o=this.getAttribute("speed"),u=this.getAttribute("easing"),p=this.getAttribute("stagger"),y=this.getAttribute("direction"),w=this.getAttribute("selector");o&&(r.speed=parseFloat(o)),u&&(r.easing=u),p&&(r.stagger=parseFloat(p)),y&&(r.direction=y),w&&(r.selector=w),this.hasAttribute("fade")&&(r.fade=this.getAttribute("fade")!=="false"),this.instance=Ee(this,r)}disconnectedCallback(){this.instance?.destroy(),this.instance=null}};typeof customElements<"u"&&!customElements.get("scroll-draw")&&customElements.define("scroll-draw",Oe);return at(dt);})();