svg-scroll-draw 1.1.0 → 1.2.0

package/dist/group/index.cjs

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

package/dist/group/index.d.mts

@@ -1,4 +1,4 @@
-type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
 interface TriggerConfig {
     start?: string;
     end?: string;

package/dist/group/index.d.ts

@@ -1,4 +1,4 @@
-type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
 interface TriggerConfig {
     start?: string;
     end?: string;

package/dist/group/index.mjs

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

package/dist/index.cjs

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

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
 interface TriggerConfig {
     start?: string;
     end?: string;
@@ -101,7 +101,36 @@ declare function createSpring({ tension, friction, }?: {
     tension?: number;
     friction?: number;
 }): (t: number) => number;
+/**
+ * Returns a bounce-out easing function.
+ * The animation rises to 1 and then makes `bounces` dips below 1 that settle.
+ * - `bounces` — number of bounces after the initial approach (default 3)
+ * - `decay`   — amplitude reduction per bounce (0–1, default 0.5)
+ *
+ * @example
+ * scrollDraw('#svg', { easing: createBounce() });
+ * scrollDraw('#svg', { easing: createBounce({ bounces: 5, decay: 0.4 }) });
+ */
+declare function createBounce({ bounces, decay, }?: {
+    bounces?: number;
+    decay?: number;
+}): (t: number) => number;
+/**
+ * Returns an elastic-out easing function.
+ * The animation overshoots past 1 and oscillates back, settling at 1.
+ * Can produce values outside [0, 1] — the overshoot is the effect.
+ * - `amplitude` — overshoot magnitude (>=1, default 1 → overshoots to ~1.25)
+ * - `period`    — oscillation period in [0, 1] time (default 0.4)
+ *
+ * @example
+ * scrollDraw('#svg', { easing: createElastic() });
+ * scrollDraw('#svg', { easing: createElastic({ amplitude: 1.5, period: 0.3 }) });
+ */
+declare function createElastic({ amplitude, period, }?: {
+    amplitude?: number;
+    period?: number;
+}): (t: number) => number;
 
 declare function scrollDraw(target: string | Element, options?: ScrollDrawOptions): ScrollDrawInstance;
 
-export { type ScrollDrawInstance, type ScrollDrawOptions, createSpring, scrollDraw };
+export { type ScrollDrawInstance, type ScrollDrawOptions, createBounce, createElastic, createSpring, scrollDraw };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
 interface TriggerConfig {
     start?: string;
     end?: string;
@@ -101,7 +101,36 @@ declare function createSpring({ tension, friction, }?: {
     tension?: number;
     friction?: number;
 }): (t: number) => number;
+/**
+ * Returns a bounce-out easing function.
+ * The animation rises to 1 and then makes `bounces` dips below 1 that settle.
+ * - `bounces` — number of bounces after the initial approach (default 3)
+ * - `decay`   — amplitude reduction per bounce (0–1, default 0.5)
+ *
+ * @example
+ * scrollDraw('#svg', { easing: createBounce() });
+ * scrollDraw('#svg', { easing: createBounce({ bounces: 5, decay: 0.4 }) });
+ */
+declare function createBounce({ bounces, decay, }?: {
+    bounces?: number;
+    decay?: number;
+}): (t: number) => number;
+/**
+ * Returns an elastic-out easing function.
+ * The animation overshoots past 1 and oscillates back, settling at 1.
+ * Can produce values outside [0, 1] — the overshoot is the effect.
+ * - `amplitude` — overshoot magnitude (>=1, default 1 → overshoots to ~1.25)
+ * - `period`    — oscillation period in [0, 1] time (default 0.4)
+ *
+ * @example
+ * scrollDraw('#svg', { easing: createElastic() });
+ * scrollDraw('#svg', { easing: createElastic({ amplitude: 1.5, period: 0.3 }) });
+ */
+declare function createElastic({ amplitude, period, }?: {
+    amplitude?: number;
+    period?: number;
+}): (t: number) => number;
 
 declare function scrollDraw(target: string | Element, options?: ScrollDrawOptions): ScrollDrawInstance;
 
-export { type ScrollDrawInstance, type ScrollDrawOptions, createSpring, scrollDraw };
+export { type ScrollDrawInstance, type ScrollDrawOptions, createBounce, createElastic, createSpring, scrollDraw };

package/dist/index.mjs

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

package/dist/nuxt/index.cjs

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

package/dist/nuxt/index.d.mts

@@ -1,7 +1,7 @@
 import * as vue from 'vue';
 import { App } from 'vue';
 
-type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
 interface TriggerConfig {
     start?: string;
     end?: string;

package/dist/nuxt/index.d.ts

@@ -1,7 +1,7 @@
 import * as vue from 'vue';
 import { App } from 'vue';
 
-type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
 interface TriggerConfig {
     start?: string;
     end?: string;