svg-scroll-draw 1.0.0 → 1.2.0

package/dist/cdn/svg-scroll-draw.global.js

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

package/dist/group/index.cjs

@@ -1,3 +1,3 @@
-'use strict';var me={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2)};function de(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[n="top",s="bottom"]=r.split(/\s+/).filter(Boolean);return {element:n,viewport:s}}function Ae(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 Se(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function ye(e){let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),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 We(e,r,n){return Math.min(n,Math.max(r,e))}function G(e,r,n,s){return n===r?0:We((e-r)/(n-r)*s,0,1)}function De(e,r,n,s,l){let a=Ae(e.top,e.height,r,s.element)-Se(s.viewport,n),f=Ae(e.top,e.height,r,l.element)-Se(l.viewport,n);return {tStart:a,tEnd:f}}function Te(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let 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 ge(e,r,n){let s=Te(e),l=Te(r);return !s||!l?e:`rgb(${Math.round(s[0]+(l[0]-s[0])*n)},${Math.round(s[1]+(l[1]-s[1])*n)},${Math.round(s[2]+(l[2]-s[2])*n)})`}function Me(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}function Ve(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?Me("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&Me("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 l(){let a=n==="x"?window.scrollX:window.scrollY,f=e-a,g=r-a,c=n==="x";s.innerHTML=`
-      <div style="position:absolute;${c?`left:${f}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${f}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
-      <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(s),window.addEventListener("scroll",l,{passive:true}),l(),s}function Pe(e,r,n){let s=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),l=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,a=>{let f=parseFloat(a),g=s[l++]??f;return String(+(f+(g-f)*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:s="path, polyline, line, polygon, rect, circle",speed:l=1,fade:a=false,easing:f="linear",trigger:g={},stagger:c=0,direction:h="forward",once:_=false,debug:Ie=false,axis:k="y",scrollContainer:ne,autoReverse:se=false,delay:be=0,strokeColor:N,strokeWidth:R,fillOpacity:H,waypoints:oe,velocityScale:ie=false,threshold:Oe=0,rootMargin:Ce="0px",repeat:X=0,repeatDelay:we=0,morphTo:O,clip:le,onProgress:ve,onStart:Ee,onComplete:j}=r,W=le===true?"left":typeof le=="string"?le:false,ae=typeof f=="function"?f:me[f]??me.linear,Fe=de(g.start??"top bottom"),Ne=de(g.end??"bottom top"),y=typeof ne=="string"?document.querySelector(ne):ne??null,T=Array.isArray(N)?N[0]:null,b=Array.isArray(N)?N[1]:typeof N=="string"?N:null,w=Array.isArray(R)?R[0]:null,v=Array.isArray(R)?R[1]:typeof R=="number"?R:null,E=Array.isArray(H)?H[0]:null,x=Array.isArray(H)?H[1]:typeof H=="number"?H:null;function V(t){let o=t*100;switch(W){case "right":return `inset(0 0 0 ${100-o}%)`;case "top":return `inset(0 0 ${100-o}% 0)`;case "bottom":return `inset(${100-o}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-o}% 0 0)`}}let q=W?[]:Array.from(e.querySelectorAll(s)),A=[],D=[],M=0,P=0,S=false,C=false,L=0,J=false,$=-1,K=-1,F=false,Q=0,B=0,U,ue=null,Y=new Set,Z=-1,xe=performance.now();function ce(){return y?k==="x"?y.scrollLeft:y.scrollTop:k==="x"?window.scrollX:window.scrollY}function Re(){return y?k==="x"?y.clientWidth:y.clientHeight:k==="x"?window.innerWidth:window.innerHeight}function $e(){let t=e.getBoundingClientRect(),o,u,d;if(y){let z=y.getBoundingClientRect();o=k==="x"?t.left-z.left+y.scrollLeft:t.top-z.top+y.scrollTop,u=k==="x"?t.width:t.height,d=ce();}else o=k==="x"?t.left:t.top,u=k==="x"?t.width:t.height,d=ce();let re=De({top:o,height:u},d,Re(),Fe,Ne);M=re.tStart,P=re.tEnd,Ie&&process.env.NODE_ENV!=="production"&&(ue?.remove(),ue=ze(M,P,k));}function He(t,o){if(e.style.setProperty("--scroll-draw-progress",String(t)),W){let u=o==="reverse"?1-t:t;e.style.clipPath=V(u);return}q.forEach((u,d)=>{u.style.strokeDashoffset=o==="reverse"?`${A[d]*t}`:`${A[d]*(1-t)}`,a&&(u.style.opacity=o==="reverse"?`${1-t}`:`${t}`),T&&b?u.style.stroke=ge(T,b,t):b&&(u.style.stroke=b),w!==null&&v!==null?u.style.strokeWidth=`${w+(v-w)*t}`:v!==null&&(u.style.strokeWidth=`${v}`),E!==null&&x!==null?u.style.fillOpacity=`${E+(x-E)*t}`:x!==null&&(u.style.fillOpacity=`${x}`),O&&u.tagName.toLowerCase()==="path"&&D[d]&&u.setAttribute("d",Pe(D[d],O,t));});}function ke(){if(e.style.setProperty("--scroll-draw-progress","0"),W){e.style.clipPath=V(0);return}q.forEach((t,o)=>{t.style.strokeDasharray=`${A[o]}`,t.style.strokeDashoffset=h==="reverse"?"0":`${A[o]}`,a?t.style.opacity=h==="reverse"?"1":"0":t.style.opacity="",T&&(t.style.stroke=T),w!==null&&(t.style.strokeWidth=`${w}`),E!==null&&(t.style.fillOpacity=`${E}`),O&&t.tagName.toLowerCase()==="path"&&D[o]&&t.setAttribute("d",D[o]);});}if(q.forEach(t=>{Ve(t);let o=ye(t);A.push(o),t.tagName.toLowerCase()==="path"?D.push(t.getAttribute("d")??""):D.push(""),n?(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=h==="reverse"?`${o}`:"0",a&&(t.style.opacity="1"),b&&(t.style.stroke=b),v!==null&&(t.style.strokeWidth=`${v}`),x!==null&&(t.style.fillOpacity=`${x}`),O&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",O)):(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=h==="reverse"?"0":`${o}`,a?t.style.opacity=h==="reverse"?"1":"0":t.style.opacity="",T&&(t.style.stroke=T),w!==null&&(t.style.strokeWidth=`${w}`),E!==null&&(t.style.fillOpacity=`${E}`));}),W){if(n)return e.style.clipPath=V(1),j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=V(0);}else if(n)return j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};$e();function ee(){if(!J||F)return;let t=performance.now(),o=ce(),u=l;if(ie!==false){let i=t-xe,m=i>0?Math.abs(o-(Z<0?o:Z))/i:0;u=l*Math.max(.2,1+m*(typeof ie=="number"?ie:1)*.04);}Z=o,xe=t;let d=se?K===-1||o>=K?"forward":"reverse":h;K=o;let re=P-M,z=true;if(W){let i=ae(G(o,M,P,u));_&&!se&&($=Math.max($,i),i=$),Q=i,e.style.setProperty("--scroll-draw-progress",String(i));let m=d==="reverse"?1-i:i;e.style.clipPath=V(m),ve?.(i),!C&&G(o,M,P,u)>0&&(C=true,Ee?.()),i>=1&&!S?(S=true,j?.(),B<(X==="infinite"?1/0:X??0)&&(B++,U=setTimeout(()=>{$=-1,C=false,S=false,e.style.clipPath=V(0);},we))):i<1&&!_&&(S=false),L=requestAnimationFrame(ee);return}if(q.forEach((i,m)=>{let I=m*c*re,p=ae(G(o,M+I,P+I,u));_&&!se&&($=Math.max($,p),p=$),Q=p,i.style.strokeDashoffset=d==="reverse"?`${A[m]*p}`:`${A[m]*(1-p)}`,a&&(i.style.opacity=d==="reverse"?`${1-p}`:`${p}`),T&&b?i.style.stroke=ge(T,b,p):b&&(i.style.stroke=b),w!==null&&v!==null?i.style.strokeWidth=`${w+(v-w)*p}`:v!==null&&(i.style.strokeWidth=`${v}`),E!==null&&x!==null?i.style.fillOpacity=`${E+(x-E)*p}`:x!==null&&(i.style.fillOpacity=`${x}`),O&&i.tagName.toLowerCase()==="path"&&D[m]&&i.setAttribute("d",Pe(D[m],O,p)),m===0&&(ve?.(p),e.style.setProperty("--scroll-draw-progress",String(p))),p<1&&(z=false);}),oe){let i=ae(G(o,M,P,u));for(let m in oe){let I=parseFloat(m);i>=I&&!Y.has(I)&&(Y.add(I),oe[m]?.());}}!C&&G(o,M,P,u)>0&&(C=true,Ee?.()),z&&!S?(S=true,j?.(),B<(X==="infinite"?1/0:X??0)&&(B++,U=setTimeout(()=>{$=-1,C=false,S=false,Y.clear(),ke();},we))):!z&&!_&&(S=false),L=requestAnimationFrame(ee);}let fe=new IntersectionObserver(t=>{t.forEach(o=>{J=o.isIntersecting,J&&!F?L=requestAnimationFrame(ee):cancelAnimationFrame(L);});},{root:y??null,threshold:Oe,rootMargin:Ce}),pe;function te(){clearTimeout(pe),pe=setTimeout(()=>{q.forEach((t,o)=>{A[o]=ye(t),t.style.strokeDasharray=`${A[o]}`;}),$e();},150);}return window.addEventListener("resize",te),window.addEventListener("orientationchange",te),be>0?setTimeout(()=>fe.observe(e),be):fe.observe(e),{destroy(){cancelAnimationFrame(L),clearTimeout(U),fe.disconnect(),window.removeEventListener("resize",te),window.removeEventListener("orientationchange",te),clearTimeout(pe),ue?.remove();},replay(){$=-1,K=-1,Z=-1,C=false,S=false,B=0,F=false,Y.clear(),clearTimeout(U),ke();},pause(){F=true,cancelAnimationFrame(L);},resume(){F&&(F=false,J&&(L=requestAnimationFrame(ee)));},seek(t){let o=Math.min(1,Math.max(0,t));Q=o,$=o,F=true,cancelAnimationFrame(L),He(o,h);},getProgress(){return Q}}}function Le(e){return e.map(r=>typeof r=="string"?document.querySelector(r):r).filter(r=>r!==null)}function Xe(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let n=Le(e).map(s=>he(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(l=>l.seek(s));},getProgress(){return n[0]?.getProgress()??0}}}function je(e,r={}){let n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return n;let s=Le(e);if(s.length===0)return n;let l=0,a=[];function f(c){return he(s[c],{...r,once:true,onComplete(){r.onComplete?.(),l=c+1,a[l]?.resume();}})}function g(){s.forEach((c,h)=>{a[h]=f(h);});for(let c=1;c<a.length;c++)a[c].pause();}return g(),{destroy(){a.forEach(c=>c.destroy()),a.length=0;},replay(){a.forEach(c=>c.destroy()),a.length=0,l=0,g();},pause(){a[l]?.pause();},resume(){a[l]?.resume();},seek(c){a[l]?.seek(c);},getProgress(){return a[l]?.getProgress()??0}}}exports.scrollDrawGroup=Xe;exports.scrollDrawSequence=je;
+'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:${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;
@@ -60,6 +60,20 @@ interface ScrollDrawOptions {
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
+    /**
+     * Use the browser's native CSS scroll-driven animation
+     * (`animation-timeline: view()`) when the configuration is simple enough and
+     * the browser supports it. This runs the draw entirely on the compositor —
+     * zero per-frame JavaScript, zero scroll/resize listeners.
+     *
+     * Falls back to the JS engine automatically when unsupported or when the
+     * config uses a feature native CSS can't express (callbacks, stagger, morph,
+     * velocity scaling, custom triggers, `once`, custom easing functions, etc.).
+     *
+     * - `undefined` / `true` (default): use native when eligible.
+     * - `false`: always use the JS engine.
+     */
+    native?: boolean;
 }
 interface ScrollDrawInstance {
     destroy: () => void;

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

package/dist/group/index.mjs

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