svg-scroll-draw 0.6.0 → 0.7.0

package/dist/web-component/index.mjs

@@ -0,0 +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 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 Te(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 ke(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 ye(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 We(e,s,r){return Math.min(r,Math.max(s,e))}function z(e,s,r,o){return r===s?0:We((e-s)/(r-s)*o,0,1)}function Me(e,s,r,o,a){let c=Te(e.top,e.height,s,o.element)-ke(o.viewport,r),u=Te(e.top,e.height,s,a.element)-ke(a.viewport,r);return {tStart:c,tEnd:u}}function Se(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 ge(e,s,r){let o=Se(e),a=Se(s);return !o||!a?e:`rgb(${Math.round(o[0]+(a[0]-o[0])*r)},${Math.round(o[1]+(a[1]-o[1])*r)},${Math.round(o[2]+(a[2]-o[2])*r)})`}function Le(e,s){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,s);}function Ve(e){let s=e.getAttribute("stroke"),r=e.getAttribute("fill");!s||s==="none"?Le("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&Le("Element has a fill \u2014 it may obscure the stroke animation.",e);}function ze(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 a(){let c=r==="x"?window.scrollX:window.scrollY,u=e-c,y=s-c,B=r==="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",a,{passive:true}),a(),o}function De(e,s,r){let o=(s.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),a=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,c=>{let u=parseFloat(c),y=o[a++]??u;return String(+(u+(y-u)*r).toFixed(4))})}function Pe(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:a=1,fade:c=false,easing:u="linear",trigger:y={},stagger:B=0,direction:P="forward",once:X=false,debug:Ie=false,axis:E="y",scrollContainer:se,autoReverse:ne=false,delay:be=0,strokeColor:C,strokeWidth:N,fillOpacity:H,waypoints:oe,velocityScale:ie=false,threshold:Fe=0,rootMargin:Oe="0px",repeat:_=0,repeatDelay:we=0,morphTo:I,clip:le,onProgress:ve,onStart:xe,onComplete:j}=s,R=le===true?"left":typeof le=="string"?le:false,ae=typeof u=="function"?u:me[u]??me.linear,Ce=de(y.start??"top bottom"),Ne=de(y.end??"bottom top"),d=typeof se=="string"?document.querySelector(se):se??null,T=Array.isArray(C)?C[0]:null,g=Array.isArray(C)?C[1]:typeof C=="string"?C: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 n=t*100;switch(R){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 G=R?[]:Array.from(e.querySelectorAll(o)),$=[],k=[],S=0,M=0,A=false,F=false,L=0,J=false,x=-1,K=-1,O=false,Q=0,q=0,U,ce=null,Y=new Set,Z=-1,Ee=performance.now();function ue(){return d?E==="x"?d.scrollLeft:d.scrollTop:E==="x"?window.scrollX:window.scrollY}function He(){return d?E==="x"?d.clientWidth:d.clientHeight:E==="x"?window.innerWidth:window.innerHeight}function $e(){let t=e.getBoundingClientRect(),n,l,m;if(d){let V=d.getBoundingClientRect();n=E==="x"?t.left-V.left+d.scrollLeft:t.top-V.top+d.scrollTop,l=E==="x"?t.width:t.height,m=ue();}else n=E==="x"?t.left:t.top,l=E==="x"?t.width:t.height,m=ue();let re=Me({top:n,height:l},m,He(),Ce,Ne);S=re.tStart,M=re.tEnd,Ie&&process.env.NODE_ENV!=="production"&&(ce?.remove(),ce=ze(S,M,E));}function Re(t,n){if(e.style.setProperty("--scroll-draw-progress",String(t)),R){let l=n==="reverse"?1-t:t;e.style.clipPath=W(l);return}G.forEach((l,m)=>{l.style.strokeDashoffset=n==="reverse"?`${$[m]*t}`:`${$[m]*(1-t)}`,c&&(l.style.opacity=n==="reverse"?`${1-t}`:`${t}`),T&&g?l.style.stroke=ge(T,g,t):g&&(l.style.stroke=g),h!==null&&b!==null?l.style.strokeWidth=`${h+(b-h)*t}`:b!==null&&(l.style.strokeWidth=`${b}`),w!==null&&v!==null?l.style.fillOpacity=`${w+(v-w)*t}`:v!==null&&(l.style.fillOpacity=`${v}`),I&&l.tagName.toLowerCase()==="path"&&k[m]&&l.setAttribute("d",De(k[m],I,t));});}function Ae(){if(e.style.setProperty("--scroll-draw-progress","0"),R){e.style.clipPath=W(0);return}G.forEach((t,n)=>{t.style.strokeDasharray=`${$[n]}`,t.style.strokeDashoffset=P==="reverse"?"0":`${$[n]}`,c?t.style.opacity=P==="reverse"?"1":"0":t.style.opacity="",T&&(t.style.stroke=T),h!==null&&(t.style.strokeWidth=`${h}`),w!==null&&(t.style.fillOpacity=`${w}`),I&&t.tagName.toLowerCase()==="path"&&k[n]&&t.setAttribute("d",k[n]);});}if(G.forEach(t=>{Ve(t);let n=ye(t);$.push(n),t.tagName.toLowerCase()==="path"?k.push(t.getAttribute("d")??""):k.push(""),r?(t.style.strokeDasharray=`${n}`,t.style.strokeDashoffset=P==="reverse"?`${n}`:"0",c&&(t.style.opacity="1"),g&&(t.style.stroke=g),b!==null&&(t.style.strokeWidth=`${b}`),v!==null&&(t.style.fillOpacity=`${v}`),I&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",I)):(t.style.strokeDasharray=`${n}`,t.style.strokeDashoffset=P==="reverse"?"0":`${n}`,c?t.style.opacity=P==="reverse"?"1":"0":t.style.opacity="",T&&(t.style.stroke=T),h!==null&&(t.style.strokeWidth=`${h}`),w!==null&&(t.style.fillOpacity=`${w}`));}),R){if(r)return e.style.clipPath=W(1),j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=W(0);}else if(r)return j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};$e();function ee(){if(!J||O)return;let t=performance.now(),n=ue(),l=a;if(ie!==false){let i=t-Ee,p=i>0?Math.abs(n-(Z<0?n:Z))/i:0;l=a*Math.max(.2,1+p*(typeof ie=="number"?ie:1)*.04);}Z=n,Ee=t;let m=ne?K===-1||n>=K?"forward":"reverse":P;K=n;let re=M-S,V=true;if(R){let i=ae(z(n,S,M,l));X&&!ne&&(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),ve?.(i),!F&&z(n,S,M,l)>0&&(F=true,xe?.()),i>=1&&!A?(A=true,j?.(),q<(_==="infinite"?1/0:_??0)&&(q++,U=setTimeout(()=>{x=-1,F=false,A=false,e.style.clipPath=W(0);},we))):i<1&&!X&&(A=false),L=requestAnimationFrame(ee);return}if(G.forEach((i,p)=>{let D=p*B*re,f=ae(z(n,S+D,M+D,l));X&&!ne&&(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}`),T&&g?i.style.stroke=ge(T,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}`),I&&i.tagName.toLowerCase()==="path"&&k[p]&&i.setAttribute("d",De(k[p],I,f)),p===0&&(ve?.(f),e.style.setProperty("--scroll-draw-progress",String(f))),f<1&&(V=false);}),oe){let i=ae(z(n,S,M,l));for(let p in oe){let D=parseFloat(p);i>=D&&!Y.has(D)&&(Y.add(D),oe[p]?.());}}!F&&z(n,S,M,l)>0&&(F=true,xe?.()),V&&!A?(A=true,j?.(),q<(_==="infinite"?1/0:_??0)&&(q++,U=setTimeout(()=>{x=-1,F=false,A=false,Y.clear(),Ae();},we))):!V&&!X&&(A=false),L=requestAnimationFrame(ee);}let fe=new IntersectionObserver(t=>{t.forEach(n=>{J=n.isIntersecting,J&&!O?L=requestAnimationFrame(ee):cancelAnimationFrame(L);});},{root:d??null,threshold:Fe,rootMargin:Oe}),pe;function te(){clearTimeout(pe),pe=setTimeout(()=>{G.forEach((t,n)=>{$[n]=ye(t),t.style.strokeDasharray=`${$[n]}`;}),$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),ce?.remove();},replay(){x=-1,K=-1,Z=-1,F=false,A=false,q=0,O=false,Y.clear(),clearTimeout(U),Ae();},pause(){O=true,cancelAnimationFrame(L);},resume(){O&&(O=false,J&&(L=requestAnimationFrame(ee)));},seek(t){let n=Math.min(1,Math.max(0,t));Q=n,x=n,O=true,cancelAnimationFrame(L),Re(n,P);},getProgress(){return Q}}}var he=class extends HTMLElement{constructor(){super(...arguments);this.instance=null;}connectedCallback(){let r={},o=this.getAttribute("speed"),a=this.getAttribute("easing"),c=this.getAttribute("stagger"),u=this.getAttribute("direction"),y=this.getAttribute("selector");o&&(r.speed=parseFloat(o)),a&&(r.easing=a),c&&(r.stagger=parseFloat(c)),u&&(r.direction=u),y&&(r.selector=y),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",he);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svg-scroll-draw",
-  "version": "0.6.0",
-  "description": "Scroll-driven SVG path drawing animation library — zero dependencies, under 3KB gzipped, works with React, Vue, and vanilla JS",
+  "version": "0.7.0",
+  "description": "Scroll-driven SVG path drawing animation library — zero dependencies, ~3 KB gzipped, works with React, Vue, and vanilla JS",
   "keywords": [
     "svg",
     "scroll",
@@ -37,10 +37,10 @@
     "sequence",
     "group"
   ],
-  "homepage": "https://ink-scroll.vercel.app",
+  "homepage": "https://svg-scroll-draw.vercel.app",
   "repository": {
     "type": "git",
-    "url": "https://github.com/DhruvilChauahan0210/ink-scroll.git",
+    "url": "git+https://github.com/DhruvilChauahan0210/ink-scroll.git",
     "directory": "packages/svg-scroll-draw"
   },
   "bugs": {
@@ -104,6 +104,16 @@
       "types": "./dist/group/index.d.ts",
       "import": "./dist/group/index.mjs",
       "require": "./dist/group/index.cjs"
+    },
+    "./timeline": {
+      "types": "./dist/timeline/index.d.ts",
+      "import": "./dist/timeline/index.mjs",
+      "require": "./dist/timeline/index.cjs"
+    },
+    "./web-component": {
+      "types": "./dist/web-component/index.d.ts",
+      "import": "./dist/web-component/index.mjs",
+      "require": "./dist/web-component/index.cjs"
     }
   },
   "scripts": {