svg-scroll-draw 2.9.0 → 2.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/angular/index.cjs +3 -3
- package/dist/angular/index.d.mts +42 -0
- package/dist/angular/index.d.ts +42 -0
- package/dist/angular/index.mjs +3 -3
- package/dist/astro/index.cjs +3 -3
- package/dist/astro/index.d.mts +20 -5
- package/dist/astro/index.d.ts +20 -5
- package/dist/astro/index.mjs +3 -3
- package/dist/cdn/svg-scroll-draw.dev.global.js +1878 -0
- package/dist/cdn/svg-scroll-draw.global.js +3 -3
- package/dist/cinematic/index.cjs +2 -2
- package/dist/cinematic/index.mjs +2 -2
- package/dist/cli/init.js +104 -101
- package/dist/devtools/index.cjs +1 -1
- package/dist/devtools/index.mjs +1 -1
- package/dist/group/index.cjs +3 -3
- package/dist/group/index.d.mts +42 -0
- package/dist/group/index.d.ts +42 -0
- package/dist/group/index.mjs +3 -3
- package/dist/horizontal/index.cjs +1 -1
- package/dist/horizontal/index.d.mts +48 -1
- package/dist/horizontal/index.d.ts +48 -1
- package/dist/horizontal/index.mjs +1 -1
- package/dist/index.cjs +4 -4
- package/dist/index.d.mts +42 -0
- package/dist/index.d.ts +42 -0
- package/dist/index.mjs +4 -4
- package/dist/nuxt/index.cjs +3 -3
- package/dist/nuxt/index.d.mts +27 -0
- package/dist/nuxt/index.d.ts +27 -0
- package/dist/nuxt/index.mjs +3 -3
- package/dist/pin/index.cjs +1 -1
- package/dist/pin/index.mjs +1 -1
- package/dist/progress/index.cjs +1 -1
- package/dist/progress/index.d.mts +15 -0
- package/dist/progress/index.d.ts +15 -0
- package/dist/progress/index.mjs +1 -1
- package/dist/react/index.cjs +3 -3
- package/dist/react/index.d.mts +27 -0
- package/dist/react/index.d.ts +27 -0
- package/dist/react/index.mjs +3 -3
- package/dist/reveal/index.cjs +1 -1
- package/dist/reveal/index.mjs +1 -1
- package/dist/snap/index.cjs +1 -1
- package/dist/snap/index.d.mts +8 -0
- package/dist/snap/index.d.ts +8 -0
- package/dist/snap/index.mjs +1 -1
- package/dist/solid/index.cjs +3 -3
- package/dist/solid/index.d.mts +42 -0
- package/dist/solid/index.d.ts +42 -0
- package/dist/solid/index.mjs +3 -3
- package/dist/svelte/index.cjs +3 -3
- package/dist/svelte/index.d.mts +42 -0
- package/dist/svelte/index.d.ts +42 -0
- package/dist/svelte/index.mjs +3 -3
- package/dist/text/index.cjs +1 -1
- package/dist/text/index.d.mts +15 -0
- package/dist/text/index.d.ts +15 -0
- package/dist/text/index.mjs +1 -1
- package/dist/timeline/index.cjs +8 -8
- package/dist/timeline/index.d.mts +31 -0
- package/dist/timeline/index.d.ts +31 -0
- package/dist/timeline/index.mjs +8 -8
- package/dist/video/index.cjs +1 -1
- package/dist/video/index.d.mts +15 -0
- package/dist/video/index.d.ts +15 -0
- package/dist/video/index.mjs +1 -1
- package/dist/vue/index.cjs +3 -3
- package/dist/vue/index.d.mts +27 -0
- package/dist/vue/index.d.ts +27 -0
- package/dist/vue/index.mjs +3 -3
- package/dist/web-component/index.cjs +3 -3
- package/dist/web-component/index.mjs +3 -3
- package/package.json +22 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
function xe({bounces:e=3,decay:t=.5}={}){let n=Math.max(1,Math.round(e)),r=Math.max(.01,Math.min(.99,t)),u=Math.sqrt(r),s=0,m=[];for(let l=0;l<n;l++){let p=Math.pow(u,l);m.push(p),s+=p;}let c=[0],i=0;for(let l=0;l<n;l++)i+=m[l]/s,c.push(i);return l=>{if(l<=0)return 0;if(l>=1)return 1;for(let p=0;p<n;p++)if(l<=c[p+1]){let f=(l-c[p])/(c[p+1]-c[p]);if(p===0)return f*(2-f);let h=1-Math.pow(r,p);return h+(1-h)*(2*f-1)*(2*f-1)}return 1}}function ve({amplitude:e=1,period:t=.4}={}){let n=Math.max(1,e),r=Math.max(.1,t),u=n<=1?r/4:r/(2*Math.PI)*Math.asin(1/n);return s=>s<=0?0:s>=1?1:n*Math.pow(2,-10*s)*Math.sin((s-u)*(2*Math.PI)/r)+1}var B={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:xe(),elastic:ve()};function W(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let[n="top",r="bottom"]=t.split(/\s+/).filter(Boolean);return {element:n,viewport:r}}function te(e,t,n,r){switch(r){case "top":return e+n;case "center":return e+n+t/2;case "bottom":return e+n+t;default:return e+n}}function ne(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 Se(e,t,n){return Math.min(n,Math.max(t,e))}function F(e,t,n,r){return n===t?0:Se((e-t)/(n-t)*r,0,1)}function q(e,t,n,r,u){let s=te(e.top,e.height,t,r.element)-ne(r.viewport,n),m=te(e.top,e.height,t,u.element)-ne(u.viewport,n);return {tStart:s,tEnd:m}}function re(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 n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let r=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return r?[parseInt(r[1]),parseInt(r[2]),parseInt(r[3])]:null}function oe(e,t,n){let r=re(e),u=re(t);return !r||!u?e:`rgb(${Math.round(r[0]+(u[0]-r[0])*n)},${Math.round(r[1]+(u[1]-r[1])*n)},${Math.round(r[2]+(u[2]-r[2])*n)})`}var se=new Map;function ie(e,t){se.set(e,t);}function ae(e){se.delete(e);}function Me(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function ue(e){let t=[],n=/([\w]+)\(([^)]*)\)/g,r;for(;(r=n.exec(e))!==null;){let u=[],s=[],m=r[2].trim();if(m)for(let c of m.split(/[\s,]+/)){let i=c.match(/^([-+]?[\d.eE]+)(.*)$/);u.push(i?parseFloat(i[1]):0),s.push(i?i[2]:"");}t.push({fn:r[1],nums:u,units:s});}return t}function Pe(e,t,n){let r=ue(e),u=ue(t);return r.length===0||r.length!==u.length?n<1?e:t:r.map((s,m)=>{let c=u[m];return s.fn!==c.fn||s.nums.length!==c.nums.length?n<1?`${s.fn}(${s.nums.map((i,l)=>`${i}${s.units[l]}`).join(", ")})`:`${c.fn}(${c.nums.map((i,l)=>`${i}${c.units[l]}`).join(", ")})`:`${s.fn}(${s.nums.map((i,l)=>`${i+(c.nums[l]-i)*n}${s.units[l]}`).join(", ")})`}).join(" ")}function le(e,t,n){if(typeof e=="number"&&typeof t=="number")return String(e+(t-e)*n);let r=String(e),u=String(t);if(Me(r))return oe(r,u,n);if(r.includes("("))return Pe(r,u,n);let s=r.match(/^([-+]?[\d.]+)(.*)$/),m=u.match(/^([-+]?[\d.]+)(.*)$/);if(s&&m){let c=parseFloat(s[1]),i=parseFloat(m[1]);return `${c+(i-c)*n}${s[2]||m[2]}`}return n<1?r:u}function Te(e){return e.replace(/([A-Z])/g,t=>`-${t.toLowerCase()}`)}var ce={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},$e=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),Ae=0;function Ie(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function j(e,t){let n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return n;let{props:r,trigger:u={},easing:s="ease-out",speed:m=1,once:c=false,axis:i="y",scrollContainer:l,native:p=true,velocityScale:f=false,onProgress:h,onComplete:H,onEnter:G,onLeave:X,onEnterBack:Y,onLeaveBack:U}=t,pe=window.matchMedia("(prefers-reduced-motion: reduce)").matches,z=typeof s=="function"?s:B[s]??B["ease-out"],Z=W(u.start??"top bottom"),J=W(u.end??"bottom top"),g=typeof l=="string"?document.querySelector(l):l??null,E=Object.entries(r).map(([o,a])=>({prop:Te(o),from:Array.isArray(a)?a[0]:"",to:Array.isArray(a)?a[1]:a}));function fe(){let o=window.getComputedStyle(e);for(let a of E)a.from===""&&(a.from=o.getPropertyValue(a.prop).trim()||"0");}function ge(){for(let o of E)e.style.setProperty(o.prop,String(o.to));}if(pe)return ge(),H?.(),n;fe();function de(){if(!p||!Ie()||typeof s!="string"||!(s in ce)||i!=="y"||g||c||m!==1||h||H||G||X||Y||U||f!==false||(u.start??"top bottom").trim()!=="top bottom"||(u.end??"bottom top").trim()!=="bottom top")return false;for(let o of E)if(!$e.has(o.prop))return false;return true}function be(){let o=`ssd-a-${++Ae}`,a=E.map(d=>`${d.prop}:${d.from}`).join(";"),w=E.map(d=>`${d.prop}:${d.to}`).join(";"),y=document.createElement("style");y.setAttribute("data-ssd-animate",""),y.textContent=`@keyframes ${o}{from{${a}}to{${w}}}.${o}{animation-name:${o};animation-duration:auto;animation-timing-function:${ce[s]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(y),e.classList.add(o);let b=()=>i==="x"?window.scrollX:window.scrollY,R=()=>i==="x"?window.innerWidth:window.innerHeight;return {destroy(){e.classList.remove(o),y.remove();},replay(){e.classList.remove(o),e.offsetWidth,e.classList.add(o);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(d){let A=Math.min(1,Math.max(0,d));e.classList.remove(o);for(let I of E)e.style.setProperty(I.prop,le(I.from,I.to,A));},getProgress(){let d=e.getBoundingClientRect(),A=b(),I=R(),{tStart:we,tEnd:Ee}=q({top:d.top,height:d.height},A,I,Z,J);return z(F(A,we,Ee,m))}}}if(de())return be();let x=0,P=0,v=0,L=false,S=false,T=-1,$=0,C=false,M=NaN,D=-1,K=0,V=()=>g?i==="x"?g.scrollLeft:g.scrollTop:i==="x"?window.scrollX:window.scrollY,he=()=>g?i==="x"?g.clientWidth:g.clientHeight:i==="x"?window.innerWidth:window.innerHeight;function Q(){let o=e.getBoundingClientRect(),a,w;if(g){let b=g.getBoundingClientRect();a=i==="x"?o.left-b.left+g.scrollLeft:o.top-b.top+g.scrollTop,w=i==="x"?o.width:o.height;}else a=i==="x"?o.left:o.top,w=i==="x"?o.width:o.height;let y=q({top:a,height:w},V(),he(),Z,J);x=y.tStart,P=y.tEnd;}function N(o){e.style.setProperty("--scroll-draw-progress",String(o));for(let a of E)e.style.setProperty(a.prop,le(a.from,a.to,o));h?.(o);}function ye(o){if(isNaN(M)){M=o;return}M<=0&&o>0?G?.():M>0&&o<=0&&U?.(),M<1&&o>=1?X?.():M>=1&&o<1&&Y?.(),M=o;}function _(){if(!L||S)return;let o=performance.now(),a=V(),w=m;if(f!==false){let R=o-K,d=R>0?Math.abs(a-(D<0?a:D))/R:0;w=m*Math.max(.2,1+d*(typeof f=="number"?f:1)*.04);}D=a,K=o;let y=P===x?0:(a-x)/(P-x);ye(y);let b=z(F(a,x,P,w));c&&(T=Math.max(T,b),b=T),$=b,N(b),b>=1&&!C?(C=true,H?.()):b<1&&!c&&(C=false),v=requestAnimationFrame(_);}Q();{let o=z(F(V(),x,P,m));c&&o>0&&(T=o),$=o,N(o);}let ee=new IntersectionObserver(o=>{o.forEach(a=>{L=a.isIntersecting,L&&!S?v=requestAnimationFrame(_):cancelAnimationFrame(v);});},{root:g??null}),k;function O(){clearTimeout(k),k=setTimeout(Q,150);}return window.addEventListener("resize",O),window.addEventListener("orientationchange",O),ee.observe(e),ie(e,{type:"animate",getProgress:()=>$,getTrigger:()=>({tStart:x,tEnd:P})}),{destroy(){cancelAnimationFrame(v),ee.disconnect(),window.removeEventListener("resize",O),window.removeEventListener("orientationchange",O),clearTimeout(k),ae(e);},replay(){T=-1,C=false,$=0,S=false,N(0);},pause(){S=true,cancelAnimationFrame(v);},resume(){S&&(S=false,L&&(v=requestAnimationFrame(_)));},seek(o){let a=Math.min(1,Math.max(0,o));$=a,T=a,S=true,cancelAnimationFrame(v),N(a);},getProgress(){return $}}}var me={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0,refresh:()=>{}};function He(e,t={}){if(typeof window>"u")return me;let n=typeof e=="string"?document.querySelector(e):e;if(!n)return process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] scrollHorizontal: track element not found:",e),me;let r=n,{easing:u="linear",trigger:s={start:"top top",end:"bottom bottom"},scrollContainer:m,onProgress:c}=t;function i(){return t.distance??r.scrollWidth-window.innerWidth}let l=i(),p=j(r,f(l));function f(h){return {props:{transform:["translateX(0px)",`translateX(${-h}px)`]},trigger:s,easing:u,native:false,...m!==void 0&&{scrollContainer:m},...c!==void 0&&{onProgress:c}}}return {destroy(){p.destroy();},replay(){p.replay();},pause(){p.pause();},resume(){p.resume();},seek(h){p.seek(h);},getProgress(){return p.getProgress()},refresh(){p.destroy(),l=i(),p=j(r,f(l));}}}export{He as scrollHorizontal};
|
|
1
|
+
function Ce({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 h=1-Math.pow(n,f);return h+(1-h)*(2*g-1)*(2*g-1)}return 1}}function _e({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 N={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:Ce(),elastic:_e()};function U(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 ue(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 le(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 Re(e,t,r){return Math.min(r,Math.max(t,e))}function k(e,t,r,n){return r===t?0:Re((e-t)/(r-t)*n,0,1)}function me(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 Y(e,t,r,n,a){let i=ue(e.top,e.height,t,n.element)-le(n.viewport,r),l=ue(e.top,e.height,t,a.element)-le(a.viewport,r);return {tStart:i,tEnd:l}}function ce(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 pe(e,t,r){let n=ce(e),a=ce(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)",He="cubic-bezier(0.333333, 0.666667, 0.666667, 1)",fe=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<fe;r++){let n=r/(fe-1);t.push(String(Math.round(e(n)*1e5)/1e5));}return `linear(${t.join(",")})`}function ge(e){switch(e){case "linear":return "linear";case "ease-in":return Ne;case "ease-out":return He;case "ease-in-out":return Oe()?Fe(N["ease-in-out"]):null;default:return null}}var de=new Map;function be(e,t){de.set(e,t);}function ye(e){de.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 H(e,...t){De&&console.warn(`[svg-scroll-draw] ${e}`,...t);}function ze(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function he(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 Ve(e,t,r){let n=he(e),a=he(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 Ee(e,t,r){if(typeof e=="number"&&typeof t=="number")return String(e+(t-e)*r);let n=String(e),a=String(t);if(ze(n))return pe(n,a,r);if(n.includes("("))return Ve(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 We(e){return e.replace(/([A-Z])/g,t=>`-${t.toLowerCase()}`)}var ke=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),Be=0,we="--scroll-draw-progress";function qe(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function Q(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:h=true,triggerElement:I,onProgress:b,onComplete:P,onEnter:p,onLeave:C,onEnterBack:Z,onLeaveBack:J}=t,ve=h&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,B=typeof i=="function"?i:N[i]??N["ease-out"],K=U(a.start??"top bottom"),ee=U(a.end??"bottom top"),te=I??e,y=typeof c=="string"?document.querySelector(c):c??null,E=Object.entries(n).map(([o,s])=>({prop:We(o),from:Array.isArray(s)?s[0]:"",to:Array.isArray(s)?s[1]:s}));function xe(){let o=window.getComputedStyle(e);for(let s of E)s.from===""&&(s.from=o.getPropertyValue(s.prop).trim()||"0");}function Me(){for(let o of E)e.style.setProperty(o.prop,String(o.to));}let ne=new Map;for(let o of [...E.map(s=>s.prop),we])ne.set(o,e.style.getPropertyValue(o));function q(){for(let[o,s]of ne)s?e.style.setProperty(o,s):e.style.removeProperty(o);}if(ve)return Me(),P?.(),{...r,destroy:q,getProgress:()=>1};xe();let re=typeof i=="string"?ge(i):null;function Te(){if(!f||!qe()||!re||u!=="y"||y||te!==e||m||l!==1||b||P||p||C||Z||J||g!==false||(a.start??"top bottom").trim()!=="top bottom"||(a.end??"bottom top").trim()!=="bottom top")return false;for(let o of E)if(!ke.has(o.prop))return false;return true}function Pe(){let o=`ssd-a-${++Be}`,s=E.map(d=>`${d.prop}:${d.from}`).join(";"),V=E.map(d=>`${d.prop}:${d.to}`).join(";"),$=document.createElement("style");$.setAttribute("data-ssd-animate",""),$.textContent=`@keyframes ${o}{from{${s}}to{${V}}}.${o}{animation-name:${o};animation-duration:auto;animation-timing-function:${re};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild($),e.classList.add(o);let S=()=>u==="x"?window.scrollX:window.scrollY,W=()=>u==="x"?window.innerWidth:window.innerHeight;return {destroy(){e.classList.remove(o),$.remove(),e.style.animationPlayState="",q();},replay(){e.classList.remove(o),e.offsetWidth,e.classList.add(o);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(d){let _=Math.min(1,Math.max(0,d));e.classList.remove(o);for(let R of E)e.style.setProperty(R.prop,Ee(R.from,R.to,_));},getProgress(){let d=e.getBoundingClientRect(),_=S(),R=W(),{tStart:$e,tEnd:Ie}=Y({top:d.top,height:d.height},_,R,K,ee);return B(k(_,$e,Ie,l))}}}if(Te())return Pe();let w=0,v=0,x=0,O=false,M=false,A=-1,L=0,F=false,T=NaN,G=-1,oe=0,se=()=>y?u==="x"?y.scrollLeft:y.scrollTop:u==="x"?window.scrollX:window.scrollY,Ae=()=>y?u==="x"?y.clientWidth:y.clientHeight:u==="x"?window.innerWidth:window.innerHeight;function ie(){let o=me(te,y,u),s=Y(o,o.scroll,Ae(),K,ee);w=s.tStart,v=s.tEnd;}function D(o){e.style.setProperty(we,String(o));for(let s of E)e.style.setProperty(s.prop,Ee(s.from,s.to,o));b?.(o);}function Le(o){if(isNaN(T)){T=o;return}T<=0&&o>0?p?.():T>0&&o<=0&&J?.(),T<1&&o>=1?C?.():T>=1&&o<1&&Z?.(),T=o;}function j(){if(!O||M)return;let o=performance.now(),s=se(),V=l;if(g!==false){let W=o-oe,d=W>0?Math.abs(s-(G<0?s:G))/W:0;V=l*Math.max(.2,1+d*(typeof g=="number"?g:1)*.04);}G=s,oe=o;let $=v===w?0:(s-w)/(v-w);Le($);let S=B(k(s,w,v,V));m&&(A=Math.max(A,S),S=A),L=S,D(S),S>=1&&!F?(F=true,P?.()):S<1&&!m&&(F=false),x=requestAnimationFrame(j);}ie(),v===w&&H("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=B(k(se(),w,v,l));m&&o>0&&(A=o),L=o,D(o);}let ae=new IntersectionObserver(o=>{o.forEach(s=>{O=s.isIntersecting,O&&!M?x=requestAnimationFrame(j):cancelAnimationFrame(x);});},{root:y??null}),X;function z(){clearTimeout(X),X=setTimeout(ie,150);}return window.addEventListener("resize",z),window.addEventListener("orientationchange",z),ae.observe(e),be(e,{type:"animate",getProgress:()=>L,getTrigger:()=>({tStart:w,tEnd:v})}),{destroy(){cancelAnimationFrame(x),ae.disconnect(),window.removeEventListener("resize",z),window.removeEventListener("orientationchange",z),clearTimeout(X),q(),ye(e);},replay(){A=-1,F=false,L=0,M=false,D(0);},pause(){M=true,cancelAnimationFrame(x);},resume(){M&&(M=false,O&&(x=requestAnimationFrame(j)));},seek(o){let s=Math.min(1,Math.max(0,o));L=s,A=s,M=true,cancelAnimationFrame(x),D(s);},getProgress(){return L}}}var Se={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0,refresh:()=>{}};function rt(e,t={}){if(typeof window>"u")return Se;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return H("scrollHorizontal: track element not found:",e),Se;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;H("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 h=f(),I=g(),b=Q(n,P(h,I));function P(p,C){return {props:{transform:["translateX(0px)",`translateX(${-p}px)`]},trigger:i,easing:a,native:false,respectReducedMotion:m,...C!==n&&{triggerElement:C},...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(),h=f(),I=g(),b=Q(n,P(h,I));}}}export{rt as scrollHorizontal};
|
package/dist/index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
'use strict';function
|
|
2
|
-
<div style="position:absolute;${
|
|
3
|
-
<div style="position:absolute;${l?`left:${f}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${f}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(n),window.addEventListener("scroll",u,{passive:true}),u(),n}function Ze(e,t,r){let n=(t.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),u=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,a=>{let h=parseFloat(a),f=n[u++]??h;return String(+(h+(f-h)*r).toFixed(4))})}function ut(e,t={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:r,...n}=t,u=r?{...Ue[r],...n}:n,a=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:h="path, polyline, line, polygon, rect, circle",speed:f=1,fade:l=false,easing:p="linear",trigger:x={},stagger:F=0,direction:E="forward",once:W=false,debug:ge=false,axis:S="y",scrollContainer:M,autoReverse:d=false,delay:A=0,strokeColor:b,strokeWidth:R,fillOpacity:z,waypoints:T,velocityScale:H=false,threshold:ye=0,rootMargin:we="0px",repeat:ae=0,repeatDelay:ve=0,morphTo:P,clip:U,autoplay:se=false,duration:ce=1e3,native:Z=true,onProgress:g,onStart:N,onComplete:le,onEnter:ue,onLeave:Me,onEnterBack:Ie,onLeaveBack:Pe}=u,me=U===true?"left":typeof U=="string"?U:false,fe=typeof p=="function"?p:te[p]??te.linear,Ae=be(x.start??"top bottom"),Oe=be(x.end??"bottom top"),_=typeof M=="string"?document.querySelector(M):M??null,ne=Array.isArray(b)?b[0]:null,V=Array.isArray(b)?b[1]:typeof b=="string"?b:null,B=Array.isArray(R)?R[0]:null,s=Array.isArray(R)?R[1]:typeof R=="number"?R:null,m=Array.isArray(z)?z[0]:null,k=Array.isArray(z)?z[1]:typeof z=="number"?z:null;function G(o){let i=o*100;switch(me){case "right":return `inset(0 0 0 ${100-i}%)`;case "top":return `inset(0 0 ${100-i}% 0)`;case "bottom":return `inset(${100-i}% 0 0 0)`;case "center":return `circle(${o*150}% at 50% 50%)`;default:return `inset(0 ${100-i}% 0 0)`}}let $=me?[]:Array.from(e.querySelectorAll(h)),D=[],C=[],Y=0,J=0,j=false,oe=false,X=0,Fe=false,pe=-1,Ne=-1,K=false,Te=0,he=0,Ee,je=null,Se=new Set,Re=-1,et=performance.now(),ke=NaN;function De(){return _?S==="x"?_.scrollLeft:_.scrollTop:S==="x"?window.scrollX:window.scrollY}function tt(){return _?S==="x"?_.clientWidth:_.clientHeight:S==="x"?window.innerWidth:window.innerHeight}function rt(){let o=e.getBoundingClientRect(),i,w,q;if(_){let ee=_.getBoundingClientRect();i=S==="x"?o.left-ee.left+_.scrollLeft:o.top-ee.top+_.scrollTop,w=S==="x"?o.width:o.height,q=De();}else i=S==="x"?o.left:o.top,w=S==="x"?o.width:o.height,q=De();let Q=xe({top:i,height:w},q,tt(),Ae,Oe);Y=Q.tStart,J=Q.tEnd,ge&&process.env.NODE_ENV!=="production"&&(je?.remove(),je=$t(Y,J,S));}function ht(o,i){if(e.style.setProperty("--scroll-draw-progress",String(o)),me){let w=i==="reverse"?1-o:o;e.style.clipPath=G(w);return}$.forEach((w,q)=>{w.style.strokeDashoffset=i==="reverse"?`${D[q]*o}`:`${D[q]*(1-o)}`,l&&(w.style.opacity=i==="reverse"?`${1-o}`:`${o}`),ne&&V?w.style.stroke=Le(ne,V,o):V&&(w.style.stroke=V),B!==null&&s!==null?w.style.strokeWidth=`${B+(s-B)*o}`:s!==null&&(w.style.strokeWidth=`${s}`),m!==null&&k!==null?w.style.fillOpacity=`${m+(k-m)*o}`:k!==null&&(w.style.fillOpacity=`${k}`),P&&w.tagName.toLowerCase()==="path"&&C[q]&&w.setAttribute("d",Ze(C[q],P,o));});}function He(){if(e.style.setProperty("--scroll-draw-progress","0"),me){e.style.clipPath=G(0);return}$.forEach((o,i)=>{o.style.strokeDasharray=`${D[i]}`,o.style.strokeDashoffset=E==="reverse"?"0":`${D[i]}`,l?o.style.opacity=E==="reverse"?"1":"0":o.style.opacity="",ne&&(o.style.stroke=ne),B!==null&&(o.style.strokeWidth=`${B}`),m!==null&&(o.style.fillOpacity=`${m}`),P&&o.tagName.toLowerCase()==="path"&&C[i]&&o.setAttribute("d",C[i]);});}if($.forEach(o=>{Tt(o);let i=Ve(o);D.push(i),o.tagName.toLowerCase()==="path"?C.push(o.getAttribute("d")??""):C.push(""),a?(o.style.strokeDasharray=`${i}`,o.style.strokeDashoffset=E==="reverse"?`${i}`:"0",l&&(o.style.opacity="1"),V&&(o.style.stroke=V),s!==null&&(o.style.strokeWidth=`${s}`),k!==null&&(o.style.fillOpacity=`${k}`),P&&o.tagName.toLowerCase()==="path"&&o.setAttribute("d",P)):(o.style.strokeDasharray=`${i}`,o.style.strokeDashoffset=E==="reverse"?"0":`${i}`,l?o.style.opacity=E==="reverse"?"1":"0":o.style.opacity="",ne&&(o.style.stroke=ne),B!==null&&(o.style.strokeWidth=`${B}`),m!==null&&(o.style.fillOpacity=`${m}`));}),me){if(a)return e.style.clipPath=G(1),le?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=G(0);}else if(a)return le?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function bt(){return !(Z===false||!At()||!$.length||typeof p!="string"||!(p in ct)||me||S!=="y"||_||f!==1||F!==0||W||d||H!==false||P||T||ae||A>0||g||N||le||ue||Me||Ie||Pe||b!=null||R!=null||z!=null||(x.start??"top bottom").trim()!=="top bottom"||(x.end??"bottom top").trim()!=="bottom top")}function wt(){let o=`svg-scroll-draw-${++xt}`,i=E==="reverse"?"0":"var(--ssd-len)",w=E==="reverse"?"var(--ssd-len)":"0",q=`stroke-dashoffset:${i};`,Q=`stroke-dashoffset:${w};`;l&&(q+=`opacity:${E==="reverse"?1:0};`,Q+=`opacity:${E==="reverse"?0:1};`);let ee=document.createElement("style");ee.setAttribute("data-svg-scroll-draw",""),ee.textContent=`@keyframes ${o}{from{${q}}to{${Q}}}.${o}{animation-name:${o};animation-duration:auto;animation-timing-function:${ct[p]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(ee);function ie(c,v){c.style.setProperty("--ssd-len",String(D[v])),c.style.strokeDasharray=`${D[v]}`,c.style.strokeDashoffset="",c.style.opacity="",c.style.animationPlayState="",c.classList.add(o);}$.forEach(ie);let y=false,L=-1;function I(){if(L>=0)return L;let c=e.getBoundingClientRect(),{tStart:v,tEnd:O}=xe({top:c.top,height:c.height},De(),tt(),Ae,Oe);return fe(re(De(),v,O,f))}return {destroy(){$.forEach(c=>{c.classList.remove(o),c.style.removeProperty("--ssd-len"),c.style.animationPlayState="";}),ee.remove();},replay(){y=false,L=-1,$.forEach(ie);},pause(){y=true,$.forEach(c=>{c.style.animationPlayState="paused";});},resume(){y&&(y=false,$.forEach(c=>{c.style.animationPlayState="running";}));},seek(c){let v=Math.min(1,Math.max(0,c));L=v,y=true,$.forEach((O,$e)=>{O.classList.remove(o),O.style.strokeDashoffset=E==="reverse"?`${D[$e]*v}`:`${D[$e]*(1-v)}`,l&&(O.style.opacity=E==="reverse"?`${1-v}`:`${v}`);});},getProgress(){return I()}}}if(bt())return wt();function vt(){let o=Math.max(1,ce),i=0,w=0;function q(I){let c=true;if(me){let v=Math.min(1,Math.max(0,I/o)),O=fe(v);Te=O,e.style.setProperty("--scroll-draw-progress",String(O)),e.style.clipPath=G(E==="reverse"?1-O:O),g?.(O),v<1&&(c=false);}else $.forEach((v,O)=>{let $e=O*F*o,Ce=Math.min(1,Math.max(0,(I-$e)/o)),de=fe(Ce);v.style.strokeDashoffset=E==="reverse"?`${D[O]*de}`:`${D[O]*(1-de)}`,l&&(v.style.opacity=E==="reverse"?`${1-de}`:`${de}`),ne&&V?v.style.stroke=Le(ne,V,de):V&&(v.style.stroke=V),B!==null&&s!==null?v.style.strokeWidth=`${B+(s-B)*de}`:s!==null&&(v.style.strokeWidth=`${s}`),m!==null&&k!==null?v.style.fillOpacity=`${m+(k-m)*de}`:k!==null&&(v.style.fillOpacity=`${k}`),P&&v.tagName.toLowerCase()==="path"&&C[O]&&v.setAttribute("d",Ze(C[O],P,de)),O===0&&(g?.(de),e.style.setProperty("--scroll-draw-progress",String(de))),Ce<1&&(c=false);});if(T){let v=Math.min(1,Math.max(0,I/o)),O=fe(v);for(let $e in T){let Ce=parseFloat($e);O>=Ce&&!Se.has(Ce)&&(Se.add(Ce),T[$e]?.());}}return c}function Q(I){if(K)return;let c=I-i;oe||(oe=true,N?.());let v=q(c);if(v&&!j){j=true,q(o*(1+Math.max(0,$.length-1)*F)),le?.(),he<(ae==="infinite"?1/0:ae??0)&&(he++,Ee=setTimeout(()=>{i=performance.now(),oe=false,j=false,Se.clear(),He(),X=requestAnimationFrame(Q);},ve));return}v||(X=requestAnimationFrame(Q));}function ee(){cancelAnimationFrame(X),clearTimeout(Ee),i=performance.now(),w=0,K=false,oe=false,j=false,he=0,Se.clear(),He(),X=requestAnimationFrame(Q);}let ie=new IntersectionObserver(I=>{I.forEach(c=>{c.isIntersecting&&!(W&&j)?ee():!c.isIntersecting&&!W&&!j&&(cancelAnimationFrame(X),clearTimeout(Ee),i=null);});},{root:_??null,threshold:ye,rootMargin:we}),y;function L(){clearTimeout(y),y=setTimeout(()=>{$.forEach((I,c)=>{D[c]=Ve(I),I.style.strokeDasharray=`${D[c]}`;});},150);}return window.addEventListener("resize",L),window.addEventListener("orientationchange",L),A>0?setTimeout(()=>ie.observe(e),A):ie.observe(e),{destroy(){cancelAnimationFrame(X),clearTimeout(Ee),ie.disconnect(),window.removeEventListener("resize",L),window.removeEventListener("orientationchange",L),clearTimeout(y);},replay(){he=0,ee();},pause(){K||(K=true,w=performance.now()-i,cancelAnimationFrame(X));},resume(){K&&(K=false,i=performance.now()-w,X=requestAnimationFrame(Q));},seek(I){let c=Math.min(1,Math.max(0,I));Te=c,K=true,w=c*o,i=performance.now()-w,cancelAnimationFrame(X),q(w);},getProgress(){return Te}}}if(se)return vt();rt();function qe(){if(!Fe||K)return;let o=performance.now(),i=De(),w=f;if(H!==false){let y=o-et,L=y>0?Math.abs(i-(Re<0?i:Re))/y:0;w=f*Math.max(.2,1+L*(typeof H=="number"?H:1)*.04);}Re=i,et=o;let q=d?Ne===-1||i>=Ne?"forward":"reverse":E;Ne=i;let Q=J-Y,ee=true,ie=Q===0?0:(i-Y)/Q;if(isNaN(ke)||(ke<=0&&ie>0?ue?.():ke>0&&ie<=0&&Pe?.(),ke<1&&ie>=1?Me?.():ke>=1&&ie<1&&Ie?.()),ke=ie,me){let y=fe(re(i,Y,J,w));W&&!d&&(pe=Math.max(pe,y),y=pe),Te=y,e.style.setProperty("--scroll-draw-progress",String(y));let L=q==="reverse"?1-y:y;e.style.clipPath=G(L),g?.(y),!oe&&re(i,Y,J,w)>0&&(oe=true,N?.()),y>=1&&!j?(j=true,le?.(),he<(ae==="infinite"?1/0:ae??0)&&(he++,Ee=setTimeout(()=>{pe=-1,oe=false,j=false,e.style.clipPath=G(0);},ve))):y<1&&!W&&(j=false),X=requestAnimationFrame(qe);return}if($.forEach((y,L)=>{let I=L*F*Q,c=fe(re(i,Y+I,J+I,w));W&&!d&&(pe=Math.max(pe,c),c=pe),Te=c,y.style.strokeDashoffset=q==="reverse"?`${D[L]*c}`:`${D[L]*(1-c)}`,l&&(y.style.opacity=q==="reverse"?`${1-c}`:`${c}`),ne&&V?y.style.stroke=Le(ne,V,c):V&&(y.style.stroke=V),B!==null&&s!==null?y.style.strokeWidth=`${B+(s-B)*c}`:s!==null&&(y.style.strokeWidth=`${s}`),m!==null&&k!==null?y.style.fillOpacity=`${m+(k-m)*c}`:k!==null&&(y.style.fillOpacity=`${k}`),P&&y.tagName.toLowerCase()==="path"&&C[L]&&y.setAttribute("d",Ze(C[L],P,c)),L===0&&(g?.(c),e.style.setProperty("--scroll-draw-progress",String(c))),c<1&&(ee=false);}),T){let y=fe(re(i,Y,J,w));for(let L in T){let I=parseFloat(L);y>=I&&!Se.has(I)&&(Se.add(I),T[L]?.());}}!oe&&re(i,Y,J,w)>0&&(oe=true,N?.()),ee&&!j?(j=true,le?.(),he<(ae==="infinite"?1/0:ae??0)&&(he++,Ee=setTimeout(()=>{pe=-1,oe=false,j=false,Se.clear(),He();},ve))):!ee&&!W&&(j=false),X=requestAnimationFrame(qe);}let Xe=new IntersectionObserver(o=>{o.forEach(i=>{Fe=i.isIntersecting,Fe&&!K?X=requestAnimationFrame(qe):cancelAnimationFrame(X);});},{root:_??null,threshold:ye,rootMargin:we}),Ye;function ze(){clearTimeout(Ye),Ye=setTimeout(()=>{$.forEach((o,i)=>{D[i]=Ve(o),o.style.strokeDasharray=`${D[i]}`;}),rt();},150);}return window.addEventListener("resize",ze),window.addEventListener("orientationchange",ze),A>0?setTimeout(()=>Xe.observe(e),A):Xe.observe(e),{destroy(){cancelAnimationFrame(X),clearTimeout(Ee),Xe.disconnect(),window.removeEventListener("resize",ze),window.removeEventListener("orientationchange",ze),clearTimeout(Ye),je?.remove();},replay(){pe=-1,Ne=-1,Re=-1,oe=false,j=false,he=0,K=false,Se.clear(),clearTimeout(Ee),He();},pause(){K=true,cancelAnimationFrame(X);},resume(){K&&(K=false,Fe&&(X=requestAnimationFrame(qe)));},seek(o){let i=Math.min(1,Math.max(0,o));Te=i,pe=i,K=true,cancelAnimationFrame(X),ht(i,E);},getProgress(){return Te}}}var mt=new Map;function Be(e,t){mt.set(e,t);}function We(e){mt.delete(e);}function Mt(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function ft(e){let t=[],r=/([\w]+)\(([^)]*)\)/g,n;for(;(n=r.exec(e))!==null;){let u=[],a=[],h=n[2].trim();if(h)for(let f of h.split(/[\s,]+/)){let l=f.match(/^([-+]?[\d.eE]+)(.*)$/);u.push(l?parseFloat(l[1]):0),a.push(l?l[2]:"");}t.push({fn:n[1],nums:u,units:a});}return t}function Pt(e,t,r){let n=ft(e),u=ft(t);return n.length===0||n.length!==u.length?r<1?e:t:n.map((a,h)=>{let f=u[h];return a.fn!==f.fn||a.nums.length!==f.nums.length?r<1?`${a.fn}(${a.nums.map((l,p)=>`${l}${a.units[p]}`).join(", ")})`:`${f.fn}(${f.nums.map((l,p)=>`${l}${f.units[p]}`).join(", ")})`:`${a.fn}(${a.nums.map((l,p)=>`${l+(f.nums[p]-l)*r}${a.units[p]}`).join(", ")})`}).join(" ")}function pt(e,t,r){if(typeof e=="number"&&typeof t=="number")return String(e+(t-e)*r);let n=String(e),u=String(t);if(Mt(n))return Le(n,u,r);if(n.includes("("))return Pt(n,u,r);let a=n.match(/^([-+]?[\d.]+)(.*)$/),h=u.match(/^([-+]?[\d.]+)(.*)$/);if(a&&h){let f=parseFloat(a[1]),l=parseFloat(h[1]);return `${f+(l-f)*r}${a[2]||h[2]}`}return r<1?n:u}function kt(e){return e.replace(/([A-Z])/g,t=>`-${t.toLowerCase()}`)}var dt={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},Ct=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),Lt=0;function It(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function gt(e,t){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let{props:n,trigger:u={},easing:a="ease-out",speed:h=1,once:f=false,axis:l="y",scrollContainer:p,native:x=true,velocityScale:F=false,onProgress:E,onComplete:W,onEnter:ge,onLeave:S,onEnterBack:M,onLeaveBack:d}=t,A=window.matchMedia("(prefers-reduced-motion: reduce)").matches,b=typeof a=="function"?a:te[a]??te["ease-out"],R=be(u.start??"top bottom"),z=be(u.end??"bottom top"),T=typeof p=="string"?document.querySelector(p):p??null,H=Object.entries(n).map(([s,m])=>({prop:kt(s),from:Array.isArray(m)?m[0]:"",to:Array.isArray(m)?m[1]:m}));function ye(){let s=window.getComputedStyle(e);for(let m of H)m.from===""&&(m.from=s.getPropertyValue(m.prop).trim()||"0");}function we(){for(let s of H)e.style.setProperty(s.prop,String(s.to));}if(A)return we(),W?.(),r;ye();function ae(){if(!x||!It()||typeof a!="string"||!(a in dt)||l!=="y"||T||f||h!==1||E||W||ge||S||M||d||F!==false||(u.start??"top bottom").trim()!=="top bottom"||(u.end??"bottom top").trim()!=="bottom top")return false;for(let s of H)if(!Ct.has(s.prop))return false;return true}function ve(){let s=`ssd-a-${++Lt}`,m=H.map(C=>`${C.prop}:${C.from}`).join(";"),k=H.map(C=>`${C.prop}:${C.to}`).join(";"),G=document.createElement("style");G.setAttribute("data-ssd-animate",""),G.textContent=`@keyframes ${s}{from{${m}}to{${k}}}.${s}{animation-name:${s};animation-duration:auto;animation-timing-function:${dt[a]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(G),e.classList.add(s);let $=()=>l==="x"?window.scrollX:window.scrollY,D=()=>l==="x"?window.innerWidth:window.innerHeight;return {destroy(){e.classList.remove(s),G.remove();},replay(){e.classList.remove(s),e.offsetWidth,e.classList.add(s);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(C){let Y=Math.min(1,Math.max(0,C));e.classList.remove(s);for(let J of H)e.style.setProperty(J.prop,pt(J.from,J.to,Y));},getProgress(){let C=e.getBoundingClientRect(),Y=$(),J=D(),{tStart:j,tEnd:oe}=xe({top:C.top,height:C.height},Y,J,R,z);return b(re(Y,j,oe,h))}}}if(ae())return ve();let P=0,U=0,se=0,ce=false,Z=false,g=-1,N=0,le=false,ue=NaN,Me=-1,Ie=0,Pe=()=>T?l==="x"?T.scrollLeft:T.scrollTop:l==="x"?window.scrollX:window.scrollY,me=()=>T?l==="x"?T.clientWidth:T.clientHeight:l==="x"?window.innerWidth:window.innerHeight;function fe(){let s=e.getBoundingClientRect(),m,k;if(T){let $=T.getBoundingClientRect();m=l==="x"?s.left-$.left+T.scrollLeft:s.top-$.top+T.scrollTop,k=l==="x"?s.width:s.height;}else m=l==="x"?s.left:s.top,k=l==="x"?s.width:s.height;let G=xe({top:m,height:k},Pe(),me(),R,z);P=G.tStart,U=G.tEnd;}function Ae(s){e.style.setProperty("--scroll-draw-progress",String(s));for(let m of H)e.style.setProperty(m.prop,pt(m.from,m.to,s));E?.(s);}function Oe(s){if(isNaN(ue)){ue=s;return}ue<=0&&s>0?ge?.():ue>0&&s<=0&&d?.(),ue<1&&s>=1?S?.():ue>=1&&s<1&&M?.(),ue=s;}function _(){if(!ce||Z)return;let s=performance.now(),m=Pe(),k=h;if(F!==false){let D=s-Ie,C=D>0?Math.abs(m-(Me<0?m:Me))/D:0;k=h*Math.max(.2,1+C*(typeof F=="number"?F:1)*.04);}Me=m,Ie=s;let G=U===P?0:(m-P)/(U-P);Oe(G);let $=b(re(m,P,U,k));f&&(g=Math.max(g,$),$=g),N=$,Ae($),$>=1&&!le?(le=true,W?.()):$<1&&!f&&(le=false),se=requestAnimationFrame(_);}fe();{let s=b(re(Pe(),P,U,h));f&&s>0&&(g=s),N=s,Ae(s);}let ne=new IntersectionObserver(s=>{s.forEach(m=>{ce=m.isIntersecting,ce&&!Z?se=requestAnimationFrame(_):cancelAnimationFrame(se);});},{root:T??null}),V;function B(){clearTimeout(V),V=setTimeout(fe,150);}return window.addEventListener("resize",B),window.addEventListener("orientationchange",B),ne.observe(e),Be(e,{type:"animate",getProgress:()=>N,getTrigger:()=>({tStart:P,tEnd:U})}),{destroy(){cancelAnimationFrame(se),ne.disconnect(),window.removeEventListener("resize",B),window.removeEventListener("orientationchange",B),clearTimeout(V),We(e);},replay(){g=-1,le=false,N=0,Z=false,Ae(0);},pause(){Z=true,cancelAnimationFrame(se);},resume(){Z&&(Z=false,ce&&(se=requestAnimationFrame(_)));},seek(s){let m=Math.min(1,Math.max(0,s));N=m,g=m,Z=true,cancelAnimationFrame(se),Ae(m);},getProgress(){return N}}}var _e={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Dt(e,t){if(typeof window>"u")return _e;let r=typeof e=="string"?document.querySelector(e):e;return r?gt(r,t):(process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] scrollAnimate: element not found:",e),_e)}function Ot(e,t={}){if(typeof window>"u")return _e;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] scrollParallax: element not found:",e),_e;let{speed:n=.3,axis:u="y",easing:a="linear",trigger:h,onProgress:f}=t,l=r.getBoundingClientRect(),p=u==="x"?l.width:l.height,x=n*p;return gt(r,{props:u==="x"?{transform:["translateX(0px)",`translateX(${-x}px)`]}:{transform:["translateY(0px)",`translateY(${-x}px)`]},trigger:h??{start:"top bottom",end:"bottom top"},easing:a,native:false,onProgress:f})}var Je={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Ft(e,t){if(typeof window>"u")return Je;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] scrollCounter: element not found:",e),Je;let n=r,{from:u=0,to:a,format:h,easing:f="ease-out",trigger:l={},once:p=true,decimals:x,onComplete:F}=t,E=x!==void 0?g=>g.toFixed(x):h??(g=>String(Math.round(g))),W=typeof f=="function"?f:te[f]??te["ease-out"],ge=be(l.start??"top 80%"),S=be(l.end??"top 20%");if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return n.textContent=E(a),F?.(),Je;n.textContent=E(u);let d=0,A=0,b=0,R=false,z=false,T=-1,H=0,ye=false,we=()=>window.scrollY,ae=()=>window.innerHeight;function ve(){let g=n.getBoundingClientRect(),N=xe({top:g.top,height:g.height},we(),ae(),ge,S);d=N.tStart,A=N.tEnd;}function P(g){n.textContent=E(u+(a-u)*g),n.style.setProperty("--scroll-draw-progress",String(g));}function U(){if(!R||z)return;let g=W(re(we(),d,A,1));p&&(T=Math.max(T,g),g=T),H=g,P(g),g>=1&&!ye?(ye=true,F?.()):g<1&&!p&&(ye=false),b=requestAnimationFrame(U);}ve();{let g=W(re(we(),d,A,1));p&&g>0&&(T=g),H=g,P(g);}let se=new IntersectionObserver(g=>{g.forEach(N=>{R=N.isIntersecting,R&&!z?b=requestAnimationFrame(U):cancelAnimationFrame(b);});}),ce;function Z(){clearTimeout(ce),ce=setTimeout(ve,150);}return window.addEventListener("resize",Z),window.addEventListener("orientationchange",Z),se.observe(n),Be(n,{type:"counter",getProgress:()=>H,getTrigger:()=>({tStart:d,tEnd:A})}),{destroy(){cancelAnimationFrame(b),se.disconnect(),window.removeEventListener("resize",Z),window.removeEventListener("orientationchange",Z),clearTimeout(ce),We(n);},replay(){T=-1,ye=false,H=0,z=false,P(0);},pause(){z=true,cancelAnimationFrame(b);},resume(){z&&(z=false,R&&(b=requestAnimationFrame(U)));},seek(g){let N=Math.min(1,Math.max(0,g));H=N,T=N,z=true,cancelAnimationFrame(b),P(N);},getProgress(){return H}}}var yt="http://www.w3.org/2000/svg",Nt="cinematic-photo",Ke=e=>e<0?0:e>1?1:e;function Ge(e){let t=parseFloat(e);return Number.isFinite(t)?Ke(t/100):0}function Rt(e){return te[e]??te.linear}var Ht={destroy:()=>{},getProgress:()=>0},Qe=class{constructor(t){if(typeof document>"u"){this.mount=null;return}this.mount=typeof t.wrapper=="string"?document.querySelector(t.wrapper):t.wrapper,!this.mount&&process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] Cinematic: wrapper not found:",t.wrapper);}loadStory(t){let r=this.mount;if(typeof window>"u"||!r)return Ht;r.style.position="relative",r.style.height=t.totalHeight,r.style.display="block";let n=document.createElement("div");n.setAttribute("data-cinematic-stage",""),n.style.cssText="position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:block;",r.appendChild(n);let u=[];for(let S of t.scenes){if(S.background){let d=document.createElement("img");d.id=Nt,d.src=S.background,d.alt="",d.style.cssText="position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;",n.appendChild(d);}let M=S.animations.filter(d=>d.type==="draw");if(M.length){let d=document.createElementNS(yt,"svg");d.setAttribute("viewBox",`0 0 ${t.canvas.width} ${t.canvas.height}`),d.setAttribute("preserveAspectRatio","xMidYMid meet"),d.style.cssText="position:absolute;inset:0;width:100%;height:100%;overflow:visible;",n.appendChild(d);for(let A of M){let b=document.createElementNS(yt,"path");b.id=A.target.replace(/^#/,""),b.setAttribute("d",A.d),b.setAttribute("fill","none"),b.setAttribute("stroke",A.stroke),b.setAttribute("stroke-width",String(A.strokeWidth)),b.setAttribute("stroke-linecap","round"),b.setAttribute("stroke-linejoin","round");let R=A.length||b.getTotalLength?.()||0;b.style.strokeDasharray=String(R),b.style.strokeDashoffset=String(R),d.appendChild(b),u.push({kind:"draw",el:b,start:Ge(A.start),end:Ge(A.end),ease:Rt(A.easing),length:R});}}for(let d of S.animations){if(d.type!=="fade")continue;let A=n.querySelector(d.target)??document.querySelector(d.target);A&&(A.style.opacity=String(d.from),u.push({kind:"fade",el:A,start:Ge(d.start),end:Ge(d.end),ease:te["ease-in-out"]??te.linear,from:d.from,to:d.to}));}}let a=0,h=()=>{let S=r.offsetHeight-window.innerHeight;return S<=0?r.getBoundingClientRect().top<=0?1:0:Ke(-r.getBoundingClientRect().top/S)},f=S=>{for(let M of u){let d=M.end-M.start,A=d<=0?S>=M.end?1:0:Ke((S-M.start)/d),b=M.ease(A);M.kind==="draw"?M.el.style.strokeDashoffset=String(M.length*(1-b)):M.el.style.opacity=String(M.from+(M.to-M.from)*b);}};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return f(1),{destroy:()=>{},getProgress:()=>1};let l=0,p=false,x=false,F=()=>{a=h(),f(a),p&&(l=requestAnimationFrame(F));},E=()=>{p||(p=true,l=requestAnimationFrame(F));},W=()=>{p=false,cancelAnimationFrame(l);},ge=new IntersectionObserver(S=>{for(let M of S)x=M.isIntersecting,x?E():W();},{threshold:0});return ge.observe(n),a=h(),f(a),{destroy(){W(),ge.disconnect();},getProgress:()=>a}}};function er(e,t){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let n=typeof e=="string"?document.querySelector(e):e;return n?ut(n,t):(console.warn("[svg-scroll-draw] Container not found:",e),r)}
|
|
4
|
-
exports.Cinematic=
|
|
1
|
+
'use strict';function Ft({tension:e=2.5,friction:t=2.2}={}){return r=>1-Math.cos(r*Math.PI*e)*Math.pow(1-r,t)}function vt({bounces:e=3,decay:t=.5}={}){let r=Math.max(1,Math.round(e)),n=Math.max(.01,Math.min(.99,t)),l=Math.sqrt(n),a=0,d=[];for(let f=0;f<r;f++){let E=Math.pow(l,f);d.push(E),a+=E;}let m=[0],c=0;for(let f=0;f<r;f++)c+=d[f]/a,m.push(c);return f=>{if(f<=0)return 0;if(f>=1)return 1;for(let E=0;E<r;E++)if(f<=m[E+1]){let I=(f-m[E])/(m[E+1]-m[E]);if(E===0)return I*(2-I);let T=1-Math.pow(n,E);return T+(1-T)*(2*I-1)*(2*I-1)}return 1}}function St({amplitude:e=1,period:t=.4}={}){let r=Math.max(1,e),n=Math.max(.1,t),l=r<=1?n/4:n/(2*Math.PI)*Math.asin(1/r);return a=>a<=0?0:a>=1?1:r*Math.pow(2,-10*a)*Math.sin((a-l)*(2*Math.PI)/n)+1}var J={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:vt(),elastic:St()};function $e(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 ht(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 bt(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 He(e){let t=e.tagName.toLowerCase();if(t==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),n=parseFloat(e.getAttribute("height")??"0");return 2*(r+n)}if(t==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function Nt(e,t,r){return Math.min(r,Math.max(t,e))}function ie(e,t,r,n){return r===t?0:Nt((e-t)/(r-t)*n,0,1)}function Xe(e,t,r){let n=e.getBoundingClientRect(),l=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:l,scroll:0}:{top:r==="x"?n.left:n.top,height:l,scroll:r==="x"?window.scrollX:window.scrollY}}function Oe(e,t,r,n,l){let a=ht(e.top,e.height,t,n.element)-bt(n.viewport,r),d=ht(e.top,e.height,t,l.element)-bt(l.viewport,r);return {tStart:a,tEnd:d}}function wt(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 _e(e,t,r){let n=wt(e),l=wt(t);return !n||!l?e:`rgb(${Math.round(n[0]+(l[0]-n[0])*r)},${Math.round(n[1]+(l[1]-n[1])*r)},${Math.round(n[2]+(l[2]-n[2])*r)})`}var st={sketch:{easing:"ease-in",stagger:.1,speed:.9,fade:false},reveal:{easing:"ease-out",fade:true,speed:1.2,once:true},typewriter:{easing:"linear",stagger:.05,speed:1.5},cinematic:{easing:"ease-in-out",fade:true,speed:.75},spring:{easing:"spring",speed:1.1}};var Ye=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function K(e,...t){Ye&&console.warn(`[svg-scroll-draw] ${e}`,...t);}var Ht="cubic-bezier(0.333333, 0, 0.666667, 0.333333)",_t="cubic-bezier(0.333333, 0.666667, 0.666667, 1)",Et=33;function zt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timing-function: linear(0, 1)")}function Vt(e){let t=[];for(let r=0;r<Et;r++){let n=r/(Et-1);t.push(String(Math.round(e(n)*1e5)/1e5));}return `linear(${t.join(",")})`}function Qe(e){switch(e){case "linear":return "linear";case "ease-in":return Ht;case "ease-out":return _t;case "ease-in-out":return zt()?Vt(J["ease-in-out"]):null;default:return null}}var qt=0;function Wt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")&&CSS.supports("view-timeline-name: --x")}function Bt(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?K("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&K("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Gt(e,t,r){let n=document.createElement("div");n.setAttribute("data-svg-scroll-draw-debug",""),n.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function l(){let a=r==="x"?window.scrollX:window.scrollY,d=e-a,m=t-a,c=r==="x";n.innerHTML=`
|
|
2
|
+
<div style="position:absolute;${c?`left:${d}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${d}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
|
|
3
|
+
<div style="position:absolute;${c?`left:${m}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${m}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(n),window.addEventListener("scroll",l,{passive:true}),l(),{el:n,destroy(){window.removeEventListener("scroll",l),n.remove();}}}var xt=/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,Tt=/[MmLlHhVvCcSsQqTtAaZz]/g;function jt(e,t,r){if(!Ye)return;let n=(e.match(Tt)??[]).join("").toUpperCase(),l=(t.match(Tt)??[]).join("").toUpperCase(),a=(e.match(xt)??[]).length,d=(t.match(xt)??[]).length;if(n!==l){K(`morphTo: command sequence differs (${n||"\u2205"} \u2192 ${l||"\u2205"}). Interpolation is coordinate-for-coordinate, so the result will not reach the target shape. Redraw both paths with the same commands.`,r);return}a!==d&&K(`morphTo: coordinate count differs (${a} \u2192 ${d}). Extra coordinates are ignored and missing ones hold their start value, so the result will not reach the target shape.`,r);}function it(e,t,r){let n=(t.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),l=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,a=>{let d=parseFloat(a),m=n[l++]??d;return String(+(d+(m-d)*r).toFixed(4))})}function At(e,t={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:r,...n}=t,l=r?{...st[r],...n}:n,a=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:d="path, polyline, line, polygon, rect, circle",speed:m=1,fade:c=false,easing:f="linear",trigger:E={},stagger:I=0,direction:T="forward",once:ee=false,debug:Ee=false,axis:A="y",scrollContainer:$,autoReverse:g=false,delay:S=0,strokeColor:h,strokeWidth:V,fillOpacity:F,waypoints:B,velocityScale:te=false,threshold:de=0,rootMargin:j="0px",repeat:q=0,repeatDelay:Me=0,morphTo:N,clip:ge,autoplay:Pe=false,duration:ke=1e3,native:Le=true,onProgress:b,onStart:P,onComplete:oe,onEnter:ye,onLeave:Re,onEnterBack:he,onLeaveBack:xe}=l,re=ge===true?"left":typeof ge=="string"?ge:false,ue=typeof f=="function"?f:J[f]??J.linear,be=$e(E.start??"top bottom"),Fe=$e(E.end??"bottom top"),ae=typeof $=="string"?document.querySelector($):$??null,le=Array.isArray(h)?h[0]:null,U=Array.isArray(h)?h[1]:typeof h=="string"?h:null,X=Array.isArray(V)?V[0]:null,H=Array.isArray(V)?V[1]:typeof V=="number"?V:null,ne=Array.isArray(F)?F[0]:null,W=Array.isArray(F)?F[1]:typeof F=="number"?F:null;function we(o){let i=o*100;switch(re){case "right":return `inset(0 0 0 ${100-i}%)`;case "top":return `inset(0 0 ${100-i}% 0)`;case "bottom":return `inset(${100-i}% 0 0 0)`;case "center":return `circle(${o*150}% at 50% 50%)`;default:return `inset(0 ${100-i}% 0 0)`}}let C=re?[]:Array.from(e.querySelectorAll(d)),x=[],s=[],u=0,ce=0,k=false,D=false,O=0,_=false,Y=-1,ve=-1,G=false,me=0,Te=0,Ce,tt=null;function ut(){tt?.destroy(),tt=null;}let Ie=new Set,mt=NaN,De=true,qe=-1,ft=performance.now(),Ne=NaN;function rt(){return ae?A==="x"?ae.scrollLeft:ae.scrollTop:A==="x"?window.scrollX:window.scrollY}function pt(){return ae?A==="x"?ae.clientWidth:ae.clientHeight:A==="x"?window.innerWidth:window.innerHeight}function dt(){let o=Xe(e,ae,A),i=Oe(o,o.scroll,pt(),be,Fe);u=i.tStart,ce=i.tEnd,Ee&&Ye&&(ut(),tt=Gt(u,ce,A));}function It(o,i){if(e.style.setProperty("--scroll-draw-progress",String(o)),re){let w=i==="reverse"?1-o:o;e.style.clipPath=we(w);return}C.forEach((w,Q)=>{w.style.strokeDashoffset=i==="reverse"?`${x[Q]*o}`:`${x[Q]*(1-o)}`,c&&(w.style.opacity=i==="reverse"?`${1-o}`:`${o}`),le&&U?w.style.stroke=_e(le,U,o):U&&(w.style.stroke=U),X!==null&&H!==null?w.style.strokeWidth=`${X+(H-X)*o}`:H!==null&&(w.style.strokeWidth=`${H}`),ne!==null&&W!==null?w.style.fillOpacity=`${ne+(W-ne)*o}`:W!==null&&(w.style.fillOpacity=`${W}`),N&&w.tagName.toLowerCase()==="path"&&s[Q]&&w.setAttribute("d",it(s[Q],N,o));});}function We(){if(e.style.setProperty("--scroll-draw-progress","0"),re){e.style.clipPath=we(0);return}C.forEach((o,i)=>{o.style.strokeDasharray=`${x[i]}`,o.style.strokeDashoffset=T==="reverse"?"0":`${x[i]}`,c?o.style.opacity=T==="reverse"?"1":"0":o.style.opacity="",le&&(o.style.stroke=le),X!==null&&(o.style.strokeWidth=`${X}`),ne!==null&&(o.style.fillOpacity=`${ne}`),N&&o.tagName.toLowerCase()==="path"&&s[i]&&o.setAttribute("d",s[i]);});}if(C.forEach(o=>{Bt(o);let i=He(o);x.push(i);let w=o.tagName.toLowerCase()==="path";w?s.push(o.getAttribute("d")??""):s.push(""),N&&(w?jt(s[s.length-1],N,o):K(`morphTo only applies to <path> elements \u2014 ignored on <${o.tagName}>.`,o)),a?(o.style.strokeDasharray=`${i}`,o.style.strokeDashoffset=T==="reverse"?`${i}`:"0",c&&(o.style.opacity="1"),U&&(o.style.stroke=U),H!==null&&(o.style.strokeWidth=`${H}`),W!==null&&(o.style.fillOpacity=`${W}`),N&&o.tagName.toLowerCase()==="path"&&o.setAttribute("d",N)):(o.style.strokeDasharray=`${i}`,o.style.strokeDashoffset=T==="reverse"?"0":`${i}`,c?o.style.opacity=T==="reverse"?"1":"0":o.style.opacity="",le&&(o.style.stroke=le),X!==null&&(o.style.strokeWidth=`${X}`),ne!==null&&(o.style.fillOpacity=`${ne}`));}),re){if(a)return e.style.clipPath=we(1),oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=we(0);}else if(a)return oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};let gt=typeof f=="string"?Qe(f):null;function Dt(){return !(Le===false||!Wt()||!C.length||!gt||re||A!=="y"||ae||m!==1||I!==0||ee||g||te!==false||N||B||q||S>0||b||P||oe||ye||Re||he||xe||h!=null||V!=null||F!=null||(E.start??"top bottom").trim()!=="top bottom"||(E.end??"bottom top").trim()!=="bottom top")}function Ot(){let o=++qt,i=`svg-scroll-draw-${o}`,w=`svg-scroll-draw-host-${o}`,Q=`--svg-scroll-draw-${o}`,Ae=T==="reverse"?"0":"var(--ssd-len)",Se=T==="reverse"?"var(--ssd-len)":"0",pe=`stroke-dashoffset:${Ae};`,v=`stroke-dashoffset:${Se};`;c&&(pe+=`opacity:${T==="reverse"?1:0};`,v+=`opacity:${T==="reverse"?0:1};`);let M=document.createElement("style");M.setAttribute("data-svg-scroll-draw",""),M.textContent=`@keyframes ${i}{from{${pe}}to{${v}}}.${w}{view-timeline-name:${Q};view-timeline-axis:block;}.${i}{animation-name:${i};animation-duration:auto;animation-timing-function:${gt};animation-fill-mode:both;animation-timeline:${Q};animation-range:cover 0% cover 100%;}`,document.head.appendChild(M),e.classList.add(w);function Z(p,z){p.style.setProperty("--ssd-len",String(x[z])),p.style.strokeDasharray=`${x[z]}`,p.style.strokeDashoffset="",p.style.opacity="",p.style.animationPlayState="",p.classList.add(i);}C.forEach(Z);let y=false,L=-1;function R(){if(L>=0)return L;let p=e.getBoundingClientRect(),{tStart:z,tEnd:fe}=Oe({top:p.top,height:p.height},rt(),pt(),be,Fe);return ue(ie(rt(),z,fe,m))}return {destroy(){e.classList.remove(w),C.forEach(p=>{p.classList.remove(i),p.style.removeProperty("--ssd-len"),p.style.animationPlayState="";}),M.remove();},replay(){y=false,L=-1,C.forEach(Z);},pause(){y=true,C.forEach(p=>{p.style.animationPlayState="paused";});},resume(){y&&(y=false,C.forEach(p=>{p.style.animationPlayState="running";}));},seek(p){let z=Math.min(1,Math.max(0,p));L=z,y=true,C.forEach((fe,se)=>{fe.classList.remove(i),fe.style.strokeDashoffset=T==="reverse"?`${x[se]*z}`:`${x[se]*(1-z)}`,c&&(fe.style.opacity=T==="reverse"?`${1-z}`:`${z}`);});},getProgress(){return R()},refresh(){C.forEach((p,z)=>{x[z]=He(p),p.style.setProperty("--ssd-len",String(x[z])),p.style.strokeDasharray=`${x[z]}`;});}}}if(Dt())return Ot();function Rt(){let o=Math.max(1,ke),i=0,w=0,Q=false;function Ae(y){let L=true;if(re){let R=Math.min(1,Math.max(0,y/o)),p=ue(R);me=p,e.style.setProperty("--scroll-draw-progress",String(p)),e.style.clipPath=we(T==="reverse"?1-p:p),b?.(p),R<1&&(L=false);}else C.forEach((R,p)=>{let z=p*I*o,fe=Math.min(1,Math.max(0,(y-z)/o)),se=ue(fe);R.style.strokeDashoffset=T==="reverse"?`${x[p]*se}`:`${x[p]*(1-se)}`,c&&(R.style.opacity=T==="reverse"?`${1-se}`:`${se}`),le&&U?R.style.stroke=_e(le,U,se):U&&(R.style.stroke=U),X!==null&&H!==null?R.style.strokeWidth=`${X+(H-X)*se}`:H!==null&&(R.style.strokeWidth=`${H}`),ne!==null&&W!==null?R.style.fillOpacity=`${ne+(W-ne)*se}`:W!==null&&(R.style.fillOpacity=`${W}`),N&&R.tagName.toLowerCase()==="path"&&s[p]&&R.setAttribute("d",it(s[p],N,se)),p===0&&(me=se,b?.(se),e.style.setProperty("--scroll-draw-progress",String(se))),fe<1&&(L=false);});if(B){let R=Math.min(1,Math.max(0,y/o)),p=ue(R);for(let z in B){let fe=parseFloat(z);p>=fe&&!Ie.has(fe)&&(Ie.add(fe),B[z]?.());}}return L}function Se(y){if(G)return;let L=y-i;D||(D=true,P?.());let R=Ae(L);if(R&&!k){k=true,Ae(o*(1+Math.max(0,C.length-1)*I)),oe?.(),Te<(q==="infinite"?1/0:q??0)&&(Te++,Ce=setTimeout(()=>{i=performance.now(),D=false,k=false,Ie.clear(),We(),O=requestAnimationFrame(Se);},Me));return}R||(O=requestAnimationFrame(Se));}function pe(){cancelAnimationFrame(O),clearTimeout(Ce),i=performance.now(),w=0,G=false,D=false,k=false,Te=0,Q=true,me=0,Ie.clear(),We(),O=requestAnimationFrame(Se);}let v=new IntersectionObserver(y=>{y.forEach(L=>{L.isIntersecting&&!(ee&&k)?pe():!L.isIntersecting&&!ee&&!k&&(cancelAnimationFrame(O),clearTimeout(Ce),Q=false);});},{root:ae??null,threshold:de,rootMargin:j}),M;function Z(){clearTimeout(M),M=setTimeout(()=>{C.forEach((y,L)=>{x[L]=He(y),y.style.strokeDasharray=`${x[L]}`;});},150);}return window.addEventListener("resize",Z),window.addEventListener("orientationchange",Z),S>0?setTimeout(()=>v.observe(e),S):v.observe(e),{destroy(){cancelAnimationFrame(O),clearTimeout(Ce),v.disconnect(),window.removeEventListener("resize",Z),window.removeEventListener("orientationchange",Z),clearTimeout(M);},replay(){Te=0,pe();},pause(){G||!Q||(G=true,w=performance.now()-i,cancelAnimationFrame(O));},resume(){G&&(G=false,Q=true,i=performance.now()-w,O=requestAnimationFrame(Se));},seek(y){let L=Math.min(1,Math.max(0,y));me=L,G=true,w=L*o,i=performance.now()-w,cancelAnimationFrame(O),Ae(w);},getProgress(){return me},refresh(){clearTimeout(M),C.forEach((y,L)=>{x[L]=He(y),y.style.strokeDasharray=`${x[L]}`;});}}}if(Pe)return Rt();dt();function Be(){if(!_||G)return;let o=performance.now(),i=rt();if(!De&&te===false&&i===mt){O=requestAnimationFrame(Be);return}De=false,mt=i;let w=m;if(te!==false){let v=o-ft,M=v>0?Math.abs(i-(qe<0?i:qe))/v:0;w=m*Math.max(.2,1+M*(typeof te=="number"?te:1)*.04);}qe=i,ft=o;let Q=g?ve===-1||i>=ve?"forward":"reverse":T;ve=i;let Ae=ce-u,Se=true,pe=Ae===0?0:(i-u)/Ae;if(isNaN(Ne)||(Ne<=0&&pe>0?ye?.():Ne>0&&pe<=0&&xe?.(),Ne<1&&pe>=1?Re?.():Ne>=1&&pe<1&&he?.()),Ne=pe,re){let v=ue(ie(i,u,ce,w));ee&&!g&&(Y=Math.max(Y,v),v=Y),me=v,e.style.setProperty("--scroll-draw-progress",String(v));let M=Q==="reverse"?1-v:v;e.style.clipPath=we(M),b?.(v),!D&&ie(i,u,ce,w)>0&&(D=true,P?.()),v>=1&&!k?(k=true,oe?.(),Te<(q==="infinite"?1/0:q??0)&&(Te++,Ce=setTimeout(()=>{Y=-1,D=false,k=false,e.style.clipPath=we(0);},Me))):v<1&&!ee&&(k=false),O=requestAnimationFrame(Be);return}if(C.forEach((v,M)=>{let Z=M*I*Ae,y=ue(ie(i,u+Z,ce+Z,w));ee&&!g&&(Y=Math.max(Y,y),y=Y),me=y,v.style.strokeDashoffset=Q==="reverse"?`${x[M]*y}`:`${x[M]*(1-y)}`,c&&(v.style.opacity=Q==="reverse"?`${1-y}`:`${y}`),le&&U?v.style.stroke=_e(le,U,y):U&&(v.style.stroke=U),X!==null&&H!==null?v.style.strokeWidth=`${X+(H-X)*y}`:H!==null&&(v.style.strokeWidth=`${H}`),ne!==null&&W!==null?v.style.fillOpacity=`${ne+(W-ne)*y}`:W!==null&&(v.style.fillOpacity=`${W}`),N&&v.tagName.toLowerCase()==="path"&&s[M]&&v.setAttribute("d",it(s[M],N,y)),M===0&&(b?.(y),e.style.setProperty("--scroll-draw-progress",String(y))),y<1&&(Se=false);}),B){let v=ue(ie(i,u,ce,w));for(let M in B){let Z=parseFloat(M);v>=Z&&!Ie.has(Z)&&(Ie.add(Z),B[M]?.());}}!D&&ie(i,u,ce,w)>0&&(D=true,P?.()),Se&&!k?(k=true,oe?.(),Te<(q==="infinite"?1/0:q??0)&&(Te++,Ce=setTimeout(()=>{Y=-1,D=false,k=false,Ie.clear(),We(),De=true;},Me))):!Se&&!ee&&(k=false),O=requestAnimationFrame(Be);}let nt=false;function Ge(){nt||(nt=true,O=requestAnimationFrame(function(){Be();}));}function je(){nt=false,cancelAnimationFrame(O);}let ot=new IntersectionObserver(o=>{o.forEach(i=>{_=i.isIntersecting,_&&!G?(De=true,Ge()):je();});},{root:ae??null,threshold:de,rootMargin:j});function yt(){C.forEach((o,i)=>{x[i]=He(o),o.style.strokeDasharray=`${x[i]}`;}),dt(),De=true;}let Ue;function ze(){clearTimeout(Ue),Ue=setTimeout(yt,150);}window.addEventListener("resize",ze),window.addEventListener("orientationchange",ze);let Ve;return typeof ResizeObserver<"u"&&(Ve=new ResizeObserver(()=>ze()),Ve.observe(document.body),Ve.observe(document.documentElement),Ve.observe(e)),S>0?setTimeout(()=>ot.observe(e),S):ot.observe(e),{destroy(){cancelAnimationFrame(O),clearTimeout(Ce),je(),ot.disconnect(),Ve?.disconnect(),window.removeEventListener("resize",ze),window.removeEventListener("orientationchange",ze),clearTimeout(Ue),ut();},replay(){Y=-1,ve=-1,qe=-1,D=false,k=false,Te=0,G=false,me=0,Ie.clear(),clearTimeout(Ce),We(),De=true,_&&Ge();},pause(){G=true,je();},resume(){G&&(G=false,De=true,_&&Ge());},seek(o){let i=Math.min(1,Math.max(0,o));me=i,Y=i,G=true,je(),It(i,T),De=true;},getProgress(){return me},refresh(){clearTimeout(Ue),yt(),_&&!G&&Ge();}}}var $t=new Map;function Ze(e,t){$t.set(e,t);}function Je(e){$t.delete(e);}function Ut(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function Mt(e){let t=[],r=/([\w]+)\(([^)]*)\)/g,n;for(;(n=r.exec(e))!==null;){let l=[],a=[],d=n[2].trim();if(d)for(let m of d.split(/[\s,]+/)){let c=m.match(/^([-+]?[\d.eE]+)(.*)$/);l.push(c?parseFloat(c[1]):0),a.push(c?c[2]:"");}t.push({fn:n[1],nums:l,units:a});}return t}function Xt(e,t,r){let n=Mt(e),l=Mt(t);return n.length===0||n.length!==l.length?r<1?e:t:n.map((a,d)=>{let m=l[d];return a.fn!==m.fn||a.nums.length!==m.nums.length?r<1?`${a.fn}(${a.nums.map((c,f)=>`${c}${a.units[f]}`).join(", ")})`:`${m.fn}(${m.nums.map((c,f)=>`${c}${m.units[f]}`).join(", ")})`:`${a.fn}(${a.nums.map((c,f)=>`${c+(m.nums[f]-c)*r}${a.units[f]}`).join(", ")})`}).join(" ")}function Pt(e,t,r){if(typeof e=="number"&&typeof t=="number")return String(e+(t-e)*r);let n=String(e),l=String(t);if(Ut(n))return _e(n,l,r);if(n.includes("("))return Xt(n,l,r);let a=n.match(/^([-+]?[\d.]+)(.*)$/),d=l.match(/^([-+]?[\d.]+)(.*)$/);if(a&&d){let m=parseFloat(a[1]),c=parseFloat(d[1]);return `${m+(c-m)*r}${a[2]||d[2]}`}return r<1?n:l}function Yt(e){return e.replace(/([A-Z])/g,t=>`-${t.toLowerCase()}`)}var Qt=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),Zt=0,kt="--scroll-draw-progress";function Jt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function Lt(e,t){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let{props:n,trigger:l={},easing:a="ease-out",speed:d=1,once:m=false,axis:c="y",scrollContainer:f,native:E=true,velocityScale:I=false,respectReducedMotion:T=true,triggerElement:ee,onProgress:Ee,onComplete:A,onEnter:$,onLeave:g,onEnterBack:S,onLeaveBack:h}=t,V=T&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,F=typeof a=="function"?a:J[a]??J["ease-out"],B=$e(l.start??"top bottom"),te=$e(l.end??"bottom top"),de=ee??e,j=typeof f=="string"?document.querySelector(f):f??null,q=Object.entries(n).map(([s,u])=>({prop:Yt(s),from:Array.isArray(u)?u[0]:"",to:Array.isArray(u)?u[1]:u}));function Me(){let s=window.getComputedStyle(e);for(let u of q)u.from===""&&(u.from=s.getPropertyValue(u.prop).trim()||"0");}function N(){for(let s of q)e.style.setProperty(s.prop,String(s.to));}let ge=new Map;for(let s of [...q.map(u=>u.prop),kt])ge.set(s,e.style.getPropertyValue(s));function Pe(){for(let[s,u]of ge)u?e.style.setProperty(s,u):e.style.removeProperty(s);}if(V)return N(),A?.(),{...r,destroy:Pe,getProgress:()=>1};Me();let ke=typeof a=="string"?Qe(a):null;function Le(){if(!E||!Jt()||!ke||c!=="y"||j||de!==e||m||d!==1||Ee||A||$||g||S||h||I!==false||(l.start??"top bottom").trim()!=="top bottom"||(l.end??"bottom top").trim()!=="bottom top")return false;for(let s of q)if(!Qt.has(s.prop))return false;return true}function b(){let s=`ssd-a-${++Zt}`,u=q.map(_=>`${_.prop}:${_.from}`).join(";"),ce=q.map(_=>`${_.prop}:${_.to}`).join(";"),k=document.createElement("style");k.setAttribute("data-ssd-animate",""),k.textContent=`@keyframes ${s}{from{${u}}to{${ce}}}.${s}{animation-name:${s};animation-duration:auto;animation-timing-function:${ke};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(k),e.classList.add(s);let D=()=>c==="x"?window.scrollX:window.scrollY,O=()=>c==="x"?window.innerWidth:window.innerHeight;return {destroy(){e.classList.remove(s),k.remove(),e.style.animationPlayState="",Pe();},replay(){e.classList.remove(s),e.offsetWidth,e.classList.add(s);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(_){let Y=Math.min(1,Math.max(0,_));e.classList.remove(s);for(let ve of q)e.style.setProperty(ve.prop,Pt(ve.from,ve.to,Y));},getProgress(){let _=e.getBoundingClientRect(),Y=D(),ve=O(),{tStart:G,tEnd:me}=Oe({top:_.top,height:_.height},Y,ve,B,te);return F(ie(Y,G,me,d))}}}if(Le())return b();let P=0,oe=0,ye=0,Re=false,he=false,xe=-1,re=0,ue=false,be=NaN,Fe=-1,ae=0,le=()=>j?c==="x"?j.scrollLeft:j.scrollTop:c==="x"?window.scrollX:window.scrollY,U=()=>j?c==="x"?j.clientWidth:j.clientHeight:c==="x"?window.innerWidth:window.innerHeight;function X(){let s=Xe(de,j,c),u=Oe(s,s.scroll,U(),B,te);P=u.tStart,oe=u.tEnd;}function H(s){e.style.setProperty(kt,String(s));for(let u of q)e.style.setProperty(u.prop,Pt(u.from,u.to,s));Ee?.(s);}function ne(s){if(isNaN(be)){be=s;return}be<=0&&s>0?$?.():be>0&&s<=0&&h?.(),be<1&&s>=1?g?.():be>=1&&s<1&&S?.(),be=s;}function W(){if(!Re||he)return;let s=performance.now(),u=le(),ce=d;if(I!==false){let O=s-ae,_=O>0?Math.abs(u-(Fe<0?u:Fe))/O:0;ce=d*Math.max(.2,1+_*(typeof I=="number"?I:1)*.04);}Fe=u,ae=s;let k=oe===P?0:(u-P)/(oe-P);ne(k);let D=F(ie(u,P,oe,ce));m&&(xe=Math.max(xe,D),D=xe),re=D,H(D),D>=1&&!ue?(ue=true,A?.()):D<1&&!m&&(ue=false),ye=requestAnimationFrame(W);}X(),oe===P&&K("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 s=F(ie(le(),P,oe,d));m&&s>0&&(xe=s),re=s,H(s);}let we=new IntersectionObserver(s=>{s.forEach(u=>{Re=u.isIntersecting,Re&&!he?ye=requestAnimationFrame(W):cancelAnimationFrame(ye);});},{root:j??null}),C;function x(){clearTimeout(C),C=setTimeout(X,150);}return window.addEventListener("resize",x),window.addEventListener("orientationchange",x),we.observe(e),Ze(e,{type:"animate",getProgress:()=>re,getTrigger:()=>({tStart:P,tEnd:oe})}),{destroy(){cancelAnimationFrame(ye),we.disconnect(),window.removeEventListener("resize",x),window.removeEventListener("orientationchange",x),clearTimeout(C),Pe(),Je(e);},replay(){xe=-1,ue=false,re=0,he=false,H(0);},pause(){he=true,cancelAnimationFrame(ye);},resume(){he&&(he=false,Re&&(ye=requestAnimationFrame(W)));},seek(s){let u=Math.min(1,Math.max(0,s));re=u,xe=u,he=true,cancelAnimationFrame(ye),H(u);},getProgress(){return re}}}var Ke={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Kt(e,t){if(typeof window>"u")return Ke;let r=typeof e=="string"?document.querySelector(e):e;return r?Lt(r,t):(K("scrollAnimate: element not found:",e),Ke)}function er(e,t={}){if(typeof window>"u")return Ke;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return K("scrollParallax: element not found:",e),Ke;let{speed:n=.3,axis:l="y",easing:a="linear",trigger:d,onProgress:m}=t,c=r.getBoundingClientRect(),f=l==="x"?c.width:c.height,E=n*f;return Lt(r,{props:l==="x"?{transform:["translateX(0px)",`translateX(${-E}px)`]}:{transform:["translateY(0px)",`translateY(${-E}px)`]},trigger:d??{start:"top bottom",end:"bottom top"},easing:a,native:false,onProgress:m})}var at={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function tr(e,t){if(typeof window>"u")return at;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return K("scrollCounter: element not found:",e),at;let n=r,{from:l=0,to:a,format:d,easing:m="ease-out",trigger:c={},once:f=true,decimals:E,onComplete:I}=t,T=E!==void 0?b=>b.toFixed(E):d??(b=>String(Math.round(b))),ee=typeof m=="function"?m:J[m]??J["ease-out"],Ee=$e(c.start??"top 80%"),A=$e(c.end??"top 20%");if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return n.textContent=T(a),I?.(),at;let g=0,S=0,h=0,V=false,F=false,B=-1,te=0,de=false,j=()=>window.scrollY,q=()=>window.innerHeight;function Me(){let b=n.getBoundingClientRect(),P=Oe({top:b.top,height:b.height},j(),q(),Ee,A);g=P.tStart,S=P.tEnd;}function N(b){n.textContent=T(l+(a-l)*b),n.style.setProperty("--scroll-draw-progress",String(b));}function ge(){if(!V||F)return;let b=ee(ie(j(),g,S,1));f&&(B=Math.max(B,b),b=B),te=b,N(b),b>=1&&!de?(de=true,I?.()):b<1&&!f&&(de=false),h=requestAnimationFrame(ge);}Me();{let b=ee(ie(j(),g,S,1));f&&b>0&&(B=b),te=b,N(b);}let Pe=new IntersectionObserver(b=>{b.forEach(P=>{V=P.isIntersecting,V&&!F?h=requestAnimationFrame(ge):cancelAnimationFrame(h);});}),ke;function Le(){clearTimeout(ke),ke=setTimeout(Me,150);}return window.addEventListener("resize",Le),window.addEventListener("orientationchange",Le),Pe.observe(n),Ze(n,{type:"counter",getProgress:()=>te,getTrigger:()=>({tStart:g,tEnd:S})}),{destroy(){cancelAnimationFrame(h),Pe.disconnect(),window.removeEventListener("resize",Le),window.removeEventListener("orientationchange",Le),clearTimeout(ke),Je(n);},replay(){B=-1,de=false,te=0,F=false,N(0);},pause(){F=true,cancelAnimationFrame(h);},resume(){F&&(F=false,V&&(h=requestAnimationFrame(ge)));},seek(b){let P=Math.min(1,Math.max(0,b));te=P,B=P,F=true,cancelAnimationFrame(h),N(P);},getProgress(){return te}}}var Ct="http://www.w3.org/2000/svg",rr="cinematic-photo",lt=e=>e<0?0:e>1?1:e;function et(e){let t=parseFloat(e);return Number.isFinite(t)?lt(t/100):0}function nr(e){return J[e]??J.linear}var or={destroy:()=>{},getProgress:()=>0},ct=class{constructor(t){if(typeof document>"u"){this.mount=null;return}this.mount=typeof t.wrapper=="string"?document.querySelector(t.wrapper):t.wrapper,this.mount||K("Cinematic: wrapper not found:",t.wrapper);}loadStory(t){let r=this.mount;if(typeof window>"u"||!r)return or;r.style.position="relative",r.style.height=t.totalHeight,r.style.display="block";let n=document.createElement("div");n.setAttribute("data-cinematic-stage",""),n.style.cssText="position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:block;",r.appendChild(n);let l=[];for(let A of t.scenes){if(A.background){let g=document.createElement("img");g.id=rr,g.src=A.background,g.alt="",g.style.cssText="position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;",n.appendChild(g);}let $=A.animations.filter(g=>g.type==="draw");if($.length){let g=document.createElementNS(Ct,"svg");g.setAttribute("viewBox",`0 0 ${t.canvas.width} ${t.canvas.height}`),g.setAttribute("preserveAspectRatio","xMidYMid meet"),g.style.cssText="position:absolute;inset:0;width:100%;height:100%;overflow:visible;",n.appendChild(g);for(let S of $){let h=document.createElementNS(Ct,"path");h.id=S.target.replace(/^#/,""),h.setAttribute("d",S.d),h.setAttribute("fill","none"),h.setAttribute("stroke",S.stroke),h.setAttribute("stroke-width",String(S.strokeWidth)),h.setAttribute("stroke-linecap","round"),h.setAttribute("stroke-linejoin","round");let V=S.length||h.getTotalLength?.()||0;h.style.strokeDasharray=String(V),h.style.strokeDashoffset=String(V),g.appendChild(h),l.push({kind:"draw",el:h,start:et(S.start),end:et(S.end),ease:nr(S.easing),length:V});}}for(let g of A.animations){if(g.type!=="fade")continue;let S=n.querySelector(g.target)??document.querySelector(g.target);S&&(S.style.opacity=String(g.from),l.push({kind:"fade",el:S,start:et(g.start),end:et(g.end),ease:J["ease-in-out"]??J.linear,from:g.from,to:g.to}));}}let a=0,d=()=>{let A=r.offsetHeight-window.innerHeight;return A<=0?r.getBoundingClientRect().top<=0?1:0:lt(-r.getBoundingClientRect().top/A)},m=A=>{for(let $ of l){let g=$.end-$.start,S=g<=0?A>=$.end?1:0:lt((A-$.start)/g),h=$.ease(S);$.kind==="draw"?$.el.style.strokeDashoffset=String($.length*(1-h)):$.el.style.opacity=String($.from+($.to-$.from)*h);}};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return m(1),{destroy:()=>{},getProgress:()=>1};let c=0,f=false,E=false,I=()=>{a=d(),m(a),f&&(c=requestAnimationFrame(I));},T=()=>{f||(f=true,c=requestAnimationFrame(I));},ee=()=>{f=false,cancelAnimationFrame(c);},Ee=new IntersectionObserver(A=>{for(let $ of A)E=$.isIntersecting,E?T():ee();},{threshold:0});return Ee.observe(n),a=d(),m(a),{destroy(){ee(),Ee.disconnect();},getProgress:()=>a}}};function Lr(e,t){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let n=typeof e=="string"?document.querySelector(e):e;return n?At(n,t):(K("Container not found:",e),r)}
|
|
4
|
+
exports.Cinematic=ct;exports.PRESETS=st;exports.createBounce=vt;exports.createElastic=St;exports.createSpring=Ft;exports.scrollAnimate=Kt;exports.scrollCounter=tr;exports.scrollDraw=Lr;exports.scrollParallax=er;
|
package/dist/index.d.mts
CHANGED
|
@@ -125,6 +125,21 @@ interface ScrollDrawInstance {
|
|
|
125
125
|
seek: (progress: number) => void;
|
|
126
126
|
/** Returns current draw progress (0–1). */
|
|
127
127
|
getProgress: () => number;
|
|
128
|
+
/**
|
|
129
|
+
* Re-measure after a layout change: path lengths, and the scroll trigger window.
|
|
130
|
+
*
|
|
131
|
+
* The engine already re-measures on `resize`, on `orientationchange`, and via a
|
|
132
|
+
* `ResizeObserver` on the document element — but none of those fire for a layout
|
|
133
|
+
* change that leaves the document height alone, such as a tab switching, a
|
|
134
|
+
* sibling collapsing, or a font swapping inside a fixed-height box. Call this
|
|
135
|
+
* after one of those.
|
|
136
|
+
*
|
|
137
|
+
* Optional on this shared type because several instances here are fan-outs over
|
|
138
|
+
* other instances or SSR no-op stubs. `scrollDraw`, `scrollPin`,
|
|
139
|
+
* `scrollHorizontal`, `scrollDrawTimeline` and the group APIs all provide it;
|
|
140
|
+
* use `instance.refresh?.()` if you hold an instance of unknown origin.
|
|
141
|
+
*/
|
|
142
|
+
refresh?: () => void;
|
|
128
143
|
}
|
|
129
144
|
|
|
130
145
|
type PresetName = 'sketch' | 'reveal' | 'typewriter' | 'cinematic' | 'spring';
|
|
@@ -195,6 +210,33 @@ interface ScrollAnimateOptions {
|
|
|
195
210
|
* Higher values = more dramatic speed-up. Default sensitivity: 1.
|
|
196
211
|
*/
|
|
197
212
|
velocityScale?: boolean | number;
|
|
213
|
+
/**
|
|
214
|
+
* Honour `prefers-reduced-motion: reduce` by applying the final state and not
|
|
215
|
+
* animating. Default: `true`.
|
|
216
|
+
*
|
|
217
|
+
* Set to `false` only when the movement is *scroll-linked scrubbing* rather
|
|
218
|
+
* than autonomous motion — it advances solely as the user scrolls, 1:1 with
|
|
219
|
+
* their input, so it is direct manipulation rather than something that plays at
|
|
220
|
+
* them. `scrollHorizontal` sets this, because jumping to the final state there
|
|
221
|
+
* would leave every panel but the last unreachable inside the sticky
|
|
222
|
+
* `overflow: hidden` container.
|
|
223
|
+
*/
|
|
224
|
+
respectReducedMotion?: boolean;
|
|
225
|
+
/**
|
|
226
|
+
* Element whose geometry defines the trigger window, when that is not the
|
|
227
|
+
* element being animated. Defaults to the animated element.
|
|
228
|
+
*
|
|
229
|
+
* Needed whenever the animated element cannot supply the scroll length itself —
|
|
230
|
+
* the case that matters is a `position: sticky` stage, where the pinned element
|
|
231
|
+
* is exactly one viewport tall and all of the scroll room belongs to its
|
|
232
|
+
* container. Resolving `top top` → `bottom bottom` against the pinned element
|
|
233
|
+
* there yields tStart === tEnd, a zero-length window, and no movement at all.
|
|
234
|
+
*
|
|
235
|
+
* Setting this disables the native CSS fast path: `animation-timeline: view()`
|
|
236
|
+
* always measures the element the animation is attached to, so it cannot express
|
|
237
|
+
* a separate subject.
|
|
238
|
+
*/
|
|
239
|
+
triggerElement?: Element;
|
|
198
240
|
onProgress?: (alpha: number) => void;
|
|
199
241
|
onComplete?: () => void;
|
|
200
242
|
/** Fires when scroll enters the trigger zone (scrolling forward). */
|
package/dist/index.d.ts
CHANGED
|
@@ -125,6 +125,21 @@ interface ScrollDrawInstance {
|
|
|
125
125
|
seek: (progress: number) => void;
|
|
126
126
|
/** Returns current draw progress (0–1). */
|
|
127
127
|
getProgress: () => number;
|
|
128
|
+
/**
|
|
129
|
+
* Re-measure after a layout change: path lengths, and the scroll trigger window.
|
|
130
|
+
*
|
|
131
|
+
* The engine already re-measures on `resize`, on `orientationchange`, and via a
|
|
132
|
+
* `ResizeObserver` on the document element — but none of those fire for a layout
|
|
133
|
+
* change that leaves the document height alone, such as a tab switching, a
|
|
134
|
+
* sibling collapsing, or a font swapping inside a fixed-height box. Call this
|
|
135
|
+
* after one of those.
|
|
136
|
+
*
|
|
137
|
+
* Optional on this shared type because several instances here are fan-outs over
|
|
138
|
+
* other instances or SSR no-op stubs. `scrollDraw`, `scrollPin`,
|
|
139
|
+
* `scrollHorizontal`, `scrollDrawTimeline` and the group APIs all provide it;
|
|
140
|
+
* use `instance.refresh?.()` if you hold an instance of unknown origin.
|
|
141
|
+
*/
|
|
142
|
+
refresh?: () => void;
|
|
128
143
|
}
|
|
129
144
|
|
|
130
145
|
type PresetName = 'sketch' | 'reveal' | 'typewriter' | 'cinematic' | 'spring';
|
|
@@ -195,6 +210,33 @@ interface ScrollAnimateOptions {
|
|
|
195
210
|
* Higher values = more dramatic speed-up. Default sensitivity: 1.
|
|
196
211
|
*/
|
|
197
212
|
velocityScale?: boolean | number;
|
|
213
|
+
/**
|
|
214
|
+
* Honour `prefers-reduced-motion: reduce` by applying the final state and not
|
|
215
|
+
* animating. Default: `true`.
|
|
216
|
+
*
|
|
217
|
+
* Set to `false` only when the movement is *scroll-linked scrubbing* rather
|
|
218
|
+
* than autonomous motion — it advances solely as the user scrolls, 1:1 with
|
|
219
|
+
* their input, so it is direct manipulation rather than something that plays at
|
|
220
|
+
* them. `scrollHorizontal` sets this, because jumping to the final state there
|
|
221
|
+
* would leave every panel but the last unreachable inside the sticky
|
|
222
|
+
* `overflow: hidden` container.
|
|
223
|
+
*/
|
|
224
|
+
respectReducedMotion?: boolean;
|
|
225
|
+
/**
|
|
226
|
+
* Element whose geometry defines the trigger window, when that is not the
|
|
227
|
+
* element being animated. Defaults to the animated element.
|
|
228
|
+
*
|
|
229
|
+
* Needed whenever the animated element cannot supply the scroll length itself —
|
|
230
|
+
* the case that matters is a `position: sticky` stage, where the pinned element
|
|
231
|
+
* is exactly one viewport tall and all of the scroll room belongs to its
|
|
232
|
+
* container. Resolving `top top` → `bottom bottom` against the pinned element
|
|
233
|
+
* there yields tStart === tEnd, a zero-length window, and no movement at all.
|
|
234
|
+
*
|
|
235
|
+
* Setting this disables the native CSS fast path: `animation-timeline: view()`
|
|
236
|
+
* always measures the element the animation is attached to, so it cannot express
|
|
237
|
+
* a separate subject.
|
|
238
|
+
*/
|
|
239
|
+
triggerElement?: Element;
|
|
198
240
|
onProgress?: (alpha: number) => void;
|
|
199
241
|
onComplete?: () => void;
|
|
200
242
|
/** Fires when scroll enters the trigger zone (scrolling forward). */
|
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function
|
|
2
|
-
<div style="position:absolute;${
|
|
3
|
-
<div style="position:absolute;${l?`left:${f}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${f}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(n),window.addEventListener("scroll",u,{passive:true}),u(),n}function Ze(e,t,r){let n=(t.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),u=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,a=>{let h=parseFloat(a),f=n[u++]??h;return String(+(h+(f-h)*r).toFixed(4))})}function ut(e,t={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:r,...n}=t,u=r?{...Ue[r],...n}:n,a=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:h="path, polyline, line, polygon, rect, circle",speed:f=1,fade:l=false,easing:p="linear",trigger:x={},stagger:F=0,direction:E="forward",once:W=false,debug:ge=false,axis:S="y",scrollContainer:M,autoReverse:d=false,delay:A=0,strokeColor:b,strokeWidth:R,fillOpacity:z,waypoints:T,velocityScale:H=false,threshold:ye=0,rootMargin:we="0px",repeat:ae=0,repeatDelay:ve=0,morphTo:P,clip:U,autoplay:se=false,duration:ce=1e3,native:Z=true,onProgress:g,onStart:N,onComplete:le,onEnter:ue,onLeave:Me,onEnterBack:Ie,onLeaveBack:Pe}=u,me=U===true?"left":typeof U=="string"?U:false,fe=typeof p=="function"?p:te[p]??te.linear,Ae=be(x.start??"top bottom"),Oe=be(x.end??"bottom top"),_=typeof M=="string"?document.querySelector(M):M??null,ne=Array.isArray(b)?b[0]:null,V=Array.isArray(b)?b[1]:typeof b=="string"?b:null,B=Array.isArray(R)?R[0]:null,s=Array.isArray(R)?R[1]:typeof R=="number"?R:null,m=Array.isArray(z)?z[0]:null,k=Array.isArray(z)?z[1]:typeof z=="number"?z:null;function G(o){let i=o*100;switch(me){case "right":return `inset(0 0 0 ${100-i}%)`;case "top":return `inset(0 0 ${100-i}% 0)`;case "bottom":return `inset(${100-i}% 0 0 0)`;case "center":return `circle(${o*150}% at 50% 50%)`;default:return `inset(0 ${100-i}% 0 0)`}}let $=me?[]:Array.from(e.querySelectorAll(h)),D=[],C=[],Y=0,J=0,j=false,oe=false,X=0,Fe=false,pe=-1,Ne=-1,K=false,Te=0,he=0,Ee,je=null,Se=new Set,Re=-1,et=performance.now(),ke=NaN;function De(){return _?S==="x"?_.scrollLeft:_.scrollTop:S==="x"?window.scrollX:window.scrollY}function tt(){return _?S==="x"?_.clientWidth:_.clientHeight:S==="x"?window.innerWidth:window.innerHeight}function rt(){let o=e.getBoundingClientRect(),i,w,q;if(_){let ee=_.getBoundingClientRect();i=S==="x"?o.left-ee.left+_.scrollLeft:o.top-ee.top+_.scrollTop,w=S==="x"?o.width:o.height,q=De();}else i=S==="x"?o.left:o.top,w=S==="x"?o.width:o.height,q=De();let Q=xe({top:i,height:w},q,tt(),Ae,Oe);Y=Q.tStart,J=Q.tEnd,ge&&process.env.NODE_ENV!=="production"&&(je?.remove(),je=$t(Y,J,S));}function ht(o,i){if(e.style.setProperty("--scroll-draw-progress",String(o)),me){let w=i==="reverse"?1-o:o;e.style.clipPath=G(w);return}$.forEach((w,q)=>{w.style.strokeDashoffset=i==="reverse"?`${D[q]*o}`:`${D[q]*(1-o)}`,l&&(w.style.opacity=i==="reverse"?`${1-o}`:`${o}`),ne&&V?w.style.stroke=Le(ne,V,o):V&&(w.style.stroke=V),B!==null&&s!==null?w.style.strokeWidth=`${B+(s-B)*o}`:s!==null&&(w.style.strokeWidth=`${s}`),m!==null&&k!==null?w.style.fillOpacity=`${m+(k-m)*o}`:k!==null&&(w.style.fillOpacity=`${k}`),P&&w.tagName.toLowerCase()==="path"&&C[q]&&w.setAttribute("d",Ze(C[q],P,o));});}function He(){if(e.style.setProperty("--scroll-draw-progress","0"),me){e.style.clipPath=G(0);return}$.forEach((o,i)=>{o.style.strokeDasharray=`${D[i]}`,o.style.strokeDashoffset=E==="reverse"?"0":`${D[i]}`,l?o.style.opacity=E==="reverse"?"1":"0":o.style.opacity="",ne&&(o.style.stroke=ne),B!==null&&(o.style.strokeWidth=`${B}`),m!==null&&(o.style.fillOpacity=`${m}`),P&&o.tagName.toLowerCase()==="path"&&C[i]&&o.setAttribute("d",C[i]);});}if($.forEach(o=>{Tt(o);let i=Ve(o);D.push(i),o.tagName.toLowerCase()==="path"?C.push(o.getAttribute("d")??""):C.push(""),a?(o.style.strokeDasharray=`${i}`,o.style.strokeDashoffset=E==="reverse"?`${i}`:"0",l&&(o.style.opacity="1"),V&&(o.style.stroke=V),s!==null&&(o.style.strokeWidth=`${s}`),k!==null&&(o.style.fillOpacity=`${k}`),P&&o.tagName.toLowerCase()==="path"&&o.setAttribute("d",P)):(o.style.strokeDasharray=`${i}`,o.style.strokeDashoffset=E==="reverse"?"0":`${i}`,l?o.style.opacity=E==="reverse"?"1":"0":o.style.opacity="",ne&&(o.style.stroke=ne),B!==null&&(o.style.strokeWidth=`${B}`),m!==null&&(o.style.fillOpacity=`${m}`));}),me){if(a)return e.style.clipPath=G(1),le?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=G(0);}else if(a)return le?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function bt(){return !(Z===false||!At()||!$.length||typeof p!="string"||!(p in ct)||me||S!=="y"||_||f!==1||F!==0||W||d||H!==false||P||T||ae||A>0||g||N||le||ue||Me||Ie||Pe||b!=null||R!=null||z!=null||(x.start??"top bottom").trim()!=="top bottom"||(x.end??"bottom top").trim()!=="bottom top")}function wt(){let o=`svg-scroll-draw-${++xt}`,i=E==="reverse"?"0":"var(--ssd-len)",w=E==="reverse"?"var(--ssd-len)":"0",q=`stroke-dashoffset:${i};`,Q=`stroke-dashoffset:${w};`;l&&(q+=`opacity:${E==="reverse"?1:0};`,Q+=`opacity:${E==="reverse"?0:1};`);let ee=document.createElement("style");ee.setAttribute("data-svg-scroll-draw",""),ee.textContent=`@keyframes ${o}{from{${q}}to{${Q}}}.${o}{animation-name:${o};animation-duration:auto;animation-timing-function:${ct[p]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(ee);function ie(c,v){c.style.setProperty("--ssd-len",String(D[v])),c.style.strokeDasharray=`${D[v]}`,c.style.strokeDashoffset="",c.style.opacity="",c.style.animationPlayState="",c.classList.add(o);}$.forEach(ie);let y=false,L=-1;function I(){if(L>=0)return L;let c=e.getBoundingClientRect(),{tStart:v,tEnd:O}=xe({top:c.top,height:c.height},De(),tt(),Ae,Oe);return fe(re(De(),v,O,f))}return {destroy(){$.forEach(c=>{c.classList.remove(o),c.style.removeProperty("--ssd-len"),c.style.animationPlayState="";}),ee.remove();},replay(){y=false,L=-1,$.forEach(ie);},pause(){y=true,$.forEach(c=>{c.style.animationPlayState="paused";});},resume(){y&&(y=false,$.forEach(c=>{c.style.animationPlayState="running";}));},seek(c){let v=Math.min(1,Math.max(0,c));L=v,y=true,$.forEach((O,$e)=>{O.classList.remove(o),O.style.strokeDashoffset=E==="reverse"?`${D[$e]*v}`:`${D[$e]*(1-v)}`,l&&(O.style.opacity=E==="reverse"?`${1-v}`:`${v}`);});},getProgress(){return I()}}}if(bt())return wt();function vt(){let o=Math.max(1,ce),i=0,w=0;function q(I){let c=true;if(me){let v=Math.min(1,Math.max(0,I/o)),O=fe(v);Te=O,e.style.setProperty("--scroll-draw-progress",String(O)),e.style.clipPath=G(E==="reverse"?1-O:O),g?.(O),v<1&&(c=false);}else $.forEach((v,O)=>{let $e=O*F*o,Ce=Math.min(1,Math.max(0,(I-$e)/o)),de=fe(Ce);v.style.strokeDashoffset=E==="reverse"?`${D[O]*de}`:`${D[O]*(1-de)}`,l&&(v.style.opacity=E==="reverse"?`${1-de}`:`${de}`),ne&&V?v.style.stroke=Le(ne,V,de):V&&(v.style.stroke=V),B!==null&&s!==null?v.style.strokeWidth=`${B+(s-B)*de}`:s!==null&&(v.style.strokeWidth=`${s}`),m!==null&&k!==null?v.style.fillOpacity=`${m+(k-m)*de}`:k!==null&&(v.style.fillOpacity=`${k}`),P&&v.tagName.toLowerCase()==="path"&&C[O]&&v.setAttribute("d",Ze(C[O],P,de)),O===0&&(g?.(de),e.style.setProperty("--scroll-draw-progress",String(de))),Ce<1&&(c=false);});if(T){let v=Math.min(1,Math.max(0,I/o)),O=fe(v);for(let $e in T){let Ce=parseFloat($e);O>=Ce&&!Se.has(Ce)&&(Se.add(Ce),T[$e]?.());}}return c}function Q(I){if(K)return;let c=I-i;oe||(oe=true,N?.());let v=q(c);if(v&&!j){j=true,q(o*(1+Math.max(0,$.length-1)*F)),le?.(),he<(ae==="infinite"?1/0:ae??0)&&(he++,Ee=setTimeout(()=>{i=performance.now(),oe=false,j=false,Se.clear(),He(),X=requestAnimationFrame(Q);},ve));return}v||(X=requestAnimationFrame(Q));}function ee(){cancelAnimationFrame(X),clearTimeout(Ee),i=performance.now(),w=0,K=false,oe=false,j=false,he=0,Se.clear(),He(),X=requestAnimationFrame(Q);}let ie=new IntersectionObserver(I=>{I.forEach(c=>{c.isIntersecting&&!(W&&j)?ee():!c.isIntersecting&&!W&&!j&&(cancelAnimationFrame(X),clearTimeout(Ee),i=null);});},{root:_??null,threshold:ye,rootMargin:we}),y;function L(){clearTimeout(y),y=setTimeout(()=>{$.forEach((I,c)=>{D[c]=Ve(I),I.style.strokeDasharray=`${D[c]}`;});},150);}return window.addEventListener("resize",L),window.addEventListener("orientationchange",L),A>0?setTimeout(()=>ie.observe(e),A):ie.observe(e),{destroy(){cancelAnimationFrame(X),clearTimeout(Ee),ie.disconnect(),window.removeEventListener("resize",L),window.removeEventListener("orientationchange",L),clearTimeout(y);},replay(){he=0,ee();},pause(){K||(K=true,w=performance.now()-i,cancelAnimationFrame(X));},resume(){K&&(K=false,i=performance.now()-w,X=requestAnimationFrame(Q));},seek(I){let c=Math.min(1,Math.max(0,I));Te=c,K=true,w=c*o,i=performance.now()-w,cancelAnimationFrame(X),q(w);},getProgress(){return Te}}}if(se)return vt();rt();function qe(){if(!Fe||K)return;let o=performance.now(),i=De(),w=f;if(H!==false){let y=o-et,L=y>0?Math.abs(i-(Re<0?i:Re))/y:0;w=f*Math.max(.2,1+L*(typeof H=="number"?H:1)*.04);}Re=i,et=o;let q=d?Ne===-1||i>=Ne?"forward":"reverse":E;Ne=i;let Q=J-Y,ee=true,ie=Q===0?0:(i-Y)/Q;if(isNaN(ke)||(ke<=0&&ie>0?ue?.():ke>0&&ie<=0&&Pe?.(),ke<1&&ie>=1?Me?.():ke>=1&&ie<1&&Ie?.()),ke=ie,me){let y=fe(re(i,Y,J,w));W&&!d&&(pe=Math.max(pe,y),y=pe),Te=y,e.style.setProperty("--scroll-draw-progress",String(y));let L=q==="reverse"?1-y:y;e.style.clipPath=G(L),g?.(y),!oe&&re(i,Y,J,w)>0&&(oe=true,N?.()),y>=1&&!j?(j=true,le?.(),he<(ae==="infinite"?1/0:ae??0)&&(he++,Ee=setTimeout(()=>{pe=-1,oe=false,j=false,e.style.clipPath=G(0);},ve))):y<1&&!W&&(j=false),X=requestAnimationFrame(qe);return}if($.forEach((y,L)=>{let I=L*F*Q,c=fe(re(i,Y+I,J+I,w));W&&!d&&(pe=Math.max(pe,c),c=pe),Te=c,y.style.strokeDashoffset=q==="reverse"?`${D[L]*c}`:`${D[L]*(1-c)}`,l&&(y.style.opacity=q==="reverse"?`${1-c}`:`${c}`),ne&&V?y.style.stroke=Le(ne,V,c):V&&(y.style.stroke=V),B!==null&&s!==null?y.style.strokeWidth=`${B+(s-B)*c}`:s!==null&&(y.style.strokeWidth=`${s}`),m!==null&&k!==null?y.style.fillOpacity=`${m+(k-m)*c}`:k!==null&&(y.style.fillOpacity=`${k}`),P&&y.tagName.toLowerCase()==="path"&&C[L]&&y.setAttribute("d",Ze(C[L],P,c)),L===0&&(g?.(c),e.style.setProperty("--scroll-draw-progress",String(c))),c<1&&(ee=false);}),T){let y=fe(re(i,Y,J,w));for(let L in T){let I=parseFloat(L);y>=I&&!Se.has(I)&&(Se.add(I),T[L]?.());}}!oe&&re(i,Y,J,w)>0&&(oe=true,N?.()),ee&&!j?(j=true,le?.(),he<(ae==="infinite"?1/0:ae??0)&&(he++,Ee=setTimeout(()=>{pe=-1,oe=false,j=false,Se.clear(),He();},ve))):!ee&&!W&&(j=false),X=requestAnimationFrame(qe);}let Xe=new IntersectionObserver(o=>{o.forEach(i=>{Fe=i.isIntersecting,Fe&&!K?X=requestAnimationFrame(qe):cancelAnimationFrame(X);});},{root:_??null,threshold:ye,rootMargin:we}),Ye;function ze(){clearTimeout(Ye),Ye=setTimeout(()=>{$.forEach((o,i)=>{D[i]=Ve(o),o.style.strokeDasharray=`${D[i]}`;}),rt();},150);}return window.addEventListener("resize",ze),window.addEventListener("orientationchange",ze),A>0?setTimeout(()=>Xe.observe(e),A):Xe.observe(e),{destroy(){cancelAnimationFrame(X),clearTimeout(Ee),Xe.disconnect(),window.removeEventListener("resize",ze),window.removeEventListener("orientationchange",ze),clearTimeout(Ye),je?.remove();},replay(){pe=-1,Ne=-1,Re=-1,oe=false,j=false,he=0,K=false,Se.clear(),clearTimeout(Ee),He();},pause(){K=true,cancelAnimationFrame(X);},resume(){K&&(K=false,Fe&&(X=requestAnimationFrame(qe)));},seek(o){let i=Math.min(1,Math.max(0,o));Te=i,pe=i,K=true,cancelAnimationFrame(X),ht(i,E);},getProgress(){return Te}}}var mt=new Map;function Be(e,t){mt.set(e,t);}function We(e){mt.delete(e);}function Mt(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function ft(e){let t=[],r=/([\w]+)\(([^)]*)\)/g,n;for(;(n=r.exec(e))!==null;){let u=[],a=[],h=n[2].trim();if(h)for(let f of h.split(/[\s,]+/)){let l=f.match(/^([-+]?[\d.eE]+)(.*)$/);u.push(l?parseFloat(l[1]):0),a.push(l?l[2]:"");}t.push({fn:n[1],nums:u,units:a});}return t}function Pt(e,t,r){let n=ft(e),u=ft(t);return n.length===0||n.length!==u.length?r<1?e:t:n.map((a,h)=>{let f=u[h];return a.fn!==f.fn||a.nums.length!==f.nums.length?r<1?`${a.fn}(${a.nums.map((l,p)=>`${l}${a.units[p]}`).join(", ")})`:`${f.fn}(${f.nums.map((l,p)=>`${l}${f.units[p]}`).join(", ")})`:`${a.fn}(${a.nums.map((l,p)=>`${l+(f.nums[p]-l)*r}${a.units[p]}`).join(", ")})`}).join(" ")}function pt(e,t,r){if(typeof e=="number"&&typeof t=="number")return String(e+(t-e)*r);let n=String(e),u=String(t);if(Mt(n))return Le(n,u,r);if(n.includes("("))return Pt(n,u,r);let a=n.match(/^([-+]?[\d.]+)(.*)$/),h=u.match(/^([-+]?[\d.]+)(.*)$/);if(a&&h){let f=parseFloat(a[1]),l=parseFloat(h[1]);return `${f+(l-f)*r}${a[2]||h[2]}`}return r<1?n:u}function kt(e){return e.replace(/([A-Z])/g,t=>`-${t.toLowerCase()}`)}var dt={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},Ct=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),Lt=0;function It(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function gt(e,t){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let{props:n,trigger:u={},easing:a="ease-out",speed:h=1,once:f=false,axis:l="y",scrollContainer:p,native:x=true,velocityScale:F=false,onProgress:E,onComplete:W,onEnter:ge,onLeave:S,onEnterBack:M,onLeaveBack:d}=t,A=window.matchMedia("(prefers-reduced-motion: reduce)").matches,b=typeof a=="function"?a:te[a]??te["ease-out"],R=be(u.start??"top bottom"),z=be(u.end??"bottom top"),T=typeof p=="string"?document.querySelector(p):p??null,H=Object.entries(n).map(([s,m])=>({prop:kt(s),from:Array.isArray(m)?m[0]:"",to:Array.isArray(m)?m[1]:m}));function ye(){let s=window.getComputedStyle(e);for(let m of H)m.from===""&&(m.from=s.getPropertyValue(m.prop).trim()||"0");}function we(){for(let s of H)e.style.setProperty(s.prop,String(s.to));}if(A)return we(),W?.(),r;ye();function ae(){if(!x||!It()||typeof a!="string"||!(a in dt)||l!=="y"||T||f||h!==1||E||W||ge||S||M||d||F!==false||(u.start??"top bottom").trim()!=="top bottom"||(u.end??"bottom top").trim()!=="bottom top")return false;for(let s of H)if(!Ct.has(s.prop))return false;return true}function ve(){let s=`ssd-a-${++Lt}`,m=H.map(C=>`${C.prop}:${C.from}`).join(";"),k=H.map(C=>`${C.prop}:${C.to}`).join(";"),G=document.createElement("style");G.setAttribute("data-ssd-animate",""),G.textContent=`@keyframes ${s}{from{${m}}to{${k}}}.${s}{animation-name:${s};animation-duration:auto;animation-timing-function:${dt[a]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(G),e.classList.add(s);let $=()=>l==="x"?window.scrollX:window.scrollY,D=()=>l==="x"?window.innerWidth:window.innerHeight;return {destroy(){e.classList.remove(s),G.remove();},replay(){e.classList.remove(s),e.offsetWidth,e.classList.add(s);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(C){let Y=Math.min(1,Math.max(0,C));e.classList.remove(s);for(let J of H)e.style.setProperty(J.prop,pt(J.from,J.to,Y));},getProgress(){let C=e.getBoundingClientRect(),Y=$(),J=D(),{tStart:j,tEnd:oe}=xe({top:C.top,height:C.height},Y,J,R,z);return b(re(Y,j,oe,h))}}}if(ae())return ve();let P=0,U=0,se=0,ce=false,Z=false,g=-1,N=0,le=false,ue=NaN,Me=-1,Ie=0,Pe=()=>T?l==="x"?T.scrollLeft:T.scrollTop:l==="x"?window.scrollX:window.scrollY,me=()=>T?l==="x"?T.clientWidth:T.clientHeight:l==="x"?window.innerWidth:window.innerHeight;function fe(){let s=e.getBoundingClientRect(),m,k;if(T){let $=T.getBoundingClientRect();m=l==="x"?s.left-$.left+T.scrollLeft:s.top-$.top+T.scrollTop,k=l==="x"?s.width:s.height;}else m=l==="x"?s.left:s.top,k=l==="x"?s.width:s.height;let G=xe({top:m,height:k},Pe(),me(),R,z);P=G.tStart,U=G.tEnd;}function Ae(s){e.style.setProperty("--scroll-draw-progress",String(s));for(let m of H)e.style.setProperty(m.prop,pt(m.from,m.to,s));E?.(s);}function Oe(s){if(isNaN(ue)){ue=s;return}ue<=0&&s>0?ge?.():ue>0&&s<=0&&d?.(),ue<1&&s>=1?S?.():ue>=1&&s<1&&M?.(),ue=s;}function _(){if(!ce||Z)return;let s=performance.now(),m=Pe(),k=h;if(F!==false){let D=s-Ie,C=D>0?Math.abs(m-(Me<0?m:Me))/D:0;k=h*Math.max(.2,1+C*(typeof F=="number"?F:1)*.04);}Me=m,Ie=s;let G=U===P?0:(m-P)/(U-P);Oe(G);let $=b(re(m,P,U,k));f&&(g=Math.max(g,$),$=g),N=$,Ae($),$>=1&&!le?(le=true,W?.()):$<1&&!f&&(le=false),se=requestAnimationFrame(_);}fe();{let s=b(re(Pe(),P,U,h));f&&s>0&&(g=s),N=s,Ae(s);}let ne=new IntersectionObserver(s=>{s.forEach(m=>{ce=m.isIntersecting,ce&&!Z?se=requestAnimationFrame(_):cancelAnimationFrame(se);});},{root:T??null}),V;function B(){clearTimeout(V),V=setTimeout(fe,150);}return window.addEventListener("resize",B),window.addEventListener("orientationchange",B),ne.observe(e),Be(e,{type:"animate",getProgress:()=>N,getTrigger:()=>({tStart:P,tEnd:U})}),{destroy(){cancelAnimationFrame(se),ne.disconnect(),window.removeEventListener("resize",B),window.removeEventListener("orientationchange",B),clearTimeout(V),We(e);},replay(){g=-1,le=false,N=0,Z=false,Ae(0);},pause(){Z=true,cancelAnimationFrame(se);},resume(){Z&&(Z=false,ce&&(se=requestAnimationFrame(_)));},seek(s){let m=Math.min(1,Math.max(0,s));N=m,g=m,Z=true,cancelAnimationFrame(se),Ae(m);},getProgress(){return N}}}var _e={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Dt(e,t){if(typeof window>"u")return _e;let r=typeof e=="string"?document.querySelector(e):e;return r?gt(r,t):(process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] scrollAnimate: element not found:",e),_e)}function Ot(e,t={}){if(typeof window>"u")return _e;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] scrollParallax: element not found:",e),_e;let{speed:n=.3,axis:u="y",easing:a="linear",trigger:h,onProgress:f}=t,l=r.getBoundingClientRect(),p=u==="x"?l.width:l.height,x=n*p;return gt(r,{props:u==="x"?{transform:["translateX(0px)",`translateX(${-x}px)`]}:{transform:["translateY(0px)",`translateY(${-x}px)`]},trigger:h??{start:"top bottom",end:"bottom top"},easing:a,native:false,onProgress:f})}var Je={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Ft(e,t){if(typeof window>"u")return Je;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] scrollCounter: element not found:",e),Je;let n=r,{from:u=0,to:a,format:h,easing:f="ease-out",trigger:l={},once:p=true,decimals:x,onComplete:F}=t,E=x!==void 0?g=>g.toFixed(x):h??(g=>String(Math.round(g))),W=typeof f=="function"?f:te[f]??te["ease-out"],ge=be(l.start??"top 80%"),S=be(l.end??"top 20%");if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return n.textContent=E(a),F?.(),Je;n.textContent=E(u);let d=0,A=0,b=0,R=false,z=false,T=-1,H=0,ye=false,we=()=>window.scrollY,ae=()=>window.innerHeight;function ve(){let g=n.getBoundingClientRect(),N=xe({top:g.top,height:g.height},we(),ae(),ge,S);d=N.tStart,A=N.tEnd;}function P(g){n.textContent=E(u+(a-u)*g),n.style.setProperty("--scroll-draw-progress",String(g));}function U(){if(!R||z)return;let g=W(re(we(),d,A,1));p&&(T=Math.max(T,g),g=T),H=g,P(g),g>=1&&!ye?(ye=true,F?.()):g<1&&!p&&(ye=false),b=requestAnimationFrame(U);}ve();{let g=W(re(we(),d,A,1));p&&g>0&&(T=g),H=g,P(g);}let se=new IntersectionObserver(g=>{g.forEach(N=>{R=N.isIntersecting,R&&!z?b=requestAnimationFrame(U):cancelAnimationFrame(b);});}),ce;function Z(){clearTimeout(ce),ce=setTimeout(ve,150);}return window.addEventListener("resize",Z),window.addEventListener("orientationchange",Z),se.observe(n),Be(n,{type:"counter",getProgress:()=>H,getTrigger:()=>({tStart:d,tEnd:A})}),{destroy(){cancelAnimationFrame(b),se.disconnect(),window.removeEventListener("resize",Z),window.removeEventListener("orientationchange",Z),clearTimeout(ce),We(n);},replay(){T=-1,ye=false,H=0,z=false,P(0);},pause(){z=true,cancelAnimationFrame(b);},resume(){z&&(z=false,R&&(b=requestAnimationFrame(U)));},seek(g){let N=Math.min(1,Math.max(0,g));H=N,T=N,z=true,cancelAnimationFrame(b),P(N);},getProgress(){return H}}}var yt="http://www.w3.org/2000/svg",Nt="cinematic-photo",Ke=e=>e<0?0:e>1?1:e;function Ge(e){let t=parseFloat(e);return Number.isFinite(t)?Ke(t/100):0}function Rt(e){return te[e]??te.linear}var Ht={destroy:()=>{},getProgress:()=>0},Qe=class{constructor(t){if(typeof document>"u"){this.mount=null;return}this.mount=typeof t.wrapper=="string"?document.querySelector(t.wrapper):t.wrapper,!this.mount&&process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] Cinematic: wrapper not found:",t.wrapper);}loadStory(t){let r=this.mount;if(typeof window>"u"||!r)return Ht;r.style.position="relative",r.style.height=t.totalHeight,r.style.display="block";let n=document.createElement("div");n.setAttribute("data-cinematic-stage",""),n.style.cssText="position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:block;",r.appendChild(n);let u=[];for(let S of t.scenes){if(S.background){let d=document.createElement("img");d.id=Nt,d.src=S.background,d.alt="",d.style.cssText="position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;",n.appendChild(d);}let M=S.animations.filter(d=>d.type==="draw");if(M.length){let d=document.createElementNS(yt,"svg");d.setAttribute("viewBox",`0 0 ${t.canvas.width} ${t.canvas.height}`),d.setAttribute("preserveAspectRatio","xMidYMid meet"),d.style.cssText="position:absolute;inset:0;width:100%;height:100%;overflow:visible;",n.appendChild(d);for(let A of M){let b=document.createElementNS(yt,"path");b.id=A.target.replace(/^#/,""),b.setAttribute("d",A.d),b.setAttribute("fill","none"),b.setAttribute("stroke",A.stroke),b.setAttribute("stroke-width",String(A.strokeWidth)),b.setAttribute("stroke-linecap","round"),b.setAttribute("stroke-linejoin","round");let R=A.length||b.getTotalLength?.()||0;b.style.strokeDasharray=String(R),b.style.strokeDashoffset=String(R),d.appendChild(b),u.push({kind:"draw",el:b,start:Ge(A.start),end:Ge(A.end),ease:Rt(A.easing),length:R});}}for(let d of S.animations){if(d.type!=="fade")continue;let A=n.querySelector(d.target)??document.querySelector(d.target);A&&(A.style.opacity=String(d.from),u.push({kind:"fade",el:A,start:Ge(d.start),end:Ge(d.end),ease:te["ease-in-out"]??te.linear,from:d.from,to:d.to}));}}let a=0,h=()=>{let S=r.offsetHeight-window.innerHeight;return S<=0?r.getBoundingClientRect().top<=0?1:0:Ke(-r.getBoundingClientRect().top/S)},f=S=>{for(let M of u){let d=M.end-M.start,A=d<=0?S>=M.end?1:0:Ke((S-M.start)/d),b=M.ease(A);M.kind==="draw"?M.el.style.strokeDashoffset=String(M.length*(1-b)):M.el.style.opacity=String(M.from+(M.to-M.from)*b);}};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return f(1),{destroy:()=>{},getProgress:()=>1};let l=0,p=false,x=false,F=()=>{a=h(),f(a),p&&(l=requestAnimationFrame(F));},E=()=>{p||(p=true,l=requestAnimationFrame(F));},W=()=>{p=false,cancelAnimationFrame(l);},ge=new IntersectionObserver(S=>{for(let M of S)x=M.isIntersecting,x?E():W();},{threshold:0});return ge.observe(n),a=h(),f(a),{destroy(){W(),ge.disconnect();},getProgress:()=>a}}};function er(e,t){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let n=typeof e=="string"?document.querySelector(e):e;return n?ut(n,t):(console.warn("[svg-scroll-draw] Container not found:",e),r)}
|
|
4
|
-
export{
|
|
1
|
+
function Ft({tension:e=2.5,friction:t=2.2}={}){return r=>1-Math.cos(r*Math.PI*e)*Math.pow(1-r,t)}function vt({bounces:e=3,decay:t=.5}={}){let r=Math.max(1,Math.round(e)),n=Math.max(.01,Math.min(.99,t)),l=Math.sqrt(n),a=0,d=[];for(let f=0;f<r;f++){let E=Math.pow(l,f);d.push(E),a+=E;}let m=[0],c=0;for(let f=0;f<r;f++)c+=d[f]/a,m.push(c);return f=>{if(f<=0)return 0;if(f>=1)return 1;for(let E=0;E<r;E++)if(f<=m[E+1]){let I=(f-m[E])/(m[E+1]-m[E]);if(E===0)return I*(2-I);let T=1-Math.pow(n,E);return T+(1-T)*(2*I-1)*(2*I-1)}return 1}}function St({amplitude:e=1,period:t=.4}={}){let r=Math.max(1,e),n=Math.max(.1,t),l=r<=1?n/4:n/(2*Math.PI)*Math.asin(1/r);return a=>a<=0?0:a>=1?1:r*Math.pow(2,-10*a)*Math.sin((a-l)*(2*Math.PI)/n)+1}var J={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:vt(),elastic:St()};function $e(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 ht(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 bt(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 He(e){let t=e.tagName.toLowerCase();if(t==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),n=parseFloat(e.getAttribute("height")??"0");return 2*(r+n)}if(t==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function Nt(e,t,r){return Math.min(r,Math.max(t,e))}function ie(e,t,r,n){return r===t?0:Nt((e-t)/(r-t)*n,0,1)}function Xe(e,t,r){let n=e.getBoundingClientRect(),l=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:l,scroll:0}:{top:r==="x"?n.left:n.top,height:l,scroll:r==="x"?window.scrollX:window.scrollY}}function Oe(e,t,r,n,l){let a=ht(e.top,e.height,t,n.element)-bt(n.viewport,r),d=ht(e.top,e.height,t,l.element)-bt(l.viewport,r);return {tStart:a,tEnd:d}}function wt(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 _e(e,t,r){let n=wt(e),l=wt(t);return !n||!l?e:`rgb(${Math.round(n[0]+(l[0]-n[0])*r)},${Math.round(n[1]+(l[1]-n[1])*r)},${Math.round(n[2]+(l[2]-n[2])*r)})`}var st={sketch:{easing:"ease-in",stagger:.1,speed:.9,fade:false},reveal:{easing:"ease-out",fade:true,speed:1.2,once:true},typewriter:{easing:"linear",stagger:.05,speed:1.5},cinematic:{easing:"ease-in-out",fade:true,speed:.75},spring:{easing:"spring",speed:1.1}};var Ye=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function K(e,...t){Ye&&console.warn(`[svg-scroll-draw] ${e}`,...t);}var Ht="cubic-bezier(0.333333, 0, 0.666667, 0.333333)",_t="cubic-bezier(0.333333, 0.666667, 0.666667, 1)",Et=33;function zt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timing-function: linear(0, 1)")}function Vt(e){let t=[];for(let r=0;r<Et;r++){let n=r/(Et-1);t.push(String(Math.round(e(n)*1e5)/1e5));}return `linear(${t.join(",")})`}function Qe(e){switch(e){case "linear":return "linear";case "ease-in":return Ht;case "ease-out":return _t;case "ease-in-out":return zt()?Vt(J["ease-in-out"]):null;default:return null}}var qt=0;function Wt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")&&CSS.supports("view-timeline-name: --x")}function Bt(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?K("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&K("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Gt(e,t,r){let n=document.createElement("div");n.setAttribute("data-svg-scroll-draw-debug",""),n.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function l(){let a=r==="x"?window.scrollX:window.scrollY,d=e-a,m=t-a,c=r==="x";n.innerHTML=`
|
|
2
|
+
<div style="position:absolute;${c?`left:${d}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${d}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
|
|
3
|
+
<div style="position:absolute;${c?`left:${m}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${m}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(n),window.addEventListener("scroll",l,{passive:true}),l(),{el:n,destroy(){window.removeEventListener("scroll",l),n.remove();}}}var xt=/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,Tt=/[MmLlHhVvCcSsQqTtAaZz]/g;function jt(e,t,r){if(!Ye)return;let n=(e.match(Tt)??[]).join("").toUpperCase(),l=(t.match(Tt)??[]).join("").toUpperCase(),a=(e.match(xt)??[]).length,d=(t.match(xt)??[]).length;if(n!==l){K(`morphTo: command sequence differs (${n||"\u2205"} \u2192 ${l||"\u2205"}). Interpolation is coordinate-for-coordinate, so the result will not reach the target shape. Redraw both paths with the same commands.`,r);return}a!==d&&K(`morphTo: coordinate count differs (${a} \u2192 ${d}). Extra coordinates are ignored and missing ones hold their start value, so the result will not reach the target shape.`,r);}function it(e,t,r){let n=(t.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),l=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,a=>{let d=parseFloat(a),m=n[l++]??d;return String(+(d+(m-d)*r).toFixed(4))})}function At(e,t={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:r,...n}=t,l=r?{...st[r],...n}:n,a=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:d="path, polyline, line, polygon, rect, circle",speed:m=1,fade:c=false,easing:f="linear",trigger:E={},stagger:I=0,direction:T="forward",once:ee=false,debug:Ee=false,axis:A="y",scrollContainer:$,autoReverse:g=false,delay:S=0,strokeColor:h,strokeWidth:V,fillOpacity:F,waypoints:B,velocityScale:te=false,threshold:de=0,rootMargin:j="0px",repeat:q=0,repeatDelay:Me=0,morphTo:N,clip:ge,autoplay:Pe=false,duration:ke=1e3,native:Le=true,onProgress:b,onStart:P,onComplete:oe,onEnter:ye,onLeave:Re,onEnterBack:he,onLeaveBack:xe}=l,re=ge===true?"left":typeof ge=="string"?ge:false,ue=typeof f=="function"?f:J[f]??J.linear,be=$e(E.start??"top bottom"),Fe=$e(E.end??"bottom top"),ae=typeof $=="string"?document.querySelector($):$??null,le=Array.isArray(h)?h[0]:null,U=Array.isArray(h)?h[1]:typeof h=="string"?h:null,X=Array.isArray(V)?V[0]:null,H=Array.isArray(V)?V[1]:typeof V=="number"?V:null,ne=Array.isArray(F)?F[0]:null,W=Array.isArray(F)?F[1]:typeof F=="number"?F:null;function we(o){let i=o*100;switch(re){case "right":return `inset(0 0 0 ${100-i}%)`;case "top":return `inset(0 0 ${100-i}% 0)`;case "bottom":return `inset(${100-i}% 0 0 0)`;case "center":return `circle(${o*150}% at 50% 50%)`;default:return `inset(0 ${100-i}% 0 0)`}}let C=re?[]:Array.from(e.querySelectorAll(d)),x=[],s=[],u=0,ce=0,k=false,D=false,O=0,_=false,Y=-1,ve=-1,G=false,me=0,Te=0,Ce,tt=null;function ut(){tt?.destroy(),tt=null;}let Ie=new Set,mt=NaN,De=true,qe=-1,ft=performance.now(),Ne=NaN;function rt(){return ae?A==="x"?ae.scrollLeft:ae.scrollTop:A==="x"?window.scrollX:window.scrollY}function pt(){return ae?A==="x"?ae.clientWidth:ae.clientHeight:A==="x"?window.innerWidth:window.innerHeight}function dt(){let o=Xe(e,ae,A),i=Oe(o,o.scroll,pt(),be,Fe);u=i.tStart,ce=i.tEnd,Ee&&Ye&&(ut(),tt=Gt(u,ce,A));}function It(o,i){if(e.style.setProperty("--scroll-draw-progress",String(o)),re){let w=i==="reverse"?1-o:o;e.style.clipPath=we(w);return}C.forEach((w,Q)=>{w.style.strokeDashoffset=i==="reverse"?`${x[Q]*o}`:`${x[Q]*(1-o)}`,c&&(w.style.opacity=i==="reverse"?`${1-o}`:`${o}`),le&&U?w.style.stroke=_e(le,U,o):U&&(w.style.stroke=U),X!==null&&H!==null?w.style.strokeWidth=`${X+(H-X)*o}`:H!==null&&(w.style.strokeWidth=`${H}`),ne!==null&&W!==null?w.style.fillOpacity=`${ne+(W-ne)*o}`:W!==null&&(w.style.fillOpacity=`${W}`),N&&w.tagName.toLowerCase()==="path"&&s[Q]&&w.setAttribute("d",it(s[Q],N,o));});}function We(){if(e.style.setProperty("--scroll-draw-progress","0"),re){e.style.clipPath=we(0);return}C.forEach((o,i)=>{o.style.strokeDasharray=`${x[i]}`,o.style.strokeDashoffset=T==="reverse"?"0":`${x[i]}`,c?o.style.opacity=T==="reverse"?"1":"0":o.style.opacity="",le&&(o.style.stroke=le),X!==null&&(o.style.strokeWidth=`${X}`),ne!==null&&(o.style.fillOpacity=`${ne}`),N&&o.tagName.toLowerCase()==="path"&&s[i]&&o.setAttribute("d",s[i]);});}if(C.forEach(o=>{Bt(o);let i=He(o);x.push(i);let w=o.tagName.toLowerCase()==="path";w?s.push(o.getAttribute("d")??""):s.push(""),N&&(w?jt(s[s.length-1],N,o):K(`morphTo only applies to <path> elements \u2014 ignored on <${o.tagName}>.`,o)),a?(o.style.strokeDasharray=`${i}`,o.style.strokeDashoffset=T==="reverse"?`${i}`:"0",c&&(o.style.opacity="1"),U&&(o.style.stroke=U),H!==null&&(o.style.strokeWidth=`${H}`),W!==null&&(o.style.fillOpacity=`${W}`),N&&o.tagName.toLowerCase()==="path"&&o.setAttribute("d",N)):(o.style.strokeDasharray=`${i}`,o.style.strokeDashoffset=T==="reverse"?"0":`${i}`,c?o.style.opacity=T==="reverse"?"1":"0":o.style.opacity="",le&&(o.style.stroke=le),X!==null&&(o.style.strokeWidth=`${X}`),ne!==null&&(o.style.fillOpacity=`${ne}`));}),re){if(a)return e.style.clipPath=we(1),oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=we(0);}else if(a)return oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};let gt=typeof f=="string"?Qe(f):null;function Dt(){return !(Le===false||!Wt()||!C.length||!gt||re||A!=="y"||ae||m!==1||I!==0||ee||g||te!==false||N||B||q||S>0||b||P||oe||ye||Re||he||xe||h!=null||V!=null||F!=null||(E.start??"top bottom").trim()!=="top bottom"||(E.end??"bottom top").trim()!=="bottom top")}function Ot(){let o=++qt,i=`svg-scroll-draw-${o}`,w=`svg-scroll-draw-host-${o}`,Q=`--svg-scroll-draw-${o}`,Ae=T==="reverse"?"0":"var(--ssd-len)",Se=T==="reverse"?"var(--ssd-len)":"0",pe=`stroke-dashoffset:${Ae};`,v=`stroke-dashoffset:${Se};`;c&&(pe+=`opacity:${T==="reverse"?1:0};`,v+=`opacity:${T==="reverse"?0:1};`);let M=document.createElement("style");M.setAttribute("data-svg-scroll-draw",""),M.textContent=`@keyframes ${i}{from{${pe}}to{${v}}}.${w}{view-timeline-name:${Q};view-timeline-axis:block;}.${i}{animation-name:${i};animation-duration:auto;animation-timing-function:${gt};animation-fill-mode:both;animation-timeline:${Q};animation-range:cover 0% cover 100%;}`,document.head.appendChild(M),e.classList.add(w);function Z(p,z){p.style.setProperty("--ssd-len",String(x[z])),p.style.strokeDasharray=`${x[z]}`,p.style.strokeDashoffset="",p.style.opacity="",p.style.animationPlayState="",p.classList.add(i);}C.forEach(Z);let y=false,L=-1;function R(){if(L>=0)return L;let p=e.getBoundingClientRect(),{tStart:z,tEnd:fe}=Oe({top:p.top,height:p.height},rt(),pt(),be,Fe);return ue(ie(rt(),z,fe,m))}return {destroy(){e.classList.remove(w),C.forEach(p=>{p.classList.remove(i),p.style.removeProperty("--ssd-len"),p.style.animationPlayState="";}),M.remove();},replay(){y=false,L=-1,C.forEach(Z);},pause(){y=true,C.forEach(p=>{p.style.animationPlayState="paused";});},resume(){y&&(y=false,C.forEach(p=>{p.style.animationPlayState="running";}));},seek(p){let z=Math.min(1,Math.max(0,p));L=z,y=true,C.forEach((fe,se)=>{fe.classList.remove(i),fe.style.strokeDashoffset=T==="reverse"?`${x[se]*z}`:`${x[se]*(1-z)}`,c&&(fe.style.opacity=T==="reverse"?`${1-z}`:`${z}`);});},getProgress(){return R()},refresh(){C.forEach((p,z)=>{x[z]=He(p),p.style.setProperty("--ssd-len",String(x[z])),p.style.strokeDasharray=`${x[z]}`;});}}}if(Dt())return Ot();function Rt(){let o=Math.max(1,ke),i=0,w=0,Q=false;function Ae(y){let L=true;if(re){let R=Math.min(1,Math.max(0,y/o)),p=ue(R);me=p,e.style.setProperty("--scroll-draw-progress",String(p)),e.style.clipPath=we(T==="reverse"?1-p:p),b?.(p),R<1&&(L=false);}else C.forEach((R,p)=>{let z=p*I*o,fe=Math.min(1,Math.max(0,(y-z)/o)),se=ue(fe);R.style.strokeDashoffset=T==="reverse"?`${x[p]*se}`:`${x[p]*(1-se)}`,c&&(R.style.opacity=T==="reverse"?`${1-se}`:`${se}`),le&&U?R.style.stroke=_e(le,U,se):U&&(R.style.stroke=U),X!==null&&H!==null?R.style.strokeWidth=`${X+(H-X)*se}`:H!==null&&(R.style.strokeWidth=`${H}`),ne!==null&&W!==null?R.style.fillOpacity=`${ne+(W-ne)*se}`:W!==null&&(R.style.fillOpacity=`${W}`),N&&R.tagName.toLowerCase()==="path"&&s[p]&&R.setAttribute("d",it(s[p],N,se)),p===0&&(me=se,b?.(se),e.style.setProperty("--scroll-draw-progress",String(se))),fe<1&&(L=false);});if(B){let R=Math.min(1,Math.max(0,y/o)),p=ue(R);for(let z in B){let fe=parseFloat(z);p>=fe&&!Ie.has(fe)&&(Ie.add(fe),B[z]?.());}}return L}function Se(y){if(G)return;let L=y-i;D||(D=true,P?.());let R=Ae(L);if(R&&!k){k=true,Ae(o*(1+Math.max(0,C.length-1)*I)),oe?.(),Te<(q==="infinite"?1/0:q??0)&&(Te++,Ce=setTimeout(()=>{i=performance.now(),D=false,k=false,Ie.clear(),We(),O=requestAnimationFrame(Se);},Me));return}R||(O=requestAnimationFrame(Se));}function pe(){cancelAnimationFrame(O),clearTimeout(Ce),i=performance.now(),w=0,G=false,D=false,k=false,Te=0,Q=true,me=0,Ie.clear(),We(),O=requestAnimationFrame(Se);}let v=new IntersectionObserver(y=>{y.forEach(L=>{L.isIntersecting&&!(ee&&k)?pe():!L.isIntersecting&&!ee&&!k&&(cancelAnimationFrame(O),clearTimeout(Ce),Q=false);});},{root:ae??null,threshold:de,rootMargin:j}),M;function Z(){clearTimeout(M),M=setTimeout(()=>{C.forEach((y,L)=>{x[L]=He(y),y.style.strokeDasharray=`${x[L]}`;});},150);}return window.addEventListener("resize",Z),window.addEventListener("orientationchange",Z),S>0?setTimeout(()=>v.observe(e),S):v.observe(e),{destroy(){cancelAnimationFrame(O),clearTimeout(Ce),v.disconnect(),window.removeEventListener("resize",Z),window.removeEventListener("orientationchange",Z),clearTimeout(M);},replay(){Te=0,pe();},pause(){G||!Q||(G=true,w=performance.now()-i,cancelAnimationFrame(O));},resume(){G&&(G=false,Q=true,i=performance.now()-w,O=requestAnimationFrame(Se));},seek(y){let L=Math.min(1,Math.max(0,y));me=L,G=true,w=L*o,i=performance.now()-w,cancelAnimationFrame(O),Ae(w);},getProgress(){return me},refresh(){clearTimeout(M),C.forEach((y,L)=>{x[L]=He(y),y.style.strokeDasharray=`${x[L]}`;});}}}if(Pe)return Rt();dt();function Be(){if(!_||G)return;let o=performance.now(),i=rt();if(!De&&te===false&&i===mt){O=requestAnimationFrame(Be);return}De=false,mt=i;let w=m;if(te!==false){let v=o-ft,M=v>0?Math.abs(i-(qe<0?i:qe))/v:0;w=m*Math.max(.2,1+M*(typeof te=="number"?te:1)*.04);}qe=i,ft=o;let Q=g?ve===-1||i>=ve?"forward":"reverse":T;ve=i;let Ae=ce-u,Se=true,pe=Ae===0?0:(i-u)/Ae;if(isNaN(Ne)||(Ne<=0&&pe>0?ye?.():Ne>0&&pe<=0&&xe?.(),Ne<1&&pe>=1?Re?.():Ne>=1&&pe<1&&he?.()),Ne=pe,re){let v=ue(ie(i,u,ce,w));ee&&!g&&(Y=Math.max(Y,v),v=Y),me=v,e.style.setProperty("--scroll-draw-progress",String(v));let M=Q==="reverse"?1-v:v;e.style.clipPath=we(M),b?.(v),!D&&ie(i,u,ce,w)>0&&(D=true,P?.()),v>=1&&!k?(k=true,oe?.(),Te<(q==="infinite"?1/0:q??0)&&(Te++,Ce=setTimeout(()=>{Y=-1,D=false,k=false,e.style.clipPath=we(0);},Me))):v<1&&!ee&&(k=false),O=requestAnimationFrame(Be);return}if(C.forEach((v,M)=>{let Z=M*I*Ae,y=ue(ie(i,u+Z,ce+Z,w));ee&&!g&&(Y=Math.max(Y,y),y=Y),me=y,v.style.strokeDashoffset=Q==="reverse"?`${x[M]*y}`:`${x[M]*(1-y)}`,c&&(v.style.opacity=Q==="reverse"?`${1-y}`:`${y}`),le&&U?v.style.stroke=_e(le,U,y):U&&(v.style.stroke=U),X!==null&&H!==null?v.style.strokeWidth=`${X+(H-X)*y}`:H!==null&&(v.style.strokeWidth=`${H}`),ne!==null&&W!==null?v.style.fillOpacity=`${ne+(W-ne)*y}`:W!==null&&(v.style.fillOpacity=`${W}`),N&&v.tagName.toLowerCase()==="path"&&s[M]&&v.setAttribute("d",it(s[M],N,y)),M===0&&(b?.(y),e.style.setProperty("--scroll-draw-progress",String(y))),y<1&&(Se=false);}),B){let v=ue(ie(i,u,ce,w));for(let M in B){let Z=parseFloat(M);v>=Z&&!Ie.has(Z)&&(Ie.add(Z),B[M]?.());}}!D&&ie(i,u,ce,w)>0&&(D=true,P?.()),Se&&!k?(k=true,oe?.(),Te<(q==="infinite"?1/0:q??0)&&(Te++,Ce=setTimeout(()=>{Y=-1,D=false,k=false,Ie.clear(),We(),De=true;},Me))):!Se&&!ee&&(k=false),O=requestAnimationFrame(Be);}let nt=false;function Ge(){nt||(nt=true,O=requestAnimationFrame(function(){Be();}));}function je(){nt=false,cancelAnimationFrame(O);}let ot=new IntersectionObserver(o=>{o.forEach(i=>{_=i.isIntersecting,_&&!G?(De=true,Ge()):je();});},{root:ae??null,threshold:de,rootMargin:j});function yt(){C.forEach((o,i)=>{x[i]=He(o),o.style.strokeDasharray=`${x[i]}`;}),dt(),De=true;}let Ue;function ze(){clearTimeout(Ue),Ue=setTimeout(yt,150);}window.addEventListener("resize",ze),window.addEventListener("orientationchange",ze);let Ve;return typeof ResizeObserver<"u"&&(Ve=new ResizeObserver(()=>ze()),Ve.observe(document.body),Ve.observe(document.documentElement),Ve.observe(e)),S>0?setTimeout(()=>ot.observe(e),S):ot.observe(e),{destroy(){cancelAnimationFrame(O),clearTimeout(Ce),je(),ot.disconnect(),Ve?.disconnect(),window.removeEventListener("resize",ze),window.removeEventListener("orientationchange",ze),clearTimeout(Ue),ut();},replay(){Y=-1,ve=-1,qe=-1,D=false,k=false,Te=0,G=false,me=0,Ie.clear(),clearTimeout(Ce),We(),De=true,_&&Ge();},pause(){G=true,je();},resume(){G&&(G=false,De=true,_&&Ge());},seek(o){let i=Math.min(1,Math.max(0,o));me=i,Y=i,G=true,je(),It(i,T),De=true;},getProgress(){return me},refresh(){clearTimeout(Ue),yt(),_&&!G&&Ge();}}}var $t=new Map;function Ze(e,t){$t.set(e,t);}function Je(e){$t.delete(e);}function Ut(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function Mt(e){let t=[],r=/([\w]+)\(([^)]*)\)/g,n;for(;(n=r.exec(e))!==null;){let l=[],a=[],d=n[2].trim();if(d)for(let m of d.split(/[\s,]+/)){let c=m.match(/^([-+]?[\d.eE]+)(.*)$/);l.push(c?parseFloat(c[1]):0),a.push(c?c[2]:"");}t.push({fn:n[1],nums:l,units:a});}return t}function Xt(e,t,r){let n=Mt(e),l=Mt(t);return n.length===0||n.length!==l.length?r<1?e:t:n.map((a,d)=>{let m=l[d];return a.fn!==m.fn||a.nums.length!==m.nums.length?r<1?`${a.fn}(${a.nums.map((c,f)=>`${c}${a.units[f]}`).join(", ")})`:`${m.fn}(${m.nums.map((c,f)=>`${c}${m.units[f]}`).join(", ")})`:`${a.fn}(${a.nums.map((c,f)=>`${c+(m.nums[f]-c)*r}${a.units[f]}`).join(", ")})`}).join(" ")}function Pt(e,t,r){if(typeof e=="number"&&typeof t=="number")return String(e+(t-e)*r);let n=String(e),l=String(t);if(Ut(n))return _e(n,l,r);if(n.includes("("))return Xt(n,l,r);let a=n.match(/^([-+]?[\d.]+)(.*)$/),d=l.match(/^([-+]?[\d.]+)(.*)$/);if(a&&d){let m=parseFloat(a[1]),c=parseFloat(d[1]);return `${m+(c-m)*r}${a[2]||d[2]}`}return r<1?n:l}function Yt(e){return e.replace(/([A-Z])/g,t=>`-${t.toLowerCase()}`)}var Qt=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),Zt=0,kt="--scroll-draw-progress";function Jt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function Lt(e,t){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let{props:n,trigger:l={},easing:a="ease-out",speed:d=1,once:m=false,axis:c="y",scrollContainer:f,native:E=true,velocityScale:I=false,respectReducedMotion:T=true,triggerElement:ee,onProgress:Ee,onComplete:A,onEnter:$,onLeave:g,onEnterBack:S,onLeaveBack:h}=t,V=T&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,F=typeof a=="function"?a:J[a]??J["ease-out"],B=$e(l.start??"top bottom"),te=$e(l.end??"bottom top"),de=ee??e,j=typeof f=="string"?document.querySelector(f):f??null,q=Object.entries(n).map(([s,u])=>({prop:Yt(s),from:Array.isArray(u)?u[0]:"",to:Array.isArray(u)?u[1]:u}));function Me(){let s=window.getComputedStyle(e);for(let u of q)u.from===""&&(u.from=s.getPropertyValue(u.prop).trim()||"0");}function N(){for(let s of q)e.style.setProperty(s.prop,String(s.to));}let ge=new Map;for(let s of [...q.map(u=>u.prop),kt])ge.set(s,e.style.getPropertyValue(s));function Pe(){for(let[s,u]of ge)u?e.style.setProperty(s,u):e.style.removeProperty(s);}if(V)return N(),A?.(),{...r,destroy:Pe,getProgress:()=>1};Me();let ke=typeof a=="string"?Qe(a):null;function Le(){if(!E||!Jt()||!ke||c!=="y"||j||de!==e||m||d!==1||Ee||A||$||g||S||h||I!==false||(l.start??"top bottom").trim()!=="top bottom"||(l.end??"bottom top").trim()!=="bottom top")return false;for(let s of q)if(!Qt.has(s.prop))return false;return true}function b(){let s=`ssd-a-${++Zt}`,u=q.map(_=>`${_.prop}:${_.from}`).join(";"),ce=q.map(_=>`${_.prop}:${_.to}`).join(";"),k=document.createElement("style");k.setAttribute("data-ssd-animate",""),k.textContent=`@keyframes ${s}{from{${u}}to{${ce}}}.${s}{animation-name:${s};animation-duration:auto;animation-timing-function:${ke};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(k),e.classList.add(s);let D=()=>c==="x"?window.scrollX:window.scrollY,O=()=>c==="x"?window.innerWidth:window.innerHeight;return {destroy(){e.classList.remove(s),k.remove(),e.style.animationPlayState="",Pe();},replay(){e.classList.remove(s),e.offsetWidth,e.classList.add(s);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(_){let Y=Math.min(1,Math.max(0,_));e.classList.remove(s);for(let ve of q)e.style.setProperty(ve.prop,Pt(ve.from,ve.to,Y));},getProgress(){let _=e.getBoundingClientRect(),Y=D(),ve=O(),{tStart:G,tEnd:me}=Oe({top:_.top,height:_.height},Y,ve,B,te);return F(ie(Y,G,me,d))}}}if(Le())return b();let P=0,oe=0,ye=0,Re=false,he=false,xe=-1,re=0,ue=false,be=NaN,Fe=-1,ae=0,le=()=>j?c==="x"?j.scrollLeft:j.scrollTop:c==="x"?window.scrollX:window.scrollY,U=()=>j?c==="x"?j.clientWidth:j.clientHeight:c==="x"?window.innerWidth:window.innerHeight;function X(){let s=Xe(de,j,c),u=Oe(s,s.scroll,U(),B,te);P=u.tStart,oe=u.tEnd;}function H(s){e.style.setProperty(kt,String(s));for(let u of q)e.style.setProperty(u.prop,Pt(u.from,u.to,s));Ee?.(s);}function ne(s){if(isNaN(be)){be=s;return}be<=0&&s>0?$?.():be>0&&s<=0&&h?.(),be<1&&s>=1?g?.():be>=1&&s<1&&S?.(),be=s;}function W(){if(!Re||he)return;let s=performance.now(),u=le(),ce=d;if(I!==false){let O=s-ae,_=O>0?Math.abs(u-(Fe<0?u:Fe))/O:0;ce=d*Math.max(.2,1+_*(typeof I=="number"?I:1)*.04);}Fe=u,ae=s;let k=oe===P?0:(u-P)/(oe-P);ne(k);let D=F(ie(u,P,oe,ce));m&&(xe=Math.max(xe,D),D=xe),re=D,H(D),D>=1&&!ue?(ue=true,A?.()):D<1&&!m&&(ue=false),ye=requestAnimationFrame(W);}X(),oe===P&&K("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 s=F(ie(le(),P,oe,d));m&&s>0&&(xe=s),re=s,H(s);}let we=new IntersectionObserver(s=>{s.forEach(u=>{Re=u.isIntersecting,Re&&!he?ye=requestAnimationFrame(W):cancelAnimationFrame(ye);});},{root:j??null}),C;function x(){clearTimeout(C),C=setTimeout(X,150);}return window.addEventListener("resize",x),window.addEventListener("orientationchange",x),we.observe(e),Ze(e,{type:"animate",getProgress:()=>re,getTrigger:()=>({tStart:P,tEnd:oe})}),{destroy(){cancelAnimationFrame(ye),we.disconnect(),window.removeEventListener("resize",x),window.removeEventListener("orientationchange",x),clearTimeout(C),Pe(),Je(e);},replay(){xe=-1,ue=false,re=0,he=false,H(0);},pause(){he=true,cancelAnimationFrame(ye);},resume(){he&&(he=false,Re&&(ye=requestAnimationFrame(W)));},seek(s){let u=Math.min(1,Math.max(0,s));re=u,xe=u,he=true,cancelAnimationFrame(ye),H(u);},getProgress(){return re}}}var Ke={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Kt(e,t){if(typeof window>"u")return Ke;let r=typeof e=="string"?document.querySelector(e):e;return r?Lt(r,t):(K("scrollAnimate: element not found:",e),Ke)}function er(e,t={}){if(typeof window>"u")return Ke;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return K("scrollParallax: element not found:",e),Ke;let{speed:n=.3,axis:l="y",easing:a="linear",trigger:d,onProgress:m}=t,c=r.getBoundingClientRect(),f=l==="x"?c.width:c.height,E=n*f;return Lt(r,{props:l==="x"?{transform:["translateX(0px)",`translateX(${-E}px)`]}:{transform:["translateY(0px)",`translateY(${-E}px)`]},trigger:d??{start:"top bottom",end:"bottom top"},easing:a,native:false,onProgress:m})}var at={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function tr(e,t){if(typeof window>"u")return at;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return K("scrollCounter: element not found:",e),at;let n=r,{from:l=0,to:a,format:d,easing:m="ease-out",trigger:c={},once:f=true,decimals:E,onComplete:I}=t,T=E!==void 0?b=>b.toFixed(E):d??(b=>String(Math.round(b))),ee=typeof m=="function"?m:J[m]??J["ease-out"],Ee=$e(c.start??"top 80%"),A=$e(c.end??"top 20%");if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return n.textContent=T(a),I?.(),at;let g=0,S=0,h=0,V=false,F=false,B=-1,te=0,de=false,j=()=>window.scrollY,q=()=>window.innerHeight;function Me(){let b=n.getBoundingClientRect(),P=Oe({top:b.top,height:b.height},j(),q(),Ee,A);g=P.tStart,S=P.tEnd;}function N(b){n.textContent=T(l+(a-l)*b),n.style.setProperty("--scroll-draw-progress",String(b));}function ge(){if(!V||F)return;let b=ee(ie(j(),g,S,1));f&&(B=Math.max(B,b),b=B),te=b,N(b),b>=1&&!de?(de=true,I?.()):b<1&&!f&&(de=false),h=requestAnimationFrame(ge);}Me();{let b=ee(ie(j(),g,S,1));f&&b>0&&(B=b),te=b,N(b);}let Pe=new IntersectionObserver(b=>{b.forEach(P=>{V=P.isIntersecting,V&&!F?h=requestAnimationFrame(ge):cancelAnimationFrame(h);});}),ke;function Le(){clearTimeout(ke),ke=setTimeout(Me,150);}return window.addEventListener("resize",Le),window.addEventListener("orientationchange",Le),Pe.observe(n),Ze(n,{type:"counter",getProgress:()=>te,getTrigger:()=>({tStart:g,tEnd:S})}),{destroy(){cancelAnimationFrame(h),Pe.disconnect(),window.removeEventListener("resize",Le),window.removeEventListener("orientationchange",Le),clearTimeout(ke),Je(n);},replay(){B=-1,de=false,te=0,F=false,N(0);},pause(){F=true,cancelAnimationFrame(h);},resume(){F&&(F=false,V&&(h=requestAnimationFrame(ge)));},seek(b){let P=Math.min(1,Math.max(0,b));te=P,B=P,F=true,cancelAnimationFrame(h),N(P);},getProgress(){return te}}}var Ct="http://www.w3.org/2000/svg",rr="cinematic-photo",lt=e=>e<0?0:e>1?1:e;function et(e){let t=parseFloat(e);return Number.isFinite(t)?lt(t/100):0}function nr(e){return J[e]??J.linear}var or={destroy:()=>{},getProgress:()=>0},ct=class{constructor(t){if(typeof document>"u"){this.mount=null;return}this.mount=typeof t.wrapper=="string"?document.querySelector(t.wrapper):t.wrapper,this.mount||K("Cinematic: wrapper not found:",t.wrapper);}loadStory(t){let r=this.mount;if(typeof window>"u"||!r)return or;r.style.position="relative",r.style.height=t.totalHeight,r.style.display="block";let n=document.createElement("div");n.setAttribute("data-cinematic-stage",""),n.style.cssText="position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:block;",r.appendChild(n);let l=[];for(let A of t.scenes){if(A.background){let g=document.createElement("img");g.id=rr,g.src=A.background,g.alt="",g.style.cssText="position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;",n.appendChild(g);}let $=A.animations.filter(g=>g.type==="draw");if($.length){let g=document.createElementNS(Ct,"svg");g.setAttribute("viewBox",`0 0 ${t.canvas.width} ${t.canvas.height}`),g.setAttribute("preserveAspectRatio","xMidYMid meet"),g.style.cssText="position:absolute;inset:0;width:100%;height:100%;overflow:visible;",n.appendChild(g);for(let S of $){let h=document.createElementNS(Ct,"path");h.id=S.target.replace(/^#/,""),h.setAttribute("d",S.d),h.setAttribute("fill","none"),h.setAttribute("stroke",S.stroke),h.setAttribute("stroke-width",String(S.strokeWidth)),h.setAttribute("stroke-linecap","round"),h.setAttribute("stroke-linejoin","round");let V=S.length||h.getTotalLength?.()||0;h.style.strokeDasharray=String(V),h.style.strokeDashoffset=String(V),g.appendChild(h),l.push({kind:"draw",el:h,start:et(S.start),end:et(S.end),ease:nr(S.easing),length:V});}}for(let g of A.animations){if(g.type!=="fade")continue;let S=n.querySelector(g.target)??document.querySelector(g.target);S&&(S.style.opacity=String(g.from),l.push({kind:"fade",el:S,start:et(g.start),end:et(g.end),ease:J["ease-in-out"]??J.linear,from:g.from,to:g.to}));}}let a=0,d=()=>{let A=r.offsetHeight-window.innerHeight;return A<=0?r.getBoundingClientRect().top<=0?1:0:lt(-r.getBoundingClientRect().top/A)},m=A=>{for(let $ of l){let g=$.end-$.start,S=g<=0?A>=$.end?1:0:lt((A-$.start)/g),h=$.ease(S);$.kind==="draw"?$.el.style.strokeDashoffset=String($.length*(1-h)):$.el.style.opacity=String($.from+($.to-$.from)*h);}};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return m(1),{destroy:()=>{},getProgress:()=>1};let c=0,f=false,E=false,I=()=>{a=d(),m(a),f&&(c=requestAnimationFrame(I));},T=()=>{f||(f=true,c=requestAnimationFrame(I));},ee=()=>{f=false,cancelAnimationFrame(c);},Ee=new IntersectionObserver(A=>{for(let $ of A)E=$.isIntersecting,E?T():ee();},{threshold:0});return Ee.observe(n),a=d(),m(a),{destroy(){ee(),Ee.disconnect();},getProgress:()=>a}}};function Lr(e,t){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let n=typeof e=="string"?document.querySelector(e):e;return n?At(n,t):(K("Container not found:",e),r)}
|
|
4
|
+
export{ct as Cinematic,st as PRESETS,vt as createBounce,St as createElastic,Ft as createSpring,Kt as scrollAnimate,tr as scrollCounter,Lr as scrollDraw,er as scrollParallax};
|