svg-scroll-draw 1.1.0 → 1.2.0

package/dist/web-component/index.cjs

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

package/dist/web-component/index.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svg-scroll-draw",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Scroll-driven SVG path drawing animation library — zero dependencies, ~4.4 KB gzipped, works with React, Vue, and vanilla JS",
   "keywords": [
     "svg",
@@ -35,7 +35,11 @@
     "path-morphing",
     "svg-morph",
     "sequence",
-    "group"
+    "group",
+    "bounce-easing",
+    "elastic-easing",
+    "spring-easing",
+    "physics-easing"
   ],
   "homepage": "https://svg-scroll-draw.vercel.app",
   "repository": {