svg-scroll-draw 2.18.0 → 2.18.1

package/dist/horizontal/index.cjs

@@ -1 +1 @@
-'use strict';function _e({bounces:e=3,decay:t=.5}={}){let r=Math.max(1,Math.round(e)),n=Math.max(.01,Math.min(.99,t)),a=Math.sqrt(n),i=0,l=[];for(let c=0;c<r;c++){let f=Math.pow(a,c);l.push(f),i+=f;}let m=[0],u=0;for(let c=0;c<r;c++)u+=l[c]/i,m.push(u);return c=>{if(c<=0)return 0;if(c>=1)return 1;for(let f=0;f<r;f++)if(c<=m[f+1]){let g=(c-m[f])/(m[f+1]-m[f]);if(f===0)return g*(2-g);let E=1-Math.pow(n,f);return E+(1-E)*(2*g-1)*(2*g-1)}return 1}}function He({amplitude:e=1,period:t=.4}={}){let r=Math.max(1,e),n=Math.max(.1,t),a=r<=1?n/4:n/(2*Math.PI)*Math.asin(1/r);return i=>i<=0?0:i>=1?1:r*Math.pow(2,-10*i)*Math.sin((i-a)*(2*Math.PI)/n)+1}var C={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:_e(),elastic:He()};function pe(e,t,r){return Math.min(r,Math.max(t,e))}function Y(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let[r="top",n="bottom"]=t.split(/\s+/).filter(Boolean);return {element:r,viewport:n}}function fe(e,t,r,n){switch(n){case "top":return e+r;case "center":return e+r+t/2;case "bottom":return e+r+t;default:return e+r}}function ge(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function W(e,t,r,n){return r===t?0:pe((e-t)/(r-t)*n,0,1)}function K(e,t,r,n,a){let i=fe(e.top,e.height,t,n.element)-ge(n.viewport,r),l=fe(e.top,e.height,t,a.element)-ge(a.viewport,r);return {tStart:i,tEnd:l}}function de(e,t,r){let n=e.getBoundingClientRect(),a=r==="x"?n.width:n.height;return t?{top:r==="x"?n.left-t.getBoundingClientRect().left+t.scrollLeft:n.top-t.getBoundingClientRect().top+t.scrollTop,height:a,scroll:0}:{top:r==="x"?n.left:n.top,height:a,scroll:r==="x"?window.scrollX:window.scrollY}}function be(e){let t=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(t)return [parseInt(t[1]+t[1],16),parseInt(t[2]+t[2],16),parseInt(t[3]+t[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 n=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return n?[parseInt(n[1]),parseInt(n[2]),parseInt(n[3])]:null}function ye(e,t,r){let n=be(e),a=be(t);return !n||!a?e:`rgb(${Math.round(n[0]+(a[0]-n[0])*r)},${Math.round(n[1]+(a[1]-n[1])*r)},${Math.round(n[2]+(a[2]-n[2])*r)})`}var Ne="cubic-bezier(0.333333, 0, 0.666667, 0.333333)",ze="cubic-bezier(0.333333, 0.666667, 0.666667, 1)",he=33;function De(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timing-function: linear(0, 1)")}function Fe(e){let t=[];for(let r=0;r<he;r++){let n=r/(he-1);t.push(String(Math.round(e(n)*1e5)/1e5));}return `linear(${t.join(",")})`}function Ee(e){switch(e){case "linear":return "linear";case "ease-in":return Ne;case "ease-out":return ze;case "ease-in-out":return De()?Fe(C["ease-in-out"]):null;default:return null}}var we=Symbol.for("svg-scroll-draw.registry");function Se(){let e=globalThis;return e[we]||(e[we]=new Map)}function Z(e,t){Se().set(e,t);}function J(e){Se().delete(e);}var Oe=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function _(e,...t){Oe&&console.warn(`[svg-scroll-draw] ${e}`,...t);}function Ve(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function ve(e){let t=[],r=/([\w]+)\(([^)]*)\)/g,n;for(;(n=r.exec(e))!==null;){let a=[],i=[],l=n[2].trim();if(l)for(let m of l.split(/[\s,]+/)){let u=m.match(/^([-+]?[\d.eE]+)(.*)$/);a.push(u?parseFloat(u[1]):0),i.push(u?u[2]:"");}t.push({fn:n[1],nums:a,units:i});}return t}function We(e,t,r){let n=ve(e),a=ve(t);return n.length===0||n.length!==a.length?r<1?e:t:n.map((i,l)=>{let m=a[l];return i.fn!==m.fn||i.nums.length!==m.nums.length?r<1?`${i.fn}(${i.nums.map((u,c)=>`${u}${i.units[c]}`).join(", ")})`:`${m.fn}(${m.nums.map((u,c)=>`${u}${m.units[c]}`).join(", ")})`:`${i.fn}(${i.nums.map((u,c)=>`${u+(m.nums[c]-u)*r}${i.units[c]}`).join(", ")})`}).join(" ")}function Me(e,t,r){if(typeof e=="number"&&typeof t=="number")return String(e+(t-e)*r);let n=String(e),a=String(t);if(Ve(n))return ye(n,a,r);if(n.includes("("))return We(n,a,r);let i=n.match(/^([-+]?[\d.]+)(.*)$/),l=a.match(/^([-+]?[\d.]+)(.*)$/);if(i&&l){let m=parseFloat(i[1]),u=parseFloat(l[1]);return `${m+(u-m)*r}${i[2]||l[2]}`}return r<1?n:a}function ke(e){return e.replace(/([A-Z])/g,t=>`-${t.toLowerCase()}`)}var Be=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),qe=0,xe="--scroll-draw-progress";function je(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function ee(e,t){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let{props:n,trigger:a={},easing:i="ease-out",speed:l=1,once:m=false,axis:u="y",scrollContainer:c,native:f=true,velocityScale:g=false,respectReducedMotion:E=true,triggerElement:I,onProgress:b,onComplete:P,onEnter:p,onLeave:R,onEnterBack:te,onLeaveBack:ne}=t,Pe=E&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,k=typeof i=="function"?i:C[i]??C["ease-out"],re=Y(a.start??"top bottom"),oe=Y(a.end??"bottom top"),se=I??e,y=typeof c=="string"?document.querySelector(c):c??null,w=Object.entries(n).map(([o,s])=>({prop:ke(o),from:Array.isArray(s)?s[0]:"",to:Array.isArray(s)?s[1]:s}));function Le(){let o=window.getComputedStyle(e);for(let s of w)s.from===""&&(s.from=o.getPropertyValue(s.prop).trim()||"0");}function Ae(){for(let o of w)e.style.setProperty(o.prop,String(o.to));}let ie=new Map;for(let o of [...w.map(s=>s.prop),xe])ie.set(o,e.style.getPropertyValue(o));function B(){for(let[o,s]of ie)s?e.style.setProperty(o,s):e.style.removeProperty(o);}if(Pe)return Ae(),P?.(),{...r,destroy:B,getProgress:()=>1};Le();let ae=typeof i=="string"?Ee(i):null;function $e(){if(!f||!je()||!ae||u!=="y"||y||se!==e||m||l!==1||b||P||p||R||te||ne||g!==false||(a.start??"top bottom").trim()!=="top bottom"||(a.end??"bottom top").trim()!=="bottom top")return  false;for(let o of w)if(!Be.has(o.prop))return  false;return  true}function Ie(){let o=`ssd-a-${++qe}`,s=w.map(d=>`${d.prop}:${d.from}`).join(";"),F=w.map(d=>`${d.prop}:${d.to}`).join(";"),$=document.createElement("style");$.setAttribute("data-ssd-animate",""),$.textContent=`@keyframes ${o}{from{${s}}to{${F}}}.${o}{animation-name:${o};animation-duration:auto;animation-timing-function:${ae};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild($),e.classList.add(o);let h=()=>u==="x"?window.scrollX:window.scrollY,O=()=>u==="x"?window.innerWidth:window.innerHeight,V=()=>{let d=e.getBoundingClientRect();return K({top:d.top,height:d.height},h(),O(),re,oe)};Z(e,{type:"animate",getProgress:()=>X.getProgress(),getTrigger:V});let X={destroy(){e.classList.remove(o),$.remove(),e.style.animationPlayState="",B(),J(e);},replay(){e.classList.remove(o),e.offsetWidth,e.classList.add(o);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(d){let U=Math.min(1,Math.max(0,d));e.classList.remove(o);for(let Q of w)e.style.setProperty(Q.prop,Me(Q.from,Q.to,U));},getProgress(){let{tStart:d,tEnd:U}=V();return k(W(h(),d,U,l))}};return X}if($e())return Ie();let S=0,v=0,M=0,H=false,x=false,L=-1,A=0,N=false,T=NaN,q=-1,ue=0,le=()=>y?u==="x"?y.scrollLeft:y.scrollTop:u==="x"?window.scrollX:window.scrollY,Re=()=>y?u==="x"?y.clientWidth:y.clientHeight:u==="x"?window.innerWidth:window.innerHeight;function ce(){let o=de(se,y,u),s=K(o,o.scroll,Re(),re,oe);S=s.tStart,v=s.tEnd;}function z(o){e.style.setProperty(xe,String(o));for(let s of w)e.style.setProperty(s.prop,Me(s.from,s.to,o));b?.(o);}function Ce(o){if(isNaN(T)){T=o;return}T<=0&&o>0?p?.():T>0&&o<=0&&ne?.(),T<1&&o>=1?R?.():T>=1&&o<1&&te?.(),T=o;}function j(){if(!H||x)return;let o=performance.now(),s=le(),F=l;if(g!==false){let O=o-ue,V=O>0?Math.abs(s-(q<0?s:q))/O:0;F=l*Math.max(.2,1+V*(typeof g=="number"?g:1)*.04);}q=s,ue=o;let $=v===S?0:(s-S)/(v-S);Ce($);let h=k(W(s,S,v,F));m&&(L=Math.max(L,h),h=L),A=h,z(h),h>=1&&!N?(N=true,P?.()):h<1&&!m&&(N=false),M=requestAnimationFrame(j);}ce(),v===S&&_("scrollAnimate: the trigger window has zero length (start and end resolve to the same scroll position), so this element will never animate. If the target is inside a position:sticky stage, measure the trigger from the container that holds the scroll room via `triggerElement`.",e);{let o=k(W(le(),S,v,l));m&&o>0&&(L=o),A=o,z(o);}let me=new IntersectionObserver(o=>{o.forEach(s=>{H=s.isIntersecting,H&&!x?M=requestAnimationFrame(j):cancelAnimationFrame(M);});},{root:y??null}),G;function D(){clearTimeout(G),G=setTimeout(ce,150);}return window.addEventListener("resize",D),window.addEventListener("orientationchange",D),me.observe(e),Z(e,{type:"animate",getProgress:()=>A,getTrigger:()=>({tStart:S,tEnd:v})}),{destroy(){cancelAnimationFrame(M),me.disconnect(),window.removeEventListener("resize",D),window.removeEventListener("orientationchange",D),clearTimeout(G),B(),J(e);},replay(){L=-1,N=false,A=0,x=false,z(0);},pause(){x=true,cancelAnimationFrame(M);},resume(){x&&(x=false,H&&(M=requestAnimationFrame(j)));},seek(o){let s=Math.min(1,Math.max(0,o));A=s,L=s,x=true,cancelAnimationFrame(M),z(s);},getProgress(){return A}}}var Te={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0,refresh:()=>{}};function pt(e,t={}){if(typeof window>"u")return Te;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return _("scrollHorizontal: track element not found:",e),Te;let n=r,{easing:a="linear",trigger:i={start:"top top",end:"bottom bottom"},scrollContainer:l,respectReducedMotion:m=false,onProgress:u}=t;function c(){let p=typeof l=="string"?document.querySelector(l):l??null;return p?p.clientWidth:window.innerWidth}function f(){return t.distance??n.scrollWidth-c()}function g(){if(t.triggerElement!==void 0){let p=typeof t.triggerElement=="string"?document.querySelector(t.triggerElement):t.triggerElement;if(p)return p;_("scrollHorizontal: triggerElement not found:",t.triggerElement);}for(let p=n.parentElement;p;p=p.parentElement)if(window.getComputedStyle(p).position==="sticky")return p.parentElement??p;return n}let E=f(),I=g(),b=ee(n,P(E,I));function P(p,R){return {props:{transform:["translateX(0px)",`translateX(${-p}px)`]},trigger:i,easing:a,native:false,respectReducedMotion:m,...R!==n&&{triggerElement:R},...l!==void 0&&{scrollContainer:l},...u!==void 0&&{onProgress:u}}}return {destroy(){b.destroy();},replay(){b.replay();},pause(){b.pause();},resume(){b.resume();},seek(p){b.seek(p);},getProgress(){return b.getProgress()},refresh(){b.destroy(),E=f(),I=g(),b=ee(n,P(E,I));}}}exports.scrollHorizontal=pt;
+'use strict';function _e({bounces:e=3,decay:t=.5}={}){let r=Math.max(1,Math.round(e)),n=Math.max(.01,Math.min(.99,t)),a=Math.sqrt(n),s=0,m=[];for(let u=0;u<r;u++){let g=Math.pow(a,u);m.push(g),s+=g;}let p=[0],c=0;for(let u=0;u<r;u++)c+=m[u]/s,p.push(c);return u=>{if(u<=0)return 0;if(u>=1)return 1;for(let g=0;g<r;g++)if(u<=p[g+1]){let h=(u-p[g])/(p[g+1]-p[g]);if(g===0)return h*(2-h);let M=1-Math.pow(n,g);return M+(1-M)*(2*h-1)*(2*h-1)}return 1}}function He({amplitude:e=1,period:t=.4}={}){let r=Math.max(1,e),n=Math.max(.1,t),a=r<=1?n/4:n/(2*Math.PI)*Math.asin(1/r);return s=>s<=0?0:s>=1?1:r*Math.pow(2,-10*s)*Math.sin((s-a)*(2*Math.PI)/n)+1}var V={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:_e(),elastic:He()};function de(e,t,r){return Math.min(r,Math.max(t,e))}function ie(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let[r="top",n="bottom"]=t.split(/\s+/).filter(Boolean);return {element:r,viewport:n}}function be(e,t,r,n){switch(n){case "top":return e+r;case "center":return e+r+t/2;case "bottom":return e+r+t;default:return e+r}}function ye(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function Q(e,t,r,n){return r===t?0:de((e-t)/(r-t)*n,0,1)}function se(e,t,r,n,a){let s=be(e.top,e.height,t,n.element)-ye(n.viewport,r),m=be(e.top,e.height,t,a.element)-ye(a.viewport,r);return {tStart:s,tEnd:m}}function he(e,t,r){let n=e.getBoundingClientRect(),a=r==="x"?n.width:n.height;return t?{top:r==="x"?n.left-t.getBoundingClientRect().left+t.scrollLeft:n.top-t.getBoundingClientRect().top+t.scrollTop,height:a,scroll:0}:{top:r==="x"?n.left:n.top,height:a,scroll:r==="x"?window.scrollX:window.scrollY}}function Ee(e){let t=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(t)return [parseInt(t[1]+t[1],16),parseInt(t[2]+t[2],16),parseInt(t[3]+t[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 n=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return n?[parseInt(n[1]),parseInt(n[2]),parseInt(n[3])]:null}function we(e,t,r){let n=Ee(e),a=Ee(t);return !n||!a?e:`rgb(${Math.round(n[0]+(a[0]-n[0])*r)},${Math.round(n[1]+(a[1]-n[1])*r)},${Math.round(n[2]+(a[2]-n[2])*r)})`}var ze="cubic-bezier(0.333333, 0, 0.666667, 0.333333)",Ne="cubic-bezier(0.333333, 0.666667, 0.666667, 1)",ve=33;function Oe(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timing-function: linear(0, 1)")}function Fe(e){let t=[];for(let r=0;r<ve;r++){let n=r/(ve-1);t.push(String(Math.round(e(n)*1e5)/1e5));}return `linear(${t.join(",")})`}function Se(e){switch(e){case "linear":return "linear";case "ease-in":return ze;case "ease-out":return Ne;case "ease-in-out":return Oe()?Fe(V["ease-in-out"]):null;default:return null}}var Me=Symbol.for("svg-scroll-draw.registry");function Te(){let e=globalThis;return e[Me]||(e[Me]=new Map)}function ae(e,t){Te().set(e,t);}function ue(e){Te().delete(e);}var De=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function W(e,...t){De&&console.warn(`[svg-scroll-draw] ${e}`,...t);}function Ve(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function xe(e){let t=[],r=/([\w]+)\(([^)]*)\)/g,n;for(;(n=r.exec(e))!==null;){let a=[],s=[],m=n[2].trim();if(m)for(let p of m.split(/[\s,]+/)){let c=p.match(/^([-+]?[\d.eE]+)(.*)$/);a.push(c?parseFloat(c[1]):0),s.push(c?c[2]:"");}t.push({fn:n[1],nums:a,units:s});}return t}function We(e,t,r){let n=xe(e),a=xe(t);return n.length===0||n.length!==a.length?r<1?e:t:n.map((s,m)=>{let p=a[m];return s.fn!==p.fn||s.nums.length!==p.nums.length?r<1?`${s.fn}(${s.nums.map((c,u)=>`${c}${s.units[u]}`).join(", ")})`:`${p.fn}(${p.nums.map((c,u)=>`${c}${p.units[u]}`).join(", ")})`:`${s.fn}(${s.nums.map((c,u)=>`${c+(p.nums[u]-c)*r}${s.units[u]}`).join(", ")})`}).join(" ")}function Le(e,t,r){if(typeof e=="number"&&typeof t=="number")return String(e+(t-e)*r);let n=String(e),a=String(t);if(Ve(n))return we(n,a,r);if(n.includes("("))return We(n,a,r);let s=n.match(/^([-+]?[\d.]+)(.*)$/),m=a.match(/^([-+]?[\d.]+)(.*)$/);if(s&&m){let p=parseFloat(s[1]),c=parseFloat(m[1]);return `${p+(c-p)*r}${s[2]||m[2]}`}return r<1?n:a}function ke(e){return e.replace(/([A-Z])/g,t=>`-${t.toLowerCase()}`)}var Be=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),qe=0,Pe="--scroll-draw-progress";function je(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function le(e,t){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let{props:n,trigger:a={},easing:s="ease-out",speed:m=1,once:p=false,axis:c="y",scrollContainer:u,native:g=true,velocityScale:h=false,respectReducedMotion:M=true,triggerElement:N,onProgress:A,onComplete:E,onEnter:d,onLeave:O,onEnterBack:v,onLeaveBack:F}=t,D=M&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,I=typeof s=="function"?s:V[s]??V["ease-out"],C=ie(a.start??"top bottom"),k=ie(a.end??"bottom top"),T=N??e,b=typeof u=="string"?document.querySelector(u):u??null,w=Object.entries(n).map(([o,i])=>({prop:ke(o),from:Array.isArray(i)?i[0]:"",to:Array.isArray(i)?i[1]:i}));function l(){let o=window.getComputedStyle(e);for(let i of w)i.from===""&&(i.from=o.getPropertyValue(i.prop).trim()||"0");}function f(){for(let o of w)e.style.setProperty(o.prop,String(o.to));}let B=new Map;for(let o of [...w.map(i=>i.prop),Pe])B.set(o,e.style.getPropertyValue(o));function Z(){for(let[o,i]of B)i?e.style.setProperty(o,i):e.style.removeProperty(o);}if(D)return f(),E?.(),{...r,destroy:Z,getProgress:()=>1};l();let ce=typeof s=="string"?Se(s):null;function Re(){if(!g||!je()||!ce||c!=="y"||b||T!==e||p||m!==1||A||E||d||O||v||F||h!==false||(a.start??"top bottom").trim()!=="top bottom"||(a.end??"bottom top").trim()!=="bottom top")return  false;for(let o of w)if(!Be.has(o.prop))return  false;return  true}function Ae(){let o=`ssd-a-${++qe}`,i=w.map(y=>`${y.prop}:${y.from}`).join(";"),U=w.map(y=>`${y.prop}:${y.to}`).join(";"),z=document.createElement("style");z.setAttribute("data-ssd-animate",""),z.textContent=`@keyframes ${o}{from{${i}}to{${U}}}.${o}{animation-name:${o};animation-duration:auto;animation-timing-function:${ce};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(z),e.classList.add(o);let S=()=>c==="x"?window.scrollX:window.scrollY,Y=()=>c==="x"?window.innerWidth:window.innerHeight,K=()=>{let y=e.getBoundingClientRect();return se({top:y.top,height:y.height},S(),Y(),C,k)};ae(e,{type:"animate",getProgress:()=>ne.getProgress(),getTrigger:K});let ne={destroy(){e.classList.remove(o),z.remove(),e.style.animationPlayState="",Z(),ue(e);},replay(){e.classList.remove(o),e.offsetWidth,e.classList.add(o);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(y){let re=Math.min(1,Math.max(0,y));e.classList.remove(o);for(let oe of w)e.style.setProperty(oe.prop,Le(oe.from,oe.to,re));},getProgress(){let{tStart:y,tEnd:re}=K();return I(Q(S(),y,re,m))}};return ne}if(Re())return Ae();let x=0,L=0,P=0,q=false,$=false,_=-1,H=0,j=false,R=NaN,J=-1,me=0,pe=()=>b?c==="x"?b.scrollLeft:b.scrollTop:c==="x"?window.scrollX:window.scrollY,Ie=()=>b?c==="x"?b.clientWidth:b.clientHeight:c==="x"?window.innerWidth:window.innerHeight;function fe(){let o=he(T,b,c),i=se(o,o.scroll,Ie(),C,k);x=i.tStart,L=i.tEnd;}function G(o){e.style.setProperty(Pe,String(o));for(let i of w)e.style.setProperty(i.prop,Le(i.from,i.to,o));A?.(o);}function Ce(o){if(isNaN(R)){R=o;return}R<=0&&o>0?d?.():R>0&&o<=0&&F?.(),R<1&&o>=1?O?.():R>=1&&o<1&&v?.(),R=o;}function ee(){if(!q||$)return;let o=performance.now(),i=pe(),U=m;if(h!==false){let Y=o-me,K=Y>0?Math.abs(i-(J<0?i:J))/Y:0;U=m*Math.max(.2,1+K*(typeof h=="number"?h:1)*.04);}J=i,me=o;let z=L===x?0:(i-x)/(L-x);Ce(z);let S=I(Q(i,x,L,U));p&&(_=Math.max(_,S),S=_),H=S,G(S),S>=1&&!j?(j=true,E?.()):S<1&&!p&&(j=false),P=requestAnimationFrame(ee);}fe(),L===x&&W("scrollAnimate: the trigger window has zero length (start and end resolve to the same scroll position), so this element will never animate. If the target is inside a position:sticky stage, measure the trigger from the container that holds the scroll room via `triggerElement`.",e);{let o=I(Q(pe(),x,L,m));p&&o>0&&(_=o),H=o,G(o);}let ge=new IntersectionObserver(o=>{o.forEach(i=>{q=i.isIntersecting,q&&!$?P=requestAnimationFrame(ee):cancelAnimationFrame(P);});},{root:b??null}),te;function X(){clearTimeout(te),te=setTimeout(fe,150);}return window.addEventListener("resize",X),window.addEventListener("orientationchange",X),ge.observe(e),ae(e,{type:"animate",getProgress:()=>H,getTrigger:()=>({tStart:x,tEnd:L})}),{destroy(){cancelAnimationFrame(P),ge.disconnect(),window.removeEventListener("resize",X),window.removeEventListener("orientationchange",X),clearTimeout(te),Z(),ue(e);},replay(){_=-1,j=false,H=0,$=false,G(0);},pause(){$=true,cancelAnimationFrame(P);},resume(){$&&($=false,q&&(P=requestAnimationFrame(ee)));},seek(o){let i=Math.min(1,Math.max(0,o));H=i,_=i,$=true,cancelAnimationFrame(P),G(i);},getProgress(){return H}}}var $e={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0,refresh:()=>{}};function pt(e,t={}){if(typeof window>"u")return $e;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return W("scrollHorizontal: track element not found:",e),$e;let n=r,{easing:a="linear",trigger:s={start:"top top",end:"bottom bottom"},scrollContainer:m,respectReducedMotion:p=false,onProgress:c}=t,u=typeof m=="string"?document.querySelector(m):m??null;function g(){for(let l=n.parentElement;l;l=l.parentElement)if(window.getComputedStyle(l).position==="sticky")return l;return null}function h(){let l=g();if(l){let f=window.getComputedStyle(l);return l.clientWidth-(parseFloat(f.paddingLeft)||0)-(parseFloat(f.paddingRight)||0)}return u?u.clientWidth:document.documentElement.clientWidth||window.innerWidth}function M(){return t.distance??n.scrollWidth-h()}function N(){if(t.triggerElement!==void 0){let f=typeof t.triggerElement=="string"?document.querySelector(t.triggerElement):t.triggerElement;if(f)return f;W("scrollHorizontal: triggerElement not found:",t.triggerElement);}let l=g();return l?l.parentElement??l:n}let A=M(),E=N(),d=le(n,F(A,E)),O=D(),v=null;function F(l,f){return {props:{transform:["translateX(0px)",`translateX(${-l}px)`]},trigger:s,easing:a,native:false,respectReducedMotion:p,...f!==n&&{triggerElement:f},...m!==void 0&&{scrollContainer:m},...c!==void 0&&{onProgress:c}}}function D(){let l=E.getBoundingClientRect(),f=u?l.top-u.getBoundingClientRect().top+u.scrollTop:l.top+window.scrollY;return `${M()} ${Math.round(f)} ${Math.round(l.height)}`}function I(){d.destroy();let l=N(),f=l!==E;A=M(),E=l,d=le(n,F(A,E)),O=D(),v!==null&&d.seek(v),f&&w();}let C;function k(){(N()!==E||D()!==O)&&I();}function T(){clearTimeout(C),C=setTimeout(k,150);}window.addEventListener("resize",T),window.addEventListener("orientationchange",T);let b=typeof ResizeObserver<"u"?new ResizeObserver(T):void 0;function w(){if(!b)return;b.disconnect();let l=[document.body,document.documentElement,n,E];l.filter((f,B)=>f&&l.indexOf(f)===B).forEach(f=>b.observe(f));}return w(),{destroy(){clearTimeout(C),window.removeEventListener("resize",T),window.removeEventListener("orientationchange",T),b?.disconnect(),d.destroy();},replay(){v=null,d.replay();},pause(){d.pause(),v=d.getProgress();},resume(){v=null,d.resume();},seek(l){d.seek(l),v=d.getProgress();},getProgress(){return d.getProgress()},refresh(){I();}}}exports.scrollHorizontal=pt;

package/dist/horizontal/index.d.mts

@@ -5,7 +5,10 @@ interface ScrollHorizontalOptions {
      * Total horizontal travel distance in pixels.
      *
      * Default: `track.scrollWidth` minus the width it is seen through — the
-     * viewport, or the `scrollContainer`'s client width when one is given.
+     * content box of the sticky stage around the track; without one, the
+     * `scrollContainer`'s client width, or the viewport's with any scrollbar left
+     * out. Re-measured whenever the layout changes, so leave it out unless you
+     * want a fixed number: a number you pass is used as given.
      */
     distance?: number;
     /**
@@ -50,7 +53,11 @@ interface ScrollHorizontalOptions {
     onProgress?: (progress: number) => void;
 }
 interface ScrollHorizontalInstance extends ScrollDrawInstance {
-    /** Recalculate travel distance after layout change. */
+    /**
+     * Re-measure now. The strip already re-measures 150 ms after the window, the
+     * page, the track or its runway changes size; call this when something else
+     * moved it.
+     */
     refresh: () => void;
 }
 /**

package/dist/horizontal/index.d.ts

@@ -5,7 +5,10 @@ interface ScrollHorizontalOptions {
      * Total horizontal travel distance in pixels.
      *
      * Default: `track.scrollWidth` minus the width it is seen through — the
-     * viewport, or the `scrollContainer`'s client width when one is given.
+     * content box of the sticky stage around the track; without one, the
+     * `scrollContainer`'s client width, or the viewport's with any scrollbar left
+     * out. Re-measured whenever the layout changes, so leave it out unless you
+     * want a fixed number: a number you pass is used as given.
      */
     distance?: number;
     /**
@@ -50,7 +53,11 @@ interface ScrollHorizontalOptions {
     onProgress?: (progress: number) => void;
 }
 interface ScrollHorizontalInstance extends ScrollDrawInstance {
-    /** Recalculate travel distance after layout change. */
+    /**
+     * Re-measure now. The strip already re-measures 150 ms after the window, the
+     * page, the track or its runway changes size; call this when something else
+     * moved it.
+     */
     refresh: () => void;
 }
 /**

package/dist/horizontal/index.mjs

@@ -1 +1 @@
-import {a}from'../chunk-QJ4H2HW3.mjs';import'../chunk-OJFWQ6CU.mjs';import'../chunk-YWKPTYSG.mjs';import'../chunk-PEFR3ZB7.mjs';import'../chunk-DM6EDKWH.mjs';import'../chunk-4DOJSIEQ.mjs';import'../chunk-BCV4RAIX.mjs';import {b}from'../chunk-LFSU6LR3.mjs';var E={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0,refresh:()=>{}};function z(l,t={}){if(typeof window>"u")return E;let c=typeof l=="string"?document.querySelector(l):l;if(!c)return b("scrollHorizontal: track element not found:",l),E;let n=c,{easing:y="linear",trigger:b$1={start:"top top",end:"bottom bottom"},scrollContainer:o,respectReducedMotion:S=false,onProgress:m}=t;function w(){let e=typeof o=="string"?document.querySelector(o):o??null;return e?e.clientWidth:window.innerWidth}function u(){return t.distance??n.scrollWidth-w()}function d(){if(t.triggerElement!==void 0){let e=typeof t.triggerElement=="string"?document.querySelector(t.triggerElement):t.triggerElement;if(e)return e;b("scrollHorizontal: triggerElement not found:",t.triggerElement);}for(let e=n.parentElement;e;e=e.parentElement)if(window.getComputedStyle(e).position==="sticky")return e.parentElement??e;return n}let i=u(),s=d(),r=a(n,f(i,s));function f(e,p){return {props:{transform:["translateX(0px)",`translateX(${-e}px)`]},trigger:b$1,easing:y,native:false,respectReducedMotion:S,...p!==n&&{triggerElement:p},...o!==void 0&&{scrollContainer:o},...m!==void 0&&{onProgress:m}}}return {destroy(){r.destroy();},replay(){r.replay();},pause(){r.pause();},resume(){r.resume();},seek(e){r.seek(e);},getProgress(){return r.getProgress()},refresh(){r.destroy(),i=u(),s=d(),r=a(n,f(i,s));}}}export{z as scrollHorizontal};
+import {a}from'../chunk-QJ4H2HW3.mjs';import'../chunk-OJFWQ6CU.mjs';import'../chunk-YWKPTYSG.mjs';import'../chunk-PEFR3ZB7.mjs';import'../chunk-DM6EDKWH.mjs';import'../chunk-4DOJSIEQ.mjs';import'../chunk-BCV4RAIX.mjs';import {b}from'../chunk-LFSU6LR3.mjs';var x={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0,refresh:()=>{}};function k(d,r={}){if(typeof window>"u")return x;let h=typeof d=="string"?document.querySelector(d):d;if(!h)return b("scrollHorizontal: track element not found:",d),x;let o=h,{easing:R="linear",trigger:C={start:"top top",end:"bottom bottom"},scrollContainer:s,respectReducedMotion:L=false,onProgress:v}=r,c=typeof s=="string"?document.querySelector(s):s??null;function b$1(){for(let e=o.parentElement;e;e=e.parentElement)if(window.getComputedStyle(e).position==="sticky")return e;return null}function O(){let e=b$1();if(e){let t=window.getComputedStyle(e);return e.clientWidth-(parseFloat(t.paddingLeft)||0)-(parseFloat(t.paddingRight)||0)}return c?c.clientWidth:document.documentElement.clientWidth||window.innerWidth}function g(){return r.distance??o.scrollWidth-O()}function m(){if(r.triggerElement!==void 0){let t=typeof r.triggerElement=="string"?document.querySelector(r.triggerElement):r.triggerElement;if(t)return t;b("scrollHorizontal: triggerElement not found:",r.triggerElement);}let e=b$1();return e?e.parentElement??e:o}let f=g(),i=m(),n=a(o,z(f,i)),S=p(),l=null;function z(e,t){return {props:{transform:["translateX(0px)",`translateX(${-e}px)`]},trigger:C,easing:R,native:false,respectReducedMotion:L,...t!==o&&{triggerElement:t},...s!==void 0&&{scrollContainer:s},...v!==void 0&&{onProgress:v}}}function p(){let e=i.getBoundingClientRect(),t=c?e.top-c.getBoundingClientRect().top+c.scrollTop:e.top+window.scrollY;return `${g()} ${Math.round(t)} ${Math.round(e.height)}`}function T(){n.destroy();let e=m(),t=e!==i;f=g(),i=e,n=a(o,z(f,i)),S=p(),l!==null&&n.seek(l),t&&H();}let E;function P(){(m()!==i||p()!==S)&&T();}function u(){clearTimeout(E),E=setTimeout(P,150);}window.addEventListener("resize",u),window.addEventListener("orientationchange",u);let a$1=typeof ResizeObserver<"u"?new ResizeObserver(u):void 0;function H(){if(!a$1)return;a$1.disconnect();let e=[document.body,document.documentElement,o,i];e.filter((t,M)=>t&&e.indexOf(t)===M).forEach(t=>a$1.observe(t));}return H(),{destroy(){clearTimeout(E),window.removeEventListener("resize",u),window.removeEventListener("orientationchange",u),a$1?.disconnect(),n.destroy();},replay(){l=null,n.replay();},pause(){n.pause(),l=n.getProgress();},resume(){l=null,n.resume();},seek(e){n.seek(e),l=n.getProgress();},getProgress(){return n.getProgress()},refresh(){T();}}}export{k as scrollHorizontal};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svg-scroll-draw",
-  "version": "2.18.0",
+  "version": "2.18.1",
   "description": "Scroll-driven animation for the web — draw SVG paths, reveal elements, pin sections, scrub video. Zero dependencies, native CSS fast path, works with React, Vue, Svelte, Solid, Angular, Astro and vanilla JS",
   "keywords": [
     "svg",