svg-scroll-draw 2.23.1 → 2.23.4
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/README.md +18 -19
- package/dist/angular/index.cjs +3 -3
- package/dist/angular/index.mjs +1 -1
- package/dist/astro/index.cjs +2 -2
- package/dist/astro/index.mjs +1 -1
- package/dist/cdn/svg-scroll-draw.dev.global.js +140 -176
- package/dist/cdn/svg-scroll-draw.global.js +3 -3
- package/dist/chunk-6TWFLRUB.mjs +3 -0
- package/dist/{chunk-OTDD2ROH.mjs → chunk-DSFD227B.mjs} +1 -1
- package/dist/chunk-I73SOXBN.mjs +1 -0
- package/dist/chunk-NLPSVYFP.mjs +1 -0
- package/dist/chunk-OPXWNJBG.mjs +1 -0
- package/dist/chunk-QFSTKVA3.mjs +1 -0
- package/dist/chunk-UPWWULKI.mjs +1 -0
- package/dist/chunk-XC5NR2MU.mjs +1 -0
- package/dist/{chunk-GVBO5GRD.mjs → chunk-XTPAW6XR.mjs} +1 -1
- package/dist/{chunk-VMUJMXKO.mjs → chunk-ZNCZYV3Q.mjs} +1 -1
- package/dist/group/index.cjs +2 -2
- package/dist/group/index.d.mts +4 -2
- package/dist/group/index.d.ts +4 -2
- package/dist/group/index.mjs +1 -1
- package/dist/horizontal/index.cjs +1 -1
- package/dist/horizontal/index.d.mts +10 -7
- package/dist/horizontal/index.d.ts +10 -7
- package/dist/horizontal/index.mjs +1 -1
- package/dist/index.cjs +4 -4
- package/dist/index.d.mts +3 -2
- package/dist/index.d.ts +3 -2
- package/dist/index.mjs +1 -1
- package/dist/nuxt/index.cjs +3 -3
- package/dist/nuxt/index.mjs +1 -1
- package/dist/progress/index.cjs +1 -1
- package/dist/progress/index.mjs +1 -1
- package/dist/react/index.cjs +3 -3
- package/dist/react/index.d.mts +3 -1
- package/dist/react/index.d.ts +3 -1
- package/dist/react/index.mjs +1 -1
- package/dist/reveal/index.cjs +1 -1
- package/dist/reveal/index.d.mts +9 -3
- package/dist/reveal/index.d.ts +9 -3
- package/dist/reveal/index.mjs +1 -1
- package/dist/snap/index.cjs +1 -1
- package/dist/snap/index.mjs +1 -1
- package/dist/solid/index.cjs +3 -3
- package/dist/solid/index.mjs +1 -1
- package/dist/svelte/index.cjs +3 -3
- package/dist/svelte/index.mjs +1 -1
- package/dist/text/index.cjs +1 -1
- package/dist/text/index.mjs +1 -1
- package/dist/timeline/index.cjs +1 -1
- package/dist/timeline/index.mjs +1 -1
- package/dist/video/index.cjs +1 -1
- package/dist/video/index.mjs +1 -1
- package/dist/vue/index.cjs +3 -3
- package/dist/vue/index.mjs +1 -1
- package/dist/web-component/index.cjs +3 -3
- package/dist/web-component/index.mjs +1 -1
- package/package.json +1 -1
- package/dist/chunk-DY5JCXVR.mjs +0 -1
- package/dist/chunk-HX4SP5WN.mjs +0 -3
- package/dist/chunk-KV3WCPQ5.mjs +0 -1
- package/dist/chunk-LTCJVVSC.mjs +0 -1
- package/dist/chunk-WXUOF4NM.mjs +0 -1
- package/dist/chunk-YWKPTYSG.mjs +0 -1
- package/dist/chunk-YZV4Z3EQ.mjs +0 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
"use strict";var SvgScrollDraw=(()=>{var
|
|
2
|
-
<div style="position:absolute;${
|
|
3
|
-
<div style="position:absolute;${u?`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",s,{passive:!0}),s(),{el:n,destroy(){window.removeEventListener("scroll",s),n.remove()}}}var Qt=/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,Yt=/[MmLlHhVvCcSsQqTtAaZz]/g;function Mr(e,r,t){if(!!1)return;let n=(e.match(Yt)??[]).join("").toUpperCase(),s=(r.match(Yt)??[]).join("").toUpperCase(),i=(e.match(Qt)??[]).length,c=(r.match(Qt)??[]).length;if(n!==s){Y(`morphTo: command sequence differs (${n||"\u2205"} \u2192 ${s||"\u2205"}). Interpolation is coordinate-for-coordinate, so the result will not reach the target shape. Redraw both paths with the same commands.`,t);return}i!==c&&Y(`morphTo: coordinate count differs (${i} \u2192 ${c}). Extra coordinates are ignored and missing ones hold their start value, so the result will not reach the target shape.`,t)}function St(e,r,t){let n=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),s=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,i=>{let c=parseFloat(i),f=n[s++]??c;return String(+(c+(f-c)*t).toFixed(4))})}function ct(e,r={}){return typeof window>"u"?{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0}:Ge(r,(t,n)=>Lr(e,t,n))}function Lr(e,r,t){let{preset:n,...s}=r,i=n?{...ot[n],...s}:s,{selector:c="path, polyline, line, polygon, rect, circle",speed:f=1,fade:u=!1,easing:p="linear",trigger:S={},stagger:P=0,direction:x="forward",once:U=!1,debug:pe=!1,axis:F="y",scrollContainer:T,autoReverse:M=!1,delay:d=0,strokeColor:E,strokeWidth:w,fillOpacity:I,waypoints:z,velocityScale:N=!1,threshold:X=0,rootMargin:_e="0px",repeat:le=0,repeatDelay:ce=0,morphTo:H,clip:xe,autoplay:Ne=!1,duration:Te=1e3,native:ie=!0,onProgress:g,onStart:k,onComplete:de,onEnter:be,onLeave:Ae,onEnterBack:Me,onLeaveBack:He}=i,Z=xe===!0?"left":typeof xe=="string"?xe:!1,ge=typeof p=="function"?p:te[p]??te.linear,je=$e(S.start??"top bottom"),Qe=$e(S.end??"bottom top"),ae=typeof T=="string"?document.querySelector(T):T??null,J=Array.isArray(E)?E[0]:null,j=Array.isArray(E)?E[1]:typeof E=="string"?E:null,Q=Array.isArray(w)?w[0]:null,W=Array.isArray(w)?w[1]:typeof w=="number"?w:null,re=Array.isArray(I)?I[0]:null,G=Array.isArray(I)?I[1]:typeof I=="number"?I:null;function we(o){let l=o*100;switch(Z){case"right":return`inset(0 0 0 ${100-l}%)`;case"top":return`inset(0 0 ${100-l}% 0)`;case"bottom":return`inset(${100-l}% 0 0 0)`;case"center":return`circle(${o*150}% at 50% 50%)`;default:return`inset(0 ${100-l}% 0 0)`}}let D=Z?[]:Array.from(e.querySelectorAll(c)),L=[],ne=[],a=0,m=0,ye=P,ue=0,A=!1,C=!1,_=0,Ce=!1,R=-1,Le=[],De=-1,K=!1,ve=0,Pe=0,Oe,pt=null;function Lt(){pt?.destroy(),pt=null}let Ie=new Set,Pt=NaN,Re=!0,Je=-1,$t=performance.now(),Ve=NaN;function Ye(){return ae?F==="x"?ae.scrollLeft:ae.scrollTop:F==="x"?window.scrollX:window.scrollY}function kt(){return ae?F==="x"?ae.clientWidth:ae.clientHeight:F==="x"?window.innerWidth:window.innerHeight}function Ct(){let o=nt(e,ae,F);return Fe(o,o.scroll,kt(),je,Qe)}function sr(){let o=m-a,l=D.length-1,h=ae??document.documentElement,q=F==="x"?"Width":"Height";if(ye=P,P>0&&l>0&&o>0){let me=h[`scroll${q}`]-h[`client${q}`]-1-a-o/f;me>=0&&(ye=Math.min(P,me/(l*o)))}ue=m+l*ye*o}function Dt(){({tStart:a,tEnd:m}=Ct()),sr(),pe&&!1&&(Lt(),pt=Ar(a,m,F))}function dt(o,l=Ct){ke(e,{type:"draw",getProgress:()=>o.getProgress(),getTrigger:l});let h=o.destroy;return o.destroy=()=>{h.call(o),Se(e)},o}function ir(o,l){if(e.style.setProperty("--scroll-draw-progress",String(o)),Z){let h=l==="reverse"?1-o:o;e.style.clipPath=we(h);return}D.forEach((h,q)=>{h.style.strokeDashoffset=l==="reverse"?`${L[q]*o}`:`${L[q]*(1-o)}`,u&&(h.style.opacity=l==="reverse"?`${1-o}`:`${o}`),J&&j?h.style.stroke=qe(J,j,o):j&&(h.style.stroke=j),Q!==null&&W!==null?h.style.strokeWidth=`${Q+(W-Q)*o}`:W!==null&&(h.style.strokeWidth=`${W}`),re!==null&&G!==null?h.style.fillOpacity=`${re+(G-re)*o}`:G!==null&&(h.style.fillOpacity=`${G}`),H&&h.tagName.toLowerCase()==="path"&&ne[q]&&h.setAttribute("d",St(ne[q],H,o))})}function Ke(){if(e.style.setProperty("--scroll-draw-progress","0"),Z){e.style.clipPath=we(0);return}D.forEach((o,l)=>{o.style.strokeDasharray=`${L[l]}`,o.style.strokeDashoffset=x==="reverse"?"0":`${L[l]}`,u?o.style.opacity=x==="reverse"?"1":"0":o.style.opacity="",J&&(o.style.stroke=J),Q!==null&&(o.style.strokeWidth=`${Q}`),re!==null&&(o.style.fillOpacity=`${re}`),H&&o.tagName.toLowerCase()==="path"&&ne[l]&&o.setAttribute("d",ne[l])})}if(D.forEach(o=>{Tr(o);let l=We(o);L.push(l);let h=o.tagName.toLowerCase()==="path";h?ne.push(o.getAttribute("d")??""):ne.push(""),H&&(h?Mr(ne[ne.length-1],H,o):Y(`morphTo only applies to <path> elements \u2014 ignored on <${o.tagName}>.`,o)),t?(o.style.strokeDasharray=`${l}`,o.style.strokeDashoffset=x==="reverse"?`${l}`:"0",u&&(o.style.opacity="1"),j&&(o.style.stroke=j),W!==null&&(o.style.strokeWidth=`${W}`),G!==null&&(o.style.fillOpacity=`${G}`),H&&o.tagName.toLowerCase()==="path"&&o.setAttribute("d",H)):(o.style.strokeDasharray=`${l}`,o.style.strokeDashoffset=x==="reverse"?"0":`${l}`,u?o.style.opacity=x==="reverse"?"1":"0":o.style.opacity="",J&&(o.style.stroke=J),Q!==null&&(o.style.strokeWidth=`${Q}`),re!==null&&(o.style.fillOpacity=`${re}`))}),Z){if(t)return e.style.clipPath=we(1),de?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=we(0)}else if(t)return de?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};let Ot=typeof p=="string"?st(p):null;function ar(){return!(ie===!1||!xr()||!D.length||!Ot||Z||F!=="y"||ae||f!==1||P!==0||U||M||N!==!1||H||z||le||d>0||g||k||de||be||Ae||Me||He||E!=null||w!=null||I!=null||(S.start??"top bottom").trim()!=="top bottom"||(S.end??"bottom top").trim()!=="bottom top")}function lr(){let o=++Sr,l=`svg-scroll-draw-${o}`,h=`svg-scroll-draw-host-${o}`,q=`--svg-scroll-draw-${o}`,me=x==="reverse"?"0":"var(--ssd-len)",Ee=x==="reverse"?"var(--ssd-len)":"0",he=`stroke-dashoffset:${me};`,v=`stroke-dashoffset:${Ee};`;u&&(he+=`opacity:${x==="reverse"?1:0};`,v+=`opacity:${x==="reverse"?0:1};`);let $=document.createElement("style");$.setAttribute("data-svg-scroll-draw",""),$.textContent=`@keyframes ${l}{from{${he}}to{${v}}}.${h}{view-timeline-name:${q};view-timeline-axis:block;}.${l}{animation-name:${l};animation-duration:auto;animation-timing-function:${Ot};animation-fill-mode:both;animation-timeline:${q};animation-range:cover 0% cover 100%;}`,document.head.appendChild($),e.classList.add(h);function ee(y,B){y.style.setProperty("--ssd-len",String(L[B])),y.style.strokeDasharray=`${L[B]}`,y.style.strokeDashoffset="",y.style.opacity="",y.style.animationPlayState="",y.classList.add(l)}D.forEach(ee);let b=!1,O=-1;function V(){if(O>=0)return O;let y=e.getBoundingClientRect(),{tStart:B,tEnd:fe}=Fe({top:y.top,height:y.height},Ye(),kt(),je,Qe);return ge(se(Ye(),B,fe,f))}return{destroy(){e.classList.remove(h),D.forEach(y=>{y.classList.remove(l),y.style.removeProperty("--ssd-len"),y.style.animationPlayState=""}),$.remove()},replay(){b=!1,O=-1,D.forEach(ee)},pause(){b=!0,D.forEach(y=>{y.style.animationPlayState="paused"})},resume(){b&&(b=!1,D.forEach(y=>{y.style.animationPlayState="running"}))},seek(y){let B=Math.min(1,Math.max(0,y));O=B,b=!0,D.forEach((fe,oe)=>{fe.classList.remove(l),fe.style.strokeDashoffset=x==="reverse"?`${L[oe]*B}`:`${L[oe]*(1-B)}`,u&&(fe.style.opacity=x==="reverse"?`${1-B}`:`${B}`)})},getProgress(){return V()},refresh(){D.forEach((y,B)=>{L[B]=We(y),y.style.setProperty("--ssd-len",String(L[B])),y.style.strokeDasharray=`${L[B]}`})}}}if(ar())return dt(lr());function cr(){let o=Math.max(1,Te),l=0,h=0,q=!1;function me(b){let O=!0;if(Z){let V=Math.min(1,Math.max(0,b/o)),y=ge(V);ve=y,e.style.setProperty("--scroll-draw-progress",String(y)),e.style.clipPath=we(x==="reverse"?1-y:y),g?.(y),V<1&&(O=!1)}else D.forEach((V,y)=>{let B=y*P*o,fe=Math.min(1,Math.max(0,(b-B)/o)),oe=ge(fe);V.style.strokeDashoffset=x==="reverse"?`${L[y]*oe}`:`${L[y]*(1-oe)}`,u&&(V.style.opacity=x==="reverse"?`${1-oe}`:`${oe}`),J&&j?V.style.stroke=qe(J,j,oe):j&&(V.style.stroke=j),Q!==null&&W!==null?V.style.strokeWidth=`${Q+(W-Q)*oe}`:W!==null&&(V.style.strokeWidth=`${W}`),re!==null&&G!==null?V.style.fillOpacity=`${re+(G-re)*oe}`:G!==null&&(V.style.fillOpacity=`${G}`),H&&V.tagName.toLowerCase()==="path"&&ne[y]&&V.setAttribute("d",St(ne[y],H,oe)),y===0&&(ve=oe,g?.(oe),e.style.setProperty("--scroll-draw-progress",String(oe))),fe<1&&(O=!1)});if(z){let V=Math.min(1,Math.max(0,b/o)),y=ge(V);for(let B in z){let fe=parseFloat(B);y>=fe&&!Ie.has(fe)&&(Ie.add(fe),z[B]?.())}}return O}function Ee(b){if(K)return;let O=b-l;C||(C=!0,k?.());let V=me(O);if(V&&!A){A=!0,me(o*(1+Math.max(0,D.length-1)*P)),de?.(),Pe<(le==="infinite"?1/0:le??0)&&(Pe++,Oe=setTimeout(()=>{l=performance.now(),C=!1,A=!1,Ie.clear(),Ke(),_=requestAnimationFrame(Ee)},ce));return}V||(_=requestAnimationFrame(Ee))}function he(){cancelAnimationFrame(_),clearTimeout(Oe),l=performance.now(),h=0,K=!1,C=!1,A=!1,Pe=0,q=!0,ve=0,Ie.clear(),Ke(),_=requestAnimationFrame(Ee)}let v=new IntersectionObserver(b=>{b.forEach(O=>{O.isIntersecting&&!(U&&A)?he():!O.isIntersecting&&!U&&!A&&(cancelAnimationFrame(_),clearTimeout(Oe),q=!1)})},{root:ae??null,threshold:X,rootMargin:_e}),$;function ee(){clearTimeout($),$=setTimeout(()=>{D.forEach((b,O)=>{L[O]=We(b),b.style.strokeDasharray=`${L[O]}`})},150)}return window.addEventListener("resize",ee),window.addEventListener("orientationchange",ee),d>0?setTimeout(()=>v.observe(e),d):v.observe(e),{destroy(){cancelAnimationFrame(_),clearTimeout(Oe),v.disconnect(),window.removeEventListener("resize",ee),window.removeEventListener("orientationchange",ee),clearTimeout($)},replay(){Pe=0,he()},pause(){K||!q||(K=!0,h=performance.now()-l,cancelAnimationFrame(_))},resume(){K&&(K=!1,q=!0,l=performance.now()-h,_=requestAnimationFrame(Ee))},seek(b){let O=Math.min(1,Math.max(0,b));ve=O,K=!0,h=O*o,l=performance.now()-h,cancelAnimationFrame(_),me(h)},getProgress(){return ve},refresh(){clearTimeout($),D.forEach((b,O)=>{L[O]=We(b),b.style.strokeDasharray=`${L[O]}`})}}}if(Ne)return dt(cr());Dt();function It(){if(K||!ze)return;let o=performance.now(),l=Ye();if(!Re&&N===!1&&l===Pt){yt(l);return}Re=!1,Pt=l;let h=f;if(N!==!1){let v=o-$t,$=v>0?Math.abs(l-(Je<0?l:Je))/v:0;h=f*Math.max(.2,1+$*(typeof N=="number"?N:1)*.04)}Je=l,$t=o;let q=M?De===-1||l>=De?"forward":"reverse":x;De=l;let me=m-a,Ee=!0,he=me===0?0:(l-a)/me;if(isNaN(Ve)||(Ve<=0&&he>0?be?.():Ve>0&&he<=0&&He?.(),Ve<1&&he>=1?Ae?.():Ve>=1&&he<1&&Me?.()),Ve=he,Z){let v=ge(se(l,a,m,h));U&&!M&&(R=Math.max(R,v),v=R),ve=v,e.style.setProperty("--scroll-draw-progress",String(v));let $=q==="reverse"?1-v:v;e.style.clipPath=we($),g?.(v),!C&&se(l,a,m,h)>0&&(C=!0,k?.()),v>=1&&!A?(A=!0,de?.(),Pe<(le==="infinite"?1/0:le??0)&&(Pe++,Oe=setTimeout(()=>{R=-1,C=!1,A=!1,e.style.clipPath=we(0)},ce))):v<1&&!U&&(A=!1),yt(l);return}if(D.forEach((v,$)=>{let ee=$*ye*me,b=ge(se(l,a+ee,m+ee,h));U&&!M&&(b=Le[$]=Math.max(Le[$]??R,b)),v.style.strokeDashoffset=q==="reverse"?`${L[$]*b}`:`${L[$]*(1-b)}`,u&&(v.style.opacity=q==="reverse"?`${1-b}`:`${b}`),J&&j?v.style.stroke=qe(J,j,b):j&&(v.style.stroke=j),Q!==null&&W!==null?v.style.strokeWidth=`${Q+(W-Q)*b}`:W!==null&&(v.style.strokeWidth=`${W}`),re!==null&&G!==null?v.style.fillOpacity=`${re+(G-re)*b}`:G!==null&&(v.style.fillOpacity=`${G}`),H&&v.tagName.toLowerCase()==="path"&&ne[$]&&v.setAttribute("d",St(ne[$],H,b)),$===0&&(ve=b,g?.(b),e.style.setProperty("--scroll-draw-progress",String(b))),b<1&&(Ee=!1)}),z){let v=ge(se(l,a,m,h));for(let $ in z){let ee=parseFloat($);v>=ee&&!Ie.has(ee)&&(Ie.add(ee),z[$]?.())}}!C&&se(l,a,m,h)>0&&(C=!0,k?.()),Ee&&!A?(A=!0,de?.(),Pe<(le==="infinite"?1/0:le??0)&&(Pe++,Oe=setTimeout(()=>{R=-1,Le=[],C=!1,A=!1,Ie.clear(),Ke(),Re=!0},ce))):!Ee&&!U&&(A=!1),yt(l)}function gt(o){return o>=m&&o<ue}function yt(o){Ce||gt(o)?_=requestAnimationFrame(It):ze=!1}function ht(){return Ce||gt(Ye())}let ze=!1;function et(){ze||(ze=!0,_=requestAnimationFrame(function(){It()}))}function tt(){ze=!1,cancelAnimationFrame(_)}let bt=new IntersectionObserver(o=>{o.forEach(l=>{Ce=l.isIntersecting,Ce&&!K?(Re=!0,et()):ze&&!K&>(Ye())||tt()})},{root:ae??null,threshold:X,rootMargin:_e});function Rt(){D.forEach((o,l)=>{L[l]=We(o),o.style.strokeDasharray=`${L[l]}`}),Dt(),Re=!0}let rt;function Ue(){clearTimeout(rt),rt=setTimeout(Rt,150)}window.addEventListener("resize",Ue),window.addEventListener("orientationchange",Ue);let ur=Be([e],Ue);return d>0?setTimeout(()=>bt.observe(e),d):bt.observe(e),dt({destroy(){cancelAnimationFrame(_),clearTimeout(Oe),tt(),bt.disconnect(),ur(),window.removeEventListener("resize",Ue),window.removeEventListener("orientationchange",Ue),clearTimeout(rt),Lt()},replay(){R=-1,Le=[],De=-1,Je=-1,C=!1,A=!1,Pe=0,K=!1,ve=0,Ie.clear(),clearTimeout(Oe),Ke(),Re=!0,ht()&&et()},pause(){K=!0,tt()},resume(){K&&(K=!1,Re=!0,ht()&&et())},seek(o){let l=Math.min(1,Math.max(0,o));ve=l,R=l,Le=[],K=!0,tt(),ir(l,x),Re=!0},getProgress(){return ve},refresh(){clearTimeout(rt),Rt(),ht()&&!K&&et()}},()=>({tStart:a,tEnd:m}))}function Ut(e,r){let t={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return t;let n=typeof e=="string"?document.querySelector(e):e;return n?ct(n,r):(Y("Container not found:",e),t)}function Pr(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function Xt(e){let r=[],t=/([\w]+)\(([^)]*)\)/g,n;for(;(n=t.exec(e))!==null;){let s=[],i=[],c=n[2].trim();if(c)for(let f of c.split(/[\s,]+/)){let u=f.match(/^([-+]?[\d.eE]+)(.*)$/);s.push(u?parseFloat(u[1]):0),i.push(u?u[2]:"")}r.push({fn:n[1],nums:s,units:i})}return r}function $r(e,r,t){let n=Xt(e),s=Xt(r);return n.length===0||n.length!==s.length?t<1?e:r:n.map((i,c)=>{let f=s[c];return i.fn!==f.fn||i.nums.length!==f.nums.length?t<1?`${i.fn}(${i.nums.map((u,p)=>`${u}${i.units[p]}`).join(", ")})`:`${f.fn}(${f.nums.map((u,p)=>`${u}${f.units[p]}`).join(", ")})`:`${i.fn}(${i.nums.map((u,p)=>`${u+(f.nums[p]-u)*t}${i.units[p]}`).join(", ")})`}).join(" ")}function Zt(e,r,t){if(typeof e=="number"&&typeof r=="number")return String(e+(r-e)*t);let n=String(e),s=String(r);if(Pr(n))return qe(n,s,t);if(n.includes("("))return $r(n,s,t);let i=n.match(/^([-+]?[\d.]+)(.*)$/),c=s.match(/^([-+]?[\d.]+)(.*)$/);if(i&&c){let f=parseFloat(i[1]),u=parseFloat(c[1]);return`${f+(u-f)*t}${i[2]||c[2]}`}return t<1?n:s}function kr(e){return e.replace(/([A-Z])/g,r=>`-${r.toLowerCase()}`)}var Cr=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),Dr=0,Jt="--scroll-draw-progress";function Or(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}var er={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Tt(e,r){return typeof window>"u"?er:r.respectReducedMotion===!1?Kt(e,r,!1):Ge(r,(t,n)=>Kt(e,t,n))}function Kt(e,r,t){let{props:n,trigger:s={},easing:i="ease-out",speed:c=1,once:f=!1,axis:u="y",scrollContainer:p,native:S=!0,velocityScale:P=!1,triggerElement:x,onProgress:U,onComplete:pe,onEnter:F,onLeave:T,onEnterBack:M,onLeaveBack:d}=r,E=typeof i=="function"?i:te[i]??te["ease-out"],w=$e(s.start??"top bottom"),I=$e(s.end??"bottom top"),z=x??e,N=typeof p=="string"?document.querySelector(p):p??null,X=Object.entries(n).map(([a,m])=>({prop:kr(a),from:Array.isArray(m)?m[0]:"",to:Array.isArray(m)?m[1]:m}));function _e(){let a=window.getComputedStyle(e);for(let m of X)m.from===""&&(m.from=a.getPropertyValue(m.prop).trim()||"0")}function le(){for(let a of X)e.style.setProperty(a.prop,String(a.to))}let ce=new Map;for(let a of[...X.map(m=>m.prop),Jt])ce.set(a,e.style.getPropertyValue(a));function H(){for(let[a,m]of ce)m?e.style.setProperty(a,m):e.style.removeProperty(a)}if(t)return le(),pe?.(),{...er,destroy:H,getProgress:()=>1};_e();let xe=typeof i=="string"?st(i):null;function Ne(){if(!S||!Or()||!xe||u!=="y"||N||z!==e||f||c!==1||U||pe||F||T||M||d||P!==!1||(s.start??"top bottom").trim()!=="top bottom"||(s.end??"bottom top").trim()!=="bottom top")return!1;for(let a of X)if(!Cr.has(a.prop))return!1;return!0}function Te(){let a=`ssd-a-${++Dr}`,m=X.map(R=>`${R.prop}:${R.from}`).join(";"),ye=X.map(R=>`${R.prop}:${R.to}`).join(";"),ue=document.createElement("style");ue.setAttribute("data-ssd-animate",""),ue.textContent=`@keyframes ${a}{from{${m}}to{${ye}}}.${a}{animation-name:${a};animation-duration:auto;animation-timing-function:${xe};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(ue),e.classList.add(a);let A=()=>u==="x"?window.scrollX:window.scrollY,C=()=>u==="x"?window.innerWidth:window.innerHeight,_=()=>{let R=e.getBoundingClientRect();return Fe({top:R.top,height:R.height},A(),C(),w,I)};ke(e,{type:"animate",getProgress:()=>Ce.getProgress(),getTrigger:_});let Ce={refresh(){},destroy(){e.classList.remove(a),ue.remove(),e.style.animationPlayState="",H(),Se(e)},replay(){e.classList.remove(a),e.offsetWidth,e.classList.add(a)},pause(){e.style.animationPlayState="paused"},resume(){e.style.animationPlayState=""},seek(R){let Le=Math.min(1,Math.max(0,R));e.classList.remove(a);for(let De of X)e.style.setProperty(De.prop,Zt(De.from,De.to,Le))},getProgress(){let{tStart:R,tEnd:Le}=_();return E(se(A(),R,Le,c))}};return Ce}if(Ne())return Te();let ie=0,g=0,k=0,de=!1,be=!1,Ae=-1,Me=0,He=!1,Z=NaN,ge=-1,je=0,Qe=()=>N?u==="x"?N.scrollLeft:N.scrollTop:u==="x"?window.scrollX:window.scrollY,ae=()=>N?u==="x"?N.clientWidth:N.clientHeight:u==="x"?window.innerWidth:window.innerHeight,J=z===e?X:[],j=!1;function Q(){let a=e.style,m=J.map(C=>a.getPropertyValue(C.prop)),ye=a.transition;J.length&&(a.transition="none"),J.forEach(C=>a.setProperty(C.prop,ce.get(C.prop)??""));let ue=nt(z,N,u);J.forEach((C,_)=>a.setProperty(C.prop,m[_])),J.length&&(e.offsetWidth,a.transition=ye);let A=Fe(ue,ue.scroll,ae(),w,I);j&&Math.abs(A.tStart-ie)<1&&Math.abs(A.tEnd-g)<1||(j=!0,ie=A.tStart,g=A.tEnd)}function W(a){e.style.setProperty(Jt,String(a));for(let m of X)e.style.setProperty(m.prop,Zt(m.from,m.to,a));U?.(a)}function re(a){if(isNaN(Z)){Z=a;return}Z<=0&&a>0?F?.():Z>0&&a<=0&&d?.(),Z<1&&a>=1?T?.():Z>=1&&a<1&&M?.(),Z=a}function G(){if(!de||be)return;let a=performance.now(),m=Qe(),ye=c;if(P!==!1){let C=a-je,_=C>0?Math.abs(m-(ge<0?m:ge))/C:0;ye=c*Math.max(.2,1+_*(typeof P=="number"?P:1)*.04)}ge=m,je=a;let ue=g===ie?0:(m-ie)/(g-ie);re(ue);let A=E(se(m,ie,g,ye));f&&(Ae=Math.max(Ae,A),A=Ae),Me=A,W(A),A>=1&&!He?(He=!0,pe?.()):A<1&&!f&&(He=!1),k=requestAnimationFrame(G)}Q(),g===ie&&Y("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 a=E(se(Qe(),ie,g,c));f&&a>0&&(Ae=a),Me=a,W(a)}let we=new IntersectionObserver(a=>{a.forEach(m=>{de=m.isIntersecting,de&&!be?k=requestAnimationFrame(G):cancelAnimationFrame(k)})},{root:N??null}),D;function L(){clearTimeout(D),D=setTimeout(Q,150)}window.addEventListener("resize",L),window.addEventListener("orientationchange",L);let ne=Be([z],L);return we.observe(e),ke(e,{type:"animate",getProgress:()=>Me,getTrigger:()=>({tStart:ie,tEnd:g})}),{destroy(){cancelAnimationFrame(k),we.disconnect(),window.removeEventListener("resize",L),window.removeEventListener("orientationchange",L),ne(),clearTimeout(D),H(),Se(e)},replay(){Ae=-1,He=!1,Me=0,be=!1,W(0)},pause(){be=!0,cancelAnimationFrame(k)},resume(){be&&(be=!1,de&&(k=requestAnimationFrame(G)))},seek(a){let m=Math.min(1,Math.max(0,a));Me=m,Ae=m,be=!0,cancelAnimationFrame(k),W(m)},getProgress(){return Me},refresh(){Q()}}}var ut={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function tr(e,r){if(typeof window>"u")return ut;let t=typeof e=="string"?document.querySelector(e):e;return t?Tt(t,r):(Y("scrollAnimate: element not found:",e),ut)}function rr(e,r={}){if(typeof window>"u")return ut;let t=typeof e=="string"?document.querySelector(e):e;if(!t)return Y("scrollParallax: element not found:",e),ut;let{speed:n=.3,axis:s="y",easing:i="linear",trigger:c,onProgress:f}=r,u=-n*100,p=t.style,S=!!t.ownerSVGElement,P=p.getPropertyValue("transform-box");S&&p.setProperty("transform-box","fill-box");let x=Tt(t,{props:s==="x"?{transform:["translateX(0%)",`translateX(${u}%)`]}:{transform:["translateY(0%)",`translateY(${u}%)`]},trigger:c??{start:"top bottom",end:"bottom top"},easing:i,native:!1,onProgress:f});return S?{...x,destroy(){x.destroy(),p.setProperty("transform-box",P)}}:x}var At={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function nr(e,r){if(typeof window>"u")return At;let t=typeof e=="string"?document.querySelector(e):e;return t?Ge(r,(n,s)=>Ir(t,n,s)):(Y("scrollCounter: element not found:",e),At)}function Ir(e,r,t){let{from:n=0,to:s,format:i,easing:c="ease-out",trigger:f={},once:u=!0,decimals:p,onComplete:S}=r,P=p!==void 0?g=>g.toFixed(p):i??(g=>String(Math.round(g))),x=typeof c=="function"?c:te[c]??te["ease-out"],U=$e(f.start??"top 80%"),pe=$e(f.end??"top 20%");if(t)return e.textContent=P(s),S?.(),{...At,getProgress:()=>1};let F=0,T=0,M=!1,d=0,E=!1,w=!1,I=-1,z=0,N=!1,X=()=>window.scrollY,_e=()=>window.innerHeight;function le(){let g=e.getBoundingClientRect(),k=Fe({top:g.top,height:g.height},X(),_e(),U,pe);M&&Math.abs(k.tStart-F)<1&&Math.abs(k.tEnd-T)<1||(M=!0,F=k.tStart,T=k.tEnd)}function ce(g){e.textContent=P(n+(s-n)*g),e.style.setProperty("--scroll-draw-progress",String(g))}function H(){if(!E||w)return;let g=x(se(X(),F,T,1));u&&(I=Math.max(I,g),g=I),z=g,ce(g),g>=1&&!N?(N=!0,S?.()):g<1&&!u&&(N=!1),d=requestAnimationFrame(H)}le();{let g=x(se(X(),F,T,1));u&&g>0&&(I=g),z=g,ce(g)}let xe=new IntersectionObserver(g=>{g.forEach(k=>{E=k.isIntersecting,E&&!w?d=requestAnimationFrame(H):cancelAnimationFrame(d)})}),Ne;function Te(){clearTimeout(Ne),Ne=setTimeout(le,150)}window.addEventListener("resize",Te),window.addEventListener("orientationchange",Te);let ie=Be([e],Te);return xe.observe(e),ke(e,{type:"counter",getProgress:()=>z,getTrigger:()=>({tStart:F,tEnd:T})}),{destroy(){cancelAnimationFrame(d),xe.disconnect(),window.removeEventListener("resize",Te),window.removeEventListener("orientationchange",Te),ie(),clearTimeout(Ne),Se(e)},replay(){I=-1,N=!1,z=0,w=!1,ce(0)},pause(){w=!0,cancelAnimationFrame(d)},resume(){w&&(w=!1,E&&(d=requestAnimationFrame(H)))},seek(g){let k=Math.min(1,Math.max(0,g));z=k,I=k,w=!0,cancelAnimationFrame(d),ce(k)},getProgress(){return z}}}var or="http://www.w3.org/2000/svg",Rr="cinematic-photo",Mt=e=>e<0?0:e>1?1:e;function mt(e){let r=parseFloat(e);return Number.isFinite(r)?Mt(r/100):0}function Fr(e){return te[e]??te.linear}var Nr={destroy:()=>{},getProgress:()=>0},ft=class{constructor(r){if(typeof document>"u"){this.mount=null;return}this.mount=typeof r.wrapper=="string"?document.querySelector(r.wrapper):r.wrapper,this.mount||Y("Cinematic: wrapper not found:",r.wrapper)}loadStory(r){let t=this.mount;if(typeof window>"u"||!t)return Nr;t.style.position="relative",t.style.height=r.totalHeight,t.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;",t.appendChild(n);let s=[];for(let T of r.scenes){if(T.background){let d=document.createElement("img");d.id=Rr,d.src=T.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=T.animations.filter(d=>d.type==="draw");if(M.length){let d=document.createElementNS(or,"svg");d.setAttribute("viewBox",`0 0 ${r.canvas.width} ${r.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 E of M){let w=document.createElementNS(or,"path");w.id=E.target.replace(/^#/,""),w.setAttribute("d",E.d),w.setAttribute("fill","none"),w.setAttribute("stroke",E.stroke),w.setAttribute("stroke-width",String(E.strokeWidth)),w.setAttribute("stroke-linecap","round"),w.setAttribute("stroke-linejoin","round");let I=E.length||w.getTotalLength?.()||0;w.style.strokeDasharray=String(I),w.style.strokeDashoffset=String(I),d.appendChild(w),s.push({kind:"draw",el:w,start:mt(E.start),end:mt(E.end),ease:Fr(E.easing),length:I})}}for(let d of T.animations){if(d.type!=="fade")continue;let E=n.querySelector(d.target)??document.querySelector(d.target);E&&(E.style.opacity=String(d.from),s.push({kind:"fade",el:E,start:mt(d.start),end:mt(d.end),ease:te["ease-in-out"]??te.linear,from:d.from,to:d.to}))}}let i=0,c=()=>{let T=t.offsetHeight-window.innerHeight;return T<=0?t.getBoundingClientRect().top<=0?1:0:Mt(-t.getBoundingClientRect().top/T)},f=T=>{for(let M of s){let d=M.end-M.start,E=d<=0?T>=M.end?1:0:Mt((T-M.start)/d),w=M.ease(E);M.kind==="draw"?M.el.style.strokeDashoffset=String(M.length*(1-w)):M.el.style.opacity=String(M.from+(M.to-M.from)*w)}};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return f(1),{destroy:()=>{},getProgress:()=>1};let u=0,p=!1,S=!1,P=()=>{i=c(),f(i),p&&(u=requestAnimationFrame(P))},x=()=>{p||(p=!0,u=requestAnimationFrame(P))},U=()=>{p=!1,cancelAnimationFrame(u)},pe=new IntersectionObserver(T=>{for(let M of T)S=M.isIntersecting,S?x():U()},{threshold:0});pe.observe(n),i=c(),f(i),ke(t,{type:"draw",getProgress:()=>i,getTrigger:()=>{let T=t.getBoundingClientRect().top+window.scrollY;return{tStart:T,tEnd:T+Math.max(0,t.offsetHeight-window.innerHeight)}}});let F=lt(T=>{T&&(F(),U(),pe.disconnect(),Se(t),i=1,f(1))});return{destroy(){F(),U(),pe.disconnect(),Se(t)},getProgress:()=>i}}};if(typeof HTMLElement<"u"&&typeof customElements<"u"&&!customElements.get("scroll-draw")){let e=["speed","easing","stagger","direction","selector","fade","once"];class r extends HTMLElement{constructor(){super(...arguments);this.instance=null;this.key=""}connectedCallback(){this.build()}attributeChangedCallback(){this.instance&&this.build()}build(){let s=JSON.stringify(e.map(P=>this.getAttribute(P)));if(this.instance&&s===this.key)return;this.instance?.destroy(),this.key=s;let i={},c=this.getAttribute("speed"),f=this.getAttribute("easing"),u=this.getAttribute("stagger"),p=this.getAttribute("direction"),S=this.getAttribute("selector");c&&(i.speed=parseFloat(c)),f&&(i.easing=f),u&&(i.stagger=parseFloat(u)),p&&(i.direction=p),S&&(i.selector=S),this.hasAttribute("fade")&&(i.fade=this.getAttribute("fade")!=="false"),this.hasAttribute("once")&&(i.once=this.getAttribute("once")!=="false"),this.instance=ct(this,i)}disconnectedCallback(){this.instance?.destroy(),this.instance=null}}r.observedAttributes=e,customElements.define("scroll-draw",r)}return yr(Hr);})();
|
|
1
|
+
"use strict";var SvgScrollDraw=(()=>{var St=Object.defineProperty;var gr=Object.getOwnPropertyDescriptor;var yr=Object.getOwnPropertyNames;var hr=Object.prototype.hasOwnProperty;var br=(e,t)=>{for(var r in t)St(e,r,{get:t[r],enumerable:!0})},wr=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of yr(t))!hr.call(e,s)&&s!==r&&St(e,s,{get:()=>t[s],enumerable:!(n=gr(t,s))||n.enumerable});return e};var vr=e=>wr(St({},"__esModule",{value:!0}),e);var Wr={};br(Wr,{Cinematic:()=>dt,PRESETS:()=>st,createBounce:()=>xt,createElastic:()=>Tt,createSpring:()=>_t,scrollAnimate:()=>or,scrollCounter:()=>ir,scrollDraw:()=>Jt,scrollParallax:()=>sr});function _t({tension:e=2.5,friction:t=2.2}={}){return r=>1-Math.cos(r*Math.PI*e)*Math.pow(1-r,t)}function xt({bounces:e=3,decay:t=.5}={}){let r=Math.max(1,Math.round(e)),n=Math.max(.01,Math.min(.99,t)),s=Math.sqrt(n),i=0,c=[];for(let p=0;p<r;p++){let v=Math.pow(s,p);c.push(v),i+=v}let f=[0],m=0;for(let p=0;p<r;p++)m+=c[p]/i,f.push(m);return p=>{if(p<=0)return 0;if(p>=1)return 1;for(let v=0;v<r;v++)if(p<=f[v+1]){let T=(p-f[v])/(f[v+1]-f[v]);if(v===0)return T*(2-T);let b=1-Math.pow(n,v);return b+(1-b)*(2*T-1)*(2*T-1)}return 1}}function Tt({amplitude:e=1,period:t=.4}={}){let r=Math.max(1,e),n=Math.max(.1,t),s=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-s)*(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:xt(),elastic:Tt()};function Vt(e,t,r){return Math.min(r,Math.max(t,e))}function Pe(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 zt(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 qt(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 ne(e,t,r,n){return r===t?0:Vt((e-t)/(r-t)*n,0,1)}function Re(e,t,r,n,s){let i=zt(e.top,e.height,t,n.element)-qt(n.viewport,r),c=zt(e.top,e.height,t,s.element)-qt(s.viewport,r);return{tStart:i,tEnd:c}}function rt(e,t,r){let n=e.getBoundingClientRect(),s=r==="x"?n.width:n.height;return t?{top:r==="x"?n.left-t.getBoundingClientRect().left-t.clientLeft+t.scrollLeft:n.top-t.getBoundingClientRect().top-t.clientTop+t.scrollTop,height:s,scroll:0}:{top:r==="x"?n.left:n.top,height:s,scroll:r==="x"?window.scrollX:window.scrollY}}function nt(e){let t=parseFloat(e.getAttribute("pathLength")??"");if(t>0)return t;let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),s=parseFloat(e.getAttribute("height")??"0");return 2*(n+s)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function 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 ot(e,t,r){let n=Wt(e),s=Wt(t);return!n||!s?e:`rgb(${Math.round(n[0]+(s[0]-n[0])*r)},${Math.round(n[1]+(s[1]-n[1])*r)},${Math.round(n[2]+(s[2]-n[2])*r)})`}var st={sketch:{easing:"ease-in",stagger:.1,speed:.9,fade:!1},reveal:{easing:"ease-out",fade:!0,speed:1.2,once:!0},typewriter:{easing:"linear",stagger:.05,speed:1.5},cinematic:{easing:"ease-in-out",fade:!0,speed:.75},spring:{easing:"spring",speed:1.1}};function G(e,...t){}var Er="cubic-bezier(0.333333, 0, 0.666667, 0.333333)",Sr="cubic-bezier(0.333333, 0.666667, 0.666667, 1)",Gt=33;function xr(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timing-function: linear(0, 1)")}function Tr(e){let t=[];for(let r=0;r<Gt;r++){let n=r/(Gt-1);t.push(String(Math.round(e(n)*1e5)/1e5))}return`linear(${t.join(",")})`}function it(e){switch(e){case"linear":return"linear";case"ease-in":return Er;case"ease-out":return Sr;case"ease-in-out":return xr()?Tr(J["ease-in-out"]):null;default:return null}}var Bt=Symbol.for("svg-scroll-draw.registry");function jt(){let e=globalThis;return e[Bt]||(e[Bt]=new Map)}function ke(e,t){jt().set(e,t)}function Ee(e){jt().delete(e)}var Ye,at=new Set,lt=new WeakMap,Xe=new Map,Qt=e=>{let t=e.getBoundingClientRect();return t.width+" "+t.height};function Ar(e){let t=new Set;for(let r of e)for(;r&&r!==document.body;r=r.parentElement)for(let n=r;n;n=n.previousElementSibling)t.add(n);return t}function We(e,t){if(typeof ResizeObserver>"u"||typeof document>"u")return()=>{};let r=()=>t();Ye??(Ye=new ResizeObserver(s=>{let i=!1;for(let{target:c}of s)lt.get(c)!==Qt(c)&&(i=!0),lt.set(c,"");i&&at.forEach(c=>c())})),at.add(r);let n=Ar(e);return[document.body,document.documentElement].forEach(s=>s&&n.add(s)),n.forEach(s=>{lt.has(s)||lt.set(s,Qt(s)),Xe.set(s,(Xe.get(s)??0)+1),Ye.observe(s)}),()=>{at.delete(r)&&(n.forEach(s=>{let i=(Xe.get(s)??1)-1;if(i)return void Xe.set(s,i);Xe.delete(s),Ye?.unobserve(s)}),at.size||(Ye?.disconnect(),Ye=void 0))}}function ct(e){if(typeof window>"u"||typeof window.matchMedia!="function")return()=>{};let t=window.matchMedia("(prefers-reduced-motion: reduce)"),r=s=>e(!!s.matches);if(typeof t.addEventListener=="function")return t.addEventListener("change",r),()=>t.removeEventListener("change",r);let n=t;return n.addListener?.(r),()=>n.removeListener?.(r)}function Ge(e,t){if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return t(e,!0);let r=t(e,!1),n=ct(i=>{if(!i)return;n();let c=(r.getProgress?.()??0)>=1;r.destroy(),r=t(c?{...e,onComplete:void 0}:e,!0)}),s={};for(let i of Object.keys(r))s[i]=(...c)=>r[i]?.(...c);return s.destroy=()=>{n(),r.destroy()},s}var Mr=0;function Lr(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")&&CSS.supports("view-timeline-name: --x")}function Ut(e,t){let r="";try{r=getComputedStyle(e).getPropertyValue(t).trim()}catch{}return r||(e.getAttribute(t)??"").trim()}var Yt=new Set(["","none","transparent","rgba(0, 0, 0, 0)"]);function Pr(e){if(!!1)return;let t=Ut(e,"stroke");if(!t||t==="none"){G("Element has no stroke \u2014 path will not be visible.",e);return}let r=(e.getAttribute("fill")??"").trim();r&&!Yt.has(r)&&!Yt.has(Ut(e,"fill"))&&G("Element has a fill \u2014 it may obscure the stroke animation.",e)}function kr(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 s(){let i=r==="x"?window.scrollX:window.scrollY,c=e-i,f=t-i,m=r==="x";n.innerHTML=`
|
|
2
|
+
<div style="position:absolute;${m?`left:${c}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${c}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
|
|
3
|
+
<div style="position:absolute;${m?`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",s,{passive:!0}),s(),{el:n,destroy(){window.removeEventListener("scroll",s),n.remove()}}}var Xt=/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,Zt=/[MmLlHhVvCcSsQqTtAaZz]/g;function Cr(e,t,r){if(!!1)return;let n=(e.match(Zt)??[]).join("").toUpperCase(),s=(t.match(Zt)??[]).join("").toUpperCase(),i=(e.match(Xt)??[]).length,c=(t.match(Xt)??[]).length;if(n!==s){G(`morphTo: command sequence differs (${n||"\u2205"} \u2192 ${s||"\u2205"}). Interpolation is coordinate-for-coordinate, so the result will not reach the target shape. Redraw both paths with the same commands.`,r);return}i!==c&&G(`morphTo: coordinate count differs (${i} \u2192 ${c}). Extra coordinates are ignored and missing ones hold their start value, so the result will not reach the target shape.`,r)}function $r(e,t,r){let n=(t.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),s=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,i=>{let c=parseFloat(i),f=n[s++]??c;return String(+(c+(f-c)*r).toFixed(4))})}function mt(e,t={}){return typeof window>"u"?{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0}:Ge(t,(r,n)=>Ir(e,r,n))}function Ir(e,t,r){let{preset:n,...s}=t,i=n?{...st[n],...s}:s,{selector:c="path, polyline, line, polygon, rect, circle",speed:f=1,fade:m=!1,easing:p="linear",trigger:v={},stagger:T=0,direction:b="forward",once:K=!1,debug:fe=!1,axis:I="y",scrollContainer:E,autoReverse:A=!1,delay:d=0,strokeColor:w,strokeWidth:h,fillOpacity:F,waypoints:O,velocityScale:C=!1,threshold:V=0,rootMargin:Ce="0px",repeat:ge=0,repeatDelay:he=0,morphTo:B,clip:oe,autoplay:Se=!1,duration:Ne=1e3,native:Fe=!0,onProgress:le,onStart:z,onComplete:H,onEnter:S,onLeave:L,onEnterBack:be,onLeaveBack:Ve}=i,q=oe===!0?"left":typeof oe=="string"?oe:!1,j=typeof p=="function"?p:J[p]??J.linear,He=Pe(v.start||"top bottom"),we=Pe(v.end||"bottom top"),ee=typeof E=="string"?document.querySelector(E):E??null,xe=Array.isArray(w)?w[0]:null,pe=Array.isArray(w)?w[1]:typeof w=="string"?w:null,ve=Array.isArray(h)?h[0]:null,Te=Array.isArray(h)?h[1]:typeof h=="number"?h:null,de=Array.isArray(F)?F[0]:null,$e=Array.isArray(F)?F[1]:typeof F=="number"?F:null;function Ae(o){let a=o*100;switch(q){case"right":return`inset(0 0 0 ${100-a}%)`;case"top":return`inset(0 0 ${100-a}% 0)`;case"bottom":return`inset(${100-a}% 0 0 0)`;case"center":return`circle(${o*150}% at 50% 50%)`;default:return`inset(0 ${100-a}% 0 0)`}}let P=q?[]:Array.from(e.querySelectorAll(c)),se=[],ce=[],Q=0,_=0,_e=T,Ze=0,R=!1,l=!1,u=0,ye=!1,te=-1,W=[],N=-1,y=!1,U=0,ie=0,Ie,gt=null;function Pt(){gt?.destroy(),gt=null}let De=new Set,kt=NaN,Oe=!0,Je=-1,Ct=performance.now(),ze=NaN;function Be(){return ee?I==="x"?ee.scrollLeft:ee.scrollTop:I==="x"?window.scrollX:window.scrollY}function $t(){return ee?I==="x"?ee.clientWidth:ee.clientHeight:I==="x"?window.innerWidth:window.innerHeight}function It(){let o=rt(e,ee,I);return Re(o,o.scroll,$t(),He,we)}function lr(){let o=_-Q,a=P.length-1,g=ee??document.documentElement,M=I==="x"?"Width":"Height";if(_e=T,T>0&&a>0&&o>0){let re=g[`scroll${M}`]-g[`client${M}`]-1-Q-o/f;re>=0&&(_e=Math.min(T,re/(a*o)))}Ze=_+a*_e*o}function Dt(){({tStart:Q,tEnd:_}=It()),lr(),fe&&!1&&(Pt(),gt=kr(Q,_,I))}function yt(o,a=It){ke(e,{type:"draw",getProgress:()=>o.getProgress(),getTrigger:a});let g=o.destroy;return o.destroy=()=>{g.call(o),Ee(e)},o}function Ot(o,a){return K&&!A?Math.max(te,j(W[o]=Math.max(W[o]??0,a))):j(a)}function cr(o,a){if(e.style.setProperty("--scroll-draw-progress",String(o)),q){let g=a==="reverse"?1-o:o;e.style.clipPath=Ae(g);return}P.forEach((g,M)=>ht(g,M,o,a))}function ht(o,a,g,M){o.style.strokeDashoffset=M==="reverse"?`${se[a]*g}`:`${se[a]*(1-g)}`,m&&(o.style.opacity=M==="reverse"?`${1-g}`:`${g}`),xe&&pe?o.style.stroke=ot(xe,pe,g):pe&&(o.style.stroke=pe),ve!==null&&Te!==null?o.style.strokeWidth=`${ve+(Te-ve)*g}`:Te!==null&&(o.style.strokeWidth=`${Te}`),de!==null&&$e!==null?o.style.fillOpacity=`${de+($e-de)*g}`:$e!==null&&(o.style.fillOpacity=`${$e}`),B&&o.tagName.toLowerCase()==="path"&&ce[a]&&o.setAttribute("d",$r(ce[a],B,g))}function je(){if(e.style.setProperty("--scroll-draw-progress","0"),q){e.style.clipPath=Ae(b==="reverse"?1:0);return}P.forEach((o,a)=>{o.style.strokeDasharray=`${se[a]}`,o.style.strokeDashoffset=b==="reverse"?"0":`${se[a]}`,m?o.style.opacity=b==="reverse"?"1":"0":o.style.opacity="",xe&&(o.style.stroke=xe),ve!==null&&(o.style.strokeWidth=`${ve}`),de!==null&&(o.style.fillOpacity=`${de}`),B&&o.tagName.toLowerCase()==="path"&&ce[a]&&o.setAttribute("d",ce[a])})}function Qe(o,a){let g=o.getAttribute("d"),M=nt(o);if(B&&ce[a]){o.setAttribute("d",B);let re=nt(o);o.setAttribute("d",ce[a]),M=Math.max(nt(o),re),o.setAttribute("d",g)}se[a]=M,o.style.strokeDasharray=`${M}`}if(P.forEach((o,a)=>{Pr(o);let g=o.tagName.toLowerCase()==="path";g?ce.push(o.getAttribute("d")??""):ce.push(""),Qe(o,a);let M=se[a];B&&(g?Cr(ce[ce.length-1],B,o):G(`morphTo only applies to <path> elements \u2014 ignored on <${o.tagName}>.`,o)),r?(o.style.strokeDashoffset=b==="reverse"?`${M}`:"0",m&&(o.style.opacity="1"),pe&&(o.style.stroke=pe),Te!==null&&(o.style.strokeWidth=`${Te}`),$e!==null&&(o.style.fillOpacity=`${$e}`),B&&o.tagName.toLowerCase()==="path"&&o.setAttribute("d",B)):(o.style.strokeDashoffset=b==="reverse"?"0":`${M}`,m?o.style.opacity=b==="reverse"?"1":"0":o.style.opacity="",xe&&(o.style.stroke=xe),ve!==null&&(o.style.strokeWidth=`${ve}`),de!==null&&(o.style.fillOpacity=`${de}`))}),r)return q&&(e.style.clipPath=Ae(1)),H?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};q&&(e.style.clipPath=Ae(b==="reverse"?1:0));let Rt=typeof p=="string"?it(p):null;function ur(){return!(Fe===!1||Se||fe&&!1||!Lr()||!P.length||!Rt||q||I!=="y"||ee||f!==1||T!==0||K||A||C!==!1||B||O||ge||d>0||le||z||H||S||L||be||Ve||w!=null||h!=null||F!=null||(v.start||"top bottom").trim()!=="top bottom"||(v.end||"bottom top").trim()!=="bottom top")}function mr(){let o=++Mr,a=`svg-scroll-draw-${o}`,g=`svg-scroll-draw-host-${o}`,M=`--svg-scroll-draw-${o}`,re=b==="reverse"?"0":"var(--ssd-len)",Me=b==="reverse"?"var(--ssd-len)":"0",ue=`stroke-dashoffset:${re};`,$=`stroke-dashoffset:${Me};`;m&&(ue+=`opacity:${b==="reverse"?1:0};`,$+=`opacity:${b==="reverse"?0:1};`);let D=document.createElement("style");D.setAttribute("data-svg-scroll-draw",""),D.textContent=`@keyframes ${a}{from{${ue}}to{${$}}}.${g}{view-timeline-name:${M};view-timeline-axis:block;}.${a}{animation-name:${a};animation-duration:auto;animation-timing-function:${Rt};animation-fill-mode:both;animation-timeline:${M};animation-range:cover 0% cover 100%;}`,document.head.appendChild(D),e.classList.add(g);function Y(x,k){x.style.setProperty("--ssd-len",String(se[k])),x.style.strokeDasharray=`${se[k]}`,x.style.strokeDashoffset="",x.style.opacity="",x.style.animationPlayState="",x.classList.add(a)}P.forEach(Y);let X=!1,ae=-1;function me(){if(ae>=0)return ae;let x=e.getBoundingClientRect(),{tStart:k,tEnd:Z}=Re({top:x.top,height:x.height},Be(),$t(),He,we);return j(ne(Be(),k,Z,f))}return{destroy(){e.classList.remove(g),P.forEach(x=>{x.classList.remove(a),x.style.removeProperty("--ssd-len"),x.style.animationPlayState=""}),D.remove()},replay(){X=!1,ae=-1,P.forEach(Y)},pause(){X=!0,P.forEach(x=>{x.style.animationPlayState="paused"})},resume(){X&&(X=!1,P.forEach(x=>{x.style.animationPlayState="running"}))},seek(x){let k=Math.min(1,Math.max(0,x));ae=k,X=!0,P.forEach((Z,Le)=>{Z.classList.remove(a),Z.style.strokeDashoffset=b==="reverse"?`${se[Le]*k}`:`${se[Le]*(1-k)}`,m&&(Z.style.opacity=b==="reverse"?`${1-k}`:`${k}`)})},getProgress(){return me()},refresh(){P.forEach((x,k)=>{Qe(x,k),x.style.setProperty("--ssd-len",String(se[k]))})}}}if(ur())return yt(mr());function fr(){let o=Math.max(1,Ne),a=q?o:o*(1+Math.max(0,P.length-1)*T),g=0,M=0,re=!1;function Me(ae){let me=!0,x=Math.min(1,Math.max(0,ae/a));if(q){let k=Math.min(1,Math.max(0,ae/o)),Z=j(k);U=Z,e.style.setProperty("--scroll-draw-progress",String(Z)),e.style.clipPath=Ae(b==="reverse"?1-Z:Z),le?.(Z),k<1&&(me=!1)}else{P.forEach((Z,Le)=>{let dr=Le*T*o,Ht=Math.min(1,Math.max(0,(ae-dr)/o));ht(Z,Le,j(Ht),b),Ht<1&&(me=!1)});let k=j(x);U=k,le?.(k),e.style.setProperty("--scroll-draw-progress",String(k))}if(O){let k=j(x);for(let Z in O){let Le=parseFloat(Z);k>=Le&&!De.has(Le)&&(De.add(Le),O[Z]?.())}}return me}function ue(ae){if(y)return;let me=ae-g;l||(l=!0,z?.());let x=Me(me);if(x&&!R){R=!0,Me(a),H?.(),ie<(ge==="infinite"?1/0:ge??0)&&(ie++,Ie=setTimeout(()=>{g=performance.now(),l=!1,R=!1,De.clear(),je(),u=requestAnimationFrame(ue)},he));return}x||(u=requestAnimationFrame(ue))}function $(){cancelAnimationFrame(u),clearTimeout(Ie),g=performance.now(),M=0,y=!1,l=!1,R=!1,ie=0,re=!0,U=0,De.clear(),je(),u=requestAnimationFrame(ue)}let D=new IntersectionObserver(ae=>{ae.forEach(me=>{me.isIntersecting&&!(K&&R)?$():!me.isIntersecting&&!K&&!R&&(cancelAnimationFrame(u),clearTimeout(Ie),re=!1)})},{root:ee??null,threshold:V,rootMargin:Ce}),Y;function X(){clearTimeout(Y),Y=setTimeout(()=>P.forEach(Qe),150)}return window.addEventListener("resize",X),window.addEventListener("orientationchange",X),d>0?setTimeout(()=>D.observe(e),d):D.observe(e),{destroy(){cancelAnimationFrame(u),clearTimeout(Ie),D.disconnect(),window.removeEventListener("resize",X),window.removeEventListener("orientationchange",X),clearTimeout(Y)},replay(){ie=0,$()},pause(){y||!re||(y=!0,M=performance.now()-g,cancelAnimationFrame(u))},resume(){y&&(y=!1,re=!0,g=performance.now()-M,u=requestAnimationFrame(ue))},seek(ae){let me=Math.min(1,Math.max(0,ae));U=me,y=!0,M=me*a,g=performance.now()-M,cancelAnimationFrame(u),Me(M)},getProgress(){return U},refresh(){clearTimeout(Y),P.forEach(Qe)}}}if(Se)return yt(fr());Dt();function Nt(){if(y||!qe)return;let o=performance.now(),a=Be();if(!Oe&&C===!1&&a===kt){wt(a);return}Oe=!1,kt=a;let g=f;if(C!==!1){let $=o-Ct,D=$>0?Math.abs(a-(Je<0?a:Je))/$:0;g=f*Math.max(.2,1+D*(typeof C=="number"?C:1)*.04)}Je=a,Ct=o;let M=A?N===-1||a>=N?"forward":"reverse":b;N=a;let re=_-Q,Me=!0,ue=re===0?0:(a-Q)/re;if(isNaN(ze)||(ze<=0&&ue>0?S?.():ze>0&&ue<=0&&Ve?.(),ze<1&&ue>=1?L?.():ze>=1&&ue<1&&be?.()),ze=ue,q){let $=Ot(0,ne(a,Q,_,g));U=$,e.style.setProperty("--scroll-draw-progress",String($));let D=M==="reverse"?1-$:$;e.style.clipPath=Ae(D),le?.($),!l&&ne(a,Q,_,g)>0&&(l=!0,z?.()),$>=1&&!R?(R=!0,H?.(),ie<(ge==="infinite"?1/0:ge??0)&&(ie++,Ie=setTimeout(()=>{te=-1,W=[],l=!1,R=!1,je()},he))):$<1&&!K&&(R=!1),wt(a);return}if(P.forEach(($,D)=>{let Y=D*_e*re,X=Ot(D,ne(a,Q+Y,_+Y,g));ht($,D,X,M),D===0&&(U=X,le?.(X),e.style.setProperty("--scroll-draw-progress",String(X))),X<1&&(Me=!1)}),O){let $=j(ne(a,Q,_,g));for(let D in O){let Y=parseFloat(D);$>=Y&&!De.has(Y)&&(De.add(Y),O[D]?.())}}!l&&ne(a,Q,_,g)>0&&(l=!0,z?.()),Me&&!R?(R=!0,H?.(),ie<(ge==="infinite"?1/0:ge??0)&&(ie++,Ie=setTimeout(()=>{te=-1,W=[],l=!1,R=!1,De.clear(),je(),Oe=!0},he))):!Me&&!K&&(R=!1),wt(a)}function bt(o){return o>=_&&o<Ze}function wt(o){ye||bt(o)?u=requestAnimationFrame(Nt):qe=!1}function vt(){return ye||bt(Be())}let qe=!1;function Ke(){qe||(qe=!0,u=requestAnimationFrame(function(){Nt()}))}function et(){qe=!1,cancelAnimationFrame(u)}let Et=new IntersectionObserver(o=>{o.forEach(a=>{ye=a.isIntersecting,ye&&!y?(Oe=!0,Ke()):qe&&!y&&bt(Be())||et()})},{root:ee??null,threshold:V,rootMargin:Ce});function Ft(){P.forEach(Qe),Dt(),Oe=!0}let tt;function Ue(){clearTimeout(tt),tt=setTimeout(Ft,150)}window.addEventListener("resize",Ue),window.addEventListener("orientationchange",Ue);let pr=We([e],Ue);return d>0?setTimeout(()=>Et.observe(e),d):Et.observe(e),yt({destroy(){cancelAnimationFrame(u),clearTimeout(Ie),et(),Et.disconnect(),pr(),window.removeEventListener("resize",Ue),window.removeEventListener("orientationchange",Ue),clearTimeout(tt),Pt()},replay(){te=-1,W=[],N=-1,Je=-1,l=!1,R=!1,ie=0,y=!1,U=0,De.clear(),clearTimeout(Ie),je(),Oe=!0,vt()&&Ke()},pause(){y=!0,et()},resume(){y&&(y=!1,Oe=!0,vt()&&Ke())},seek(o){let a=Math.min(1,Math.max(0,o));U=a,te=a,W=[],y=!0,et(),cr(a,b),Oe=!0},getProgress(){return U},refresh(){clearTimeout(tt),Ft(),vt()&&!y&&Ke()}},()=>({tStart:Q,tEnd:_}))}function Jt(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?mt(n,t):(G("Container not found:",e),r)}function Dr(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function Kt(e){let t=[],r=/([\w]+)\(([^)]*)\)/g,n;for(;(n=r.exec(e))!==null;){let s=[],i=[],c=n[2].trim();if(c)for(let f of c.split(/[\s,]+/)){let m=f.match(/^([-+]?[\d.eE]+)(.*)$/);s.push(m?parseFloat(m[1]):0),i.push(m?m[2]:"")}t.push({fn:n[1],nums:s,units:i})}return t}function Or(e,t,r){let n=Kt(e),s=Kt(t);return n.length===0||n.length!==s.length?r<1?e:t:n.map((i,c)=>{let f=s[c];return i.fn!==f.fn||i.nums.length!==f.nums.length?r<1?`${i.fn}(${i.nums.map((m,p)=>`${m}${i.units[p]}`).join(", ")})`:`${f.fn}(${f.nums.map((m,p)=>`${m}${f.units[p]}`).join(", ")})`:`${i.fn}(${i.nums.map((m,p)=>`${m+(f.nums[p]-m)*r}${i.units[p]}`).join(", ")})`}).join(" ")}function er(e,t,r){if(typeof e=="number"&&typeof t=="number")return String(e+(t-e)*r);let n=String(e),s=String(t);if(Dr(n))return ot(n,s,r);if(n.includes("("))return Or(n,s,r);let i=n.match(/^([-+]?[\d.]+)(.*)$/),c=s.match(/^([-+]?[\d.]+)(.*)$/);if(i&&c){let f=parseFloat(i[1]),m=parseFloat(c[1]);return`${f+(m-f)*r}${i[2]||c[2]}`}return r<1?n:s}function Rr(e){return e.replace(/([A-Z])/g,t=>`-${t.toLowerCase()}`)}var Nr=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),Fr=0,tr="--scroll-draw-progress";function Hr(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}var nr={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function At(e,t){return typeof window>"u"?nr:t.respectReducedMotion===!1?rr(e,t,!1):Ge(t,(r,n)=>rr(e,r,n))}function rr(e,t,r){let{props:n,trigger:s={},easing:i="ease-out",speed:c=1,once:f=!1,axis:m="y",scrollContainer:p,native:v=!0,velocityScale:T=!1,triggerElement:b,onProgress:K,onComplete:fe,onEnter:I,onLeave:E,onEnterBack:A,onLeaveBack:d}=t,w=typeof i=="function"?i:J[i]??J["ease-out"],h=Pe(s.start||"top bottom"),F=Pe(s.end||"bottom top"),O=b??e,C=typeof p=="string"?document.querySelector(p):p??null,V=Object.entries(n).map(([l,u])=>({prop:Rr(l),from:Array.isArray(u)?u[0]:"",to:Array.isArray(u)?u[1]:u}));function Ce(){let l=window.getComputedStyle(e);for(let u of V)u.from===""&&(u.from=l.getPropertyValue(u.prop).trim()||"0")}function ge(){for(let l of V)e.style.setProperty(l.prop,String(l.to))}let he=new Map;for(let l of[...V.map(u=>u.prop),tr])he.set(l,e.style.getPropertyValue(l));function B(){for(let[l,u]of he)u?e.style.setProperty(l,u):e.style.removeProperty(l)}if(r)return ge(),fe?.(),{...nr,destroy:B,getProgress:()=>1};Ce();let oe=()=>C?m==="x"?C.scrollLeft:C.scrollTop:m==="x"?window.scrollX:window.scrollY,Se=()=>C?m==="x"?C.clientWidth:C.clientHeight:m==="x"?window.innerWidth:window.innerHeight,Ne=typeof i=="string"?it(i):null;function Fe(){if(!v||!Hr()||!Ne||m!=="y"||C||O!==e||f||c!==1||K||fe||I||E||A||d||T!==!1||(s.start||"top bottom").trim()!=="top bottom"||(s.end||"bottom top").trim()!=="bottom top")return!1;for(let l of V)if(!Nr.has(l.prop))return!1;return!0}function le(){let l=`ssd-a-${++Fr}`,u=V.map(y=>`${y.prop}:${y.from}`).join(";"),ye=V.map(y=>`${y.prop}:${y.to}`).join(";"),te=document.createElement("style");te.setAttribute("data-ssd-animate",""),te.textContent=`@keyframes ${l}{from{${u}}to{${ye}}}.${l}{animation-name:${l};animation-duration:auto;animation-timing-function:${Ne};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(te),e.classList.add(l);let W=()=>{let y=e.getBoundingClientRect();return Re({top:y.top,height:y.height},oe(),Se(),h,F)};ke(e,{type:"animate",getProgress:()=>N.getProgress(),getTrigger:W});let N={refresh(){},destroy(){e.classList.remove(l),te.remove(),e.style.animationPlayState="",B(),Ee(e)},replay(){e.classList.remove(l),e.offsetWidth,e.classList.add(l)},pause(){e.style.animationPlayState="paused"},resume(){e.style.animationPlayState=""},seek(y){let U=Math.min(1,Math.max(0,y));e.classList.remove(l);for(let ie of V)e.style.setProperty(ie.prop,er(ie.from,ie.to,U))},getProgress(){let{tStart:y,tEnd:U}=W();return w(ne(oe(),y,U,c))}};return N}if(Fe())return le();let z=0,H=0,S=0,L=NaN,be=!1,Ve=-1,q=0,j=0,He=!1,we=NaN,ee=-1,xe=0,pe=O===e?V:[],ve=!1;function Te(){let l=e.style,u=pe.map(N=>l.getPropertyValue(N.prop)),ye=l.transition;pe.length&&(l.transition="none"),pe.forEach(N=>l.setProperty(N.prop,he.get(N.prop)??""));let te=rt(O,C,m);pe.forEach((N,y)=>l.setProperty(N.prop,u[y])),pe.length&&(e.offsetWidth,l.transition=ye);let W=Re(te,te.scroll,Se(),h,F);ve&&Math.abs(W.tStart-z)<1&&Math.abs(W.tEnd-H)<1||(ve=!0,z=W.tStart,H=W.tEnd)}function de(l){e.style.setProperty(tr,String(l));for(let u of V)e.style.setProperty(u.prop,er(u.from,u.to,l));K?.(l)}function $e(l){if(isNaN(we)){we=l;return}we<=0&&l>0?I?.():we>0&&l<=0&&d?.(),we<1&&l>=1?E?.():we>=1&&l<1&&A?.(),we=l}let Ae=l=>ne(l,z,H,Math.min(c,1));function P(){!S&&!be&&Ae(oe())!==L&&(S=requestAnimationFrame(se))}function se(){if(be)return;let l=performance.now(),u=oe(),ye=c;if(T!==!1){let y=l-xe,U=y>0?Math.abs(u-(ee<0?u:ee))/y:0;ye=c*Math.max(.2,1+U*(typeof T=="number"?T:1)*.04)}ee=u,xe=l;let te=H===z?0:(u-z)/(H-z);$e(te);let W=ne(u,z,H,ye),N=f?Math.max(Ve,w(q=Math.max(q,W))):w(W);j=N,de(N),N>=1&&!He?(He=!0,fe?.()):N<1&&!f&&(He=!1),!be&&(L=Ae(u),S=L>0&&L<1?requestAnimationFrame(se):0)}Te(),H===z&&G("scrollAnimate: zero-length trigger window, so it never animates. In a sticky stage, set triggerElement.",e),q=ne(oe(),z,H,c),j=w(q),de(j);function ce(){Te(),P()}let Q;function _(){clearTimeout(Q),Q=setTimeout(ce,150)}let _e=C??window;_e.addEventListener("scroll",P,{passive:!0}),window.addEventListener("resize",_),window.addEventListener("orientationchange",_);let Ze=We([O],_);P(),ke(e,{type:"animate",getProgress:()=>j,getTrigger:()=>({tStart:z,tEnd:H})});function R(){be=!0,cancelAnimationFrame(S),S=0,L=NaN}return{destroy(){R(),_e.removeEventListener("scroll",P),window.removeEventListener("resize",_),window.removeEventListener("orientationchange",_),Ze(),clearTimeout(Q),B(),Ee(e)},replay(){Ve=-1,q=0,He=!1,j=0,be=!1,de(0),L=0,P()},pause:R,resume(){be&&(be=!1,P())},seek(l){let u=Math.min(1,Math.max(0,l));j=u,Ve=u,q=0,R(),de(u)},getProgress(){return j},refresh:ce}}var ft={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function or(e,t){if(typeof window>"u")return ft;let r=typeof e=="string"?document.querySelector(e):e;return r?At(r,t):(G("scrollAnimate: element not found:",e),ft)}function sr(e,t={}){if(typeof window>"u")return ft;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return G("scrollParallax: element not found:",e),ft;let{speed:n=.3,axis:s="y",easing:i="linear",trigger:c,onProgress:f}=t,m=-n*100,p=r.style,v=!!r.ownerSVGElement,T=p.getPropertyValue("transform-box");v&&p.setProperty("transform-box","fill-box");let b=At(r,{props:s==="x"?{transform:["translateX(0%)",`translateX(${m}%)`]}:{transform:["translateY(0%)",`translateY(${m}%)`]},trigger:c??{start:"top bottom",end:"bottom top"},easing:i,native:!1,onProgress:f});return v?{...b,destroy(){b.destroy(),p.setProperty("transform-box",T)}}:b}var Mt={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function ir(e,t){if(typeof window>"u")return Mt;let r=typeof e=="string"?document.querySelector(e):e;return r?Ge(t,(n,s)=>_r(r,n,s)):(G("scrollCounter: element not found:",e),Mt)}function _r(e,t,r){let{from:n=0,to:s,format:i,easing:c="ease-out",trigger:f={},once:m=!0,decimals:p,onComplete:v}=t,T=p!==void 0?S=>S.toFixed(p):i??(S=>String(Math.round(S))),b=typeof c=="function"?c:J[c]??J["ease-out"],K=Pe(f.start||"top 80%"),fe=Pe(f.end||"top 20%");if(r)return e.textContent=T(s),v?.(),{...Mt,getProgress:()=>1};let I=0,E=0,A=!1,d=0,w=!1,h=!1,F=-1,O=0,C=0,V=!1,Ce=()=>window.scrollY,ge=()=>window.innerHeight;function he(){let S=e.getBoundingClientRect(),L=Re({top:S.top,height:S.height},Ce(),ge(),K,fe);A&&Math.abs(L.tStart-I)<1&&Math.abs(L.tEnd-E)<1||(A=!0,I=L.tStart,E=L.tEnd)}let B=e.style.getPropertyValue("--scroll-draw-progress");function oe(S){e.textContent=T(n+(s-n)*S),e.style.setProperty("--scroll-draw-progress",String(S))}function Se(){if(!w||h)return;let S=ne(Ce(),I,E,1),L=m?Math.max(F,b(O=Math.max(O,S))):b(S);C=L,oe(L),L>=1&&!V?(V=!0,v?.()):L<1&&!m&&(V=!1),d=requestAnimationFrame(Se)}he();{O=ne(Ce(),I,E,1);let S=b(O);C=S,oe(S)}let Ne=new IntersectionObserver(S=>{S.forEach(L=>{w=L.isIntersecting,w&&!h?d=requestAnimationFrame(Se):cancelAnimationFrame(d)})}),Fe;function le(){clearTimeout(Fe),Fe=setTimeout(he,150)}window.addEventListener("resize",le),window.addEventListener("orientationchange",le);let z=We([e],le);Ne.observe(e),ke(e,{type:"counter",getProgress:()=>C,getTrigger:()=>({tStart:I,tEnd:E})});function H(){h&&(h=!1,w&&(d=requestAnimationFrame(Se)))}return{destroy(){cancelAnimationFrame(d),Ne.disconnect(),window.removeEventListener("resize",le),window.removeEventListener("orientationchange",le),z(),clearTimeout(Fe),e.style.setProperty("--scroll-draw-progress",B),Ee(e)},replay(){F=-1,O=0,V=!1,C=0,oe(0),H()},pause(){h=!0,cancelAnimationFrame(d)},resume:H,seek(S){let L=Math.min(1,Math.max(0,S));C=L,F=L,O=0,h=!0,cancelAnimationFrame(d),oe(L)},getProgress(){return C}}}var ar="http://www.w3.org/2000/svg",Vr="cinematic-photo",Lt=e=>e<0?0:e>1?1:e;function pt(e){let t=parseFloat(e);return Number.isFinite(t)?Lt(t/100):0}function zr(e){return J[e]??J.linear}var qr={destroy:()=>{},getProgress:()=>0},dt=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||G("Cinematic: wrapper not found:",t.wrapper)}loadStory(t){let r=this.mount;if(typeof window>"u"||!r)return qr;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 s=[];for(let E of t.scenes){if(E.background){let d=document.createElement("img");d.id=Vr,d.src=E.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 A=E.animations.filter(d=>d.type==="draw");if(A.length){let d=document.createElementNS(ar,"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 w of A){let h=document.createElementNS(ar,"path");h.id=w.target.replace(/^#/,""),h.setAttribute("d",w.d),h.setAttribute("fill","none"),h.setAttribute("stroke",w.stroke),h.setAttribute("stroke-width",String(w.strokeWidth)),h.setAttribute("stroke-linecap","round"),h.setAttribute("stroke-linejoin","round");let F=w.length||h.getTotalLength?.()||0;h.style.strokeDasharray=String(F),h.style.strokeDashoffset=String(F),d.appendChild(h),s.push({kind:"draw",el:h,start:pt(w.start),end:pt(w.end),ease:zr(w.easing),length:F})}}for(let d of E.animations){if(d.type!=="fade")continue;let w=n.querySelector(d.target)??document.querySelector(d.target);w&&(w.style.opacity=String(d.from),s.push({kind:"fade",el:w,start:pt(d.start),end:pt(d.end),ease:J["ease-in-out"]??J.linear,from:d.from,to:d.to}))}}let i=0,c=()=>{let E=r.offsetHeight-window.innerHeight;return E<=0?r.getBoundingClientRect().top<=0?1:0:Lt(-r.getBoundingClientRect().top/E)},f=E=>{for(let A of s){let d=A.end-A.start,w=d<=0?E>=A.end?1:0:Lt((E-A.start)/d),h=A.ease(w);A.kind==="draw"?A.el.style.strokeDashoffset=String(A.length*(1-h)):A.el.style.opacity=String(A.from+(A.to-A.from)*h)}};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return f(1),{destroy:()=>{},getProgress:()=>1};let m=0,p=!1,v=!1,T=()=>{i=c(),f(i),p&&(m=requestAnimationFrame(T))},b=()=>{p||(p=!0,m=requestAnimationFrame(T))},K=()=>{p=!1,cancelAnimationFrame(m)},fe=new IntersectionObserver(E=>{for(let A of E)v=A.isIntersecting,v?b():K()},{threshold:0});fe.observe(n),i=c(),f(i),ke(r,{type:"draw",getProgress:()=>i,getTrigger:()=>{let E=r.getBoundingClientRect().top+window.scrollY;return{tStart:E,tEnd:E+Math.max(0,r.offsetHeight-window.innerHeight)}}});let I=ct(E=>{E&&(I(),K(),fe.disconnect(),Ee(r),i=1,f(1))});return{destroy(){I(),K(),fe.disconnect(),Ee(r)},getProgress:()=>i}}};if(typeof HTMLElement<"u"&&typeof customElements<"u"&&!customElements.get("scroll-draw")){let e=["speed","easing","stagger","direction","selector","fade","once"];class t extends HTMLElement{constructor(){super(...arguments);this.instance=null;this.key=""}connectedCallback(){this.build()}attributeChangedCallback(){this.instance&&this.build()}build(){let s=JSON.stringify(e.map(T=>this.getAttribute(T)));if(this.instance&&s===this.key)return;this.instance?.destroy(),this.key=s;let i={},c=this.getAttribute("speed"),f=this.getAttribute("easing"),m=this.getAttribute("stagger"),p=this.getAttribute("direction"),v=this.getAttribute("selector");c&&(i.speed=parseFloat(c)),f&&(i.easing=f),m&&(i.stagger=parseFloat(m)),p&&(i.direction=p),v&&(i.selector=v),this.hasAttribute("fade")&&(i.fade=this.getAttribute("fade")!=="false"),this.hasAttribute("once")&&(i.once=this.getAttribute("once")!=="false"),this.instance=mt(this,i)}disconnectedCallback(){this.instance?.destroy(),this.instance=null}}t.observedAttributes=e,customElements.define("scroll-draw",t)}return vr(Wr);})();
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import {b as b$1,a as a$6}from'./chunk-OJFWQ6CU.mjs';import {a as a$2}from'./chunk-UPWWULKI.mjs';import {a as a$5}from'./chunk-XC5NR2MU.mjs';import {a}from'./chunk-2PYLM3E7.mjs';import {a as a$1,d as d$1,c,b as b$3}from'./chunk-A4JCC3QQ.mjs';import {d}from'./chunk-DM6EDKWH.mjs';import {a as a$4,b as b$2}from'./chunk-BCV4RAIX.mjs';import {b,a as a$3}from'./chunk-LFSU6LR3.mjs';var Et={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 Nt=0;function Ht(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")&&CSS.supports("view-timeline-name: --x")}function St(r,m){let f="";try{f=getComputedStyle(r).getPropertyValue(m).trim();}catch{}return f||(r.getAttribute(m)??"").trim()}var Tt=new Set(["","none","transparent","rgba(0, 0, 0, 0)"]);function It(r){if(!a$3)return;let m=St(r,"stroke");if(!m||m==="none"){b("Element has no stroke \u2014 path will not be visible.",r);return}let f=(r.getAttribute("fill")??"").trim();f&&!Tt.has(f)&&!Tt.has(St(r,"fill"))&&b("Element has a fill \u2014 it may obscure the stroke animation.",r);}function Rt(r,m,f){let p=document.createElement("div");p.setAttribute("data-svg-scroll-draw-debug",""),p.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 x(){let H=f==="x"?window.scrollX:window.scrollY,k=r-H,D=m-H,I=f==="x";p.innerHTML=`
|
|
2
|
+
<div style="position:absolute;${I?`left:${k}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${k}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;${I?`left:${D}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${D}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(p),window.addEventListener("scroll",x,{passive:true}),x(),{el:p,destroy(){window.removeEventListener("scroll",x),p.remove();}}}var $t=/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,At=/[MmLlHhVvCcSsQqTtAaZz]/g;function zt(r,m,f){if(!a$3)return;let p=(r.match(At)??[]).join("").toUpperCase(),x=(m.match(At)??[]).join("").toUpperCase(),H=(r.match($t)??[]).length,k=(m.match($t)??[]).length;if(p!==x){b(`morphTo: command sequence differs (${p||"\u2205"} \u2192 ${x||"\u2205"}). Interpolation is coordinate-for-coordinate, so the result will not reach the target shape. Redraw both paths with the same commands.`,f);return}H!==k&&b(`morphTo: coordinate count differs (${H} \u2192 ${k}). Extra coordinates are ignored and missing ones hold their start value, so the result will not reach the target shape.`,f);}function Vt(r,m,f){let p=(m.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),x=0;return r.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,H=>{let k=parseFloat(H),D=p[x++]??k;return String(+(k+(D-k)*f).toFixed(4))})}function er(r,m={}){return typeof window>"u"?{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0}:a(m,(f,p)=>Wt(r,f,p))}function Wt(r,m,f){let{preset:p,...x}=m,H=p?{...Et[p],...x}:x,{selector:k="path, polyline, line, polygon, rect, circle",speed:D=1,fade:I=false,easing:ue="linear",trigger:Se={},stagger:U=0,direction:u="forward",once:te=false,debug:Ue=false,axis:W="y",scrollContainer:Ce,autoReverse:Oe=false,delay:me=0,strokeColor:j,strokeWidth:X,fillOpacity:Y,waypoints:Q,velocityScale:pe=false,threshold:je=0,rootMargin:Xe="0px",repeat:Z=0,repeatDelay:Fe=0,morphTo:C,clip:Ne,autoplay:Ye=false,duration:xt=1e3,native:kt=true,onProgress:de,onStart:Te,onComplete:ye,onEnter:Qe,onLeave:Ze,onEnterBack:Je,onLeaveBack:Ke}=H,O=Ne===true?"left":typeof Ne=="string"?Ne:false,q=typeof ue=="function"?ue:d[ue]??d.linear,et=a$1(Se.start||"top bottom"),tt=a$1(Se.end||"bottom top"),P=typeof Ce=="string"?document.querySelector(Ce):Ce??null,re=Array.isArray(j)?j[0]:null,se=Array.isArray(j)?j[1]:typeof j=="string"?j:null,J=Array.isArray(X)?X[0]:null,ne=Array.isArray(X)?X[1]:typeof X=="number"?X:null,K=Array.isArray(Y)?Y[0]:null,oe=Array.isArray(Y)?Y[1]:typeof Y=="number"?Y:null;function ie(e){let t=e*100;switch(O){case "right":return `inset(0 0 0 ${100-t}%)`;case "top":return `inset(0 0 ${100-t}% 0)`;case "bottom":return `inset(${100-t}% 0 0 0)`;case "center":return `circle(${e*150}% at 50% 50%)`;default:return `inset(0 ${100-t}% 0 0)`}}let c$1=O?[]:Array.from(r.querySelectorAll(k)),L=[],F=[],$=0,A=0,$e=U,rt=0,v=false,M=false,E=0,Ae=false,ge=-1,ae=[],xe=-1,d$2=false,N=0,R=0,G,He=null;function st(){He?.destroy(),He=null;}let B=new Set,nt=NaN,_=true,ke=-1,ot=performance.now(),le=NaN;function he(){return P?W==="x"?P.scrollLeft:P.scrollTop:W==="x"?window.scrollX:window.scrollY}function it(){return P?W==="x"?P.clientWidth:P.clientHeight:W==="x"?window.innerWidth:window.innerHeight}function at(){let e=a$2(r,P,W);return c(e,e.scroll,it(),et,tt)}function Pt(){let e=A-$,t=c$1.length-1,s=P??document.documentElement,o=W==="x"?"Width":"Height";if($e=U,U>0&&t>0&&e>0){let w=s[`scroll${o}`]-s[`client${o}`]-1-$-e/D;w>=0&&($e=Math.min(U,w/(t*e)));}rt=A+t*$e*e;}function lt(){(({tStart:$,tEnd:A}=at())),Pt(),Ue&&a$3&&(st(),He=Rt($,A,W));}function Ie(e,t=at){a$4(r,{type:"draw",getProgress:()=>e.getProgress(),getTrigger:t});let s=e.destroy;return e.destroy=()=>{s.call(e),b$2(r);},e}function ft(e,t){return te&&!Oe?Math.max(ge,q(ae[e]=Math.max(ae[e]??0,t))):q(t)}function Lt(e,t){if(r.style.setProperty("--scroll-draw-progress",String(e)),O){let s=t==="reverse"?1-e:e;r.style.clipPath=ie(s);return}c$1.forEach((s,o)=>Re(s,o,e,t));}function Re(e,t,s,o){e.style.strokeDashoffset=o==="reverse"?`${L[t]*s}`:`${L[t]*(1-s)}`,I&&(e.style.opacity=o==="reverse"?`${1-s}`:`${s}`),re&&se?e.style.stroke=a$6(re,se,s):se&&(e.style.stroke=se),J!==null&&ne!==null?e.style.strokeWidth=`${J+(ne-J)*s}`:ne!==null&&(e.style.strokeWidth=`${ne}`),K!==null&&oe!==null?e.style.fillOpacity=`${K+(oe-K)*s}`:oe!==null&&(e.style.fillOpacity=`${oe}`),C&&e.tagName.toLowerCase()==="path"&&F[t]&&e.setAttribute("d",Vt(F[t],C,s));}function ve(){if(r.style.setProperty("--scroll-draw-progress","0"),O){r.style.clipPath=ie(u==="reverse"?1:0);return}c$1.forEach((e,t)=>{e.style.strokeDasharray=`${L[t]}`,e.style.strokeDashoffset=u==="reverse"?"0":`${L[t]}`,I?e.style.opacity=u==="reverse"?"1":"0":e.style.opacity="",re&&(e.style.stroke=re),J!==null&&(e.style.strokeWidth=`${J}`),K!==null&&(e.style.fillOpacity=`${K}`),C&&e.tagName.toLowerCase()==="path"&&F[t]&&e.setAttribute("d",F[t]);});}function we(e,t){let s=e.getAttribute("d"),o=a$5(e);if(C&&F[t]){e.setAttribute("d",C);let w=a$5(e);e.setAttribute("d",F[t]),o=Math.max(a$5(e),w),e.setAttribute("d",s);}L[t]=o,e.style.strokeDasharray=`${o}`;}if(c$1.forEach((e,t)=>{It(e);let s=e.tagName.toLowerCase()==="path";s?F.push(e.getAttribute("d")??""):F.push(""),we(e,t);let o=L[t];C&&(s?zt(F[F.length-1],C,e):b(`morphTo only applies to <path> elements \u2014 ignored on <${e.tagName}>.`,e)),f?(e.style.strokeDashoffset=u==="reverse"?`${o}`:"0",I&&(e.style.opacity="1"),se&&(e.style.stroke=se),ne!==null&&(e.style.strokeWidth=`${ne}`),oe!==null&&(e.style.fillOpacity=`${oe}`),C&&e.tagName.toLowerCase()==="path"&&e.setAttribute("d",C)):(e.style.strokeDashoffset=u==="reverse"?"0":`${o}`,I?e.style.opacity=u==="reverse"?"1":"0":e.style.opacity="",re&&(e.style.stroke=re),J!==null&&(e.style.strokeWidth=`${J}`),K!==null&&(e.style.fillOpacity=`${K}`));}),f)return O&&(r.style.clipPath=ie(1)),ye?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};O&&(r.style.clipPath=ie(u==="reverse"?1:0));let ct=typeof ue=="string"?b$1(ue):null;function Mt(){return !(kt===false||Ye||Ue&&a$3||!Ht()||!c$1.length||!ct||O||W!=="y"||P||D!==1||U!==0||te||Oe||pe!==false||C||Q||Z||me>0||de||Te||ye||Qe||Ze||Je||Ke||j!=null||X!=null||Y!=null||(Se.start||"top bottom").trim()!=="top bottom"||(Se.end||"bottom top").trim()!=="bottom top")}function Dt(){let e=++Nt,t=`svg-scroll-draw-${e}`,s=`svg-scroll-draw-host-${e}`,o=`--svg-scroll-draw-${e}`,w=u==="reverse"?"0":"var(--ssd-len)",z=u==="reverse"?"var(--ssd-len)":"0",S=`stroke-dashoffset:${w};`,a=`stroke-dashoffset:${z};`;I&&(S+=`opacity:${u==="reverse"?1:0};`,a+=`opacity:${u==="reverse"?0:1};`);let l=document.createElement("style");l.setAttribute("data-svg-scroll-draw",""),l.textContent=`@keyframes ${t}{from{${S}}to{${a}}}.${s}{view-timeline-name:${o};view-timeline-axis:block;}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${ct};animation-fill-mode:both;animation-timeline:${o};animation-range:cover 0% cover 100%;}`,document.head.appendChild(l),r.classList.add(s);function y(n,i){n.style.setProperty("--ssd-len",String(L[i])),n.style.strokeDasharray=`${L[i]}`,n.style.strokeDashoffset="",n.style.opacity="",n.style.animationPlayState="",n.classList.add(t);}c$1.forEach(y);let g=false,b=-1;function T(){if(b>=0)return b;let n=r.getBoundingClientRect(),{tStart:i,tEnd:h}=c({top:n.top,height:n.height},he(),it(),et,tt);return q(b$3(he(),i,h,D))}return {destroy(){r.classList.remove(s),c$1.forEach(n=>{n.classList.remove(t),n.style.removeProperty("--ssd-len"),n.style.animationPlayState="";}),l.remove();},replay(){g=false,b=-1,c$1.forEach(y);},pause(){g=true,c$1.forEach(n=>{n.style.animationPlayState="paused";});},resume(){g&&(g=false,c$1.forEach(n=>{n.style.animationPlayState="running";}));},seek(n){let i=Math.min(1,Math.max(0,n));b=i,g=true,c$1.forEach((h,V)=>{h.classList.remove(t),h.style.strokeDashoffset=u==="reverse"?`${L[V]*i}`:`${L[V]*(1-i)}`,I&&(h.style.opacity=u==="reverse"?`${1-i}`:`${i}`);});},getProgress(){return T()},refresh(){c$1.forEach((n,i)=>{we(n,i),n.style.setProperty("--ssd-len",String(L[i]));});}}}if(Mt())return Ie(Dt());function Ct(){let e=Math.max(1,xt),t=O?e:e*(1+Math.max(0,c$1.length-1)*U),s=0,o=0,w=false;function z(b){let T=true,n=Math.min(1,Math.max(0,b/t));if(O){let i=Math.min(1,Math.max(0,b/e)),h=q(i);N=h,r.style.setProperty("--scroll-draw-progress",String(h)),r.style.clipPath=ie(u==="reverse"?1-h:h),de?.(h),i<1&&(T=false);}else {c$1.forEach((h,V)=>{let Ft=V*U*e,pt=Math.min(1,Math.max(0,(b-Ft)/e));Re(h,V,q(pt),u),pt<1&&(T=false);});let i=q(n);N=i,de?.(i),r.style.setProperty("--scroll-draw-progress",String(i));}if(Q){let i=q(n);for(let h in Q){let V=parseFloat(h);i>=V&&!B.has(V)&&(B.add(V),Q[h]?.());}}return T}function S(b){if(d$2)return;let T=b-s;M||(M=true,Te?.());let n=z(T);if(n&&!v){v=true,z(t),ye?.(),R<(Z==="infinite"?1/0:Z??0)&&(R++,G=setTimeout(()=>{s=performance.now(),M=false,v=false,B.clear(),ve(),E=requestAnimationFrame(S);},Fe));return}n||(E=requestAnimationFrame(S));}function a(){cancelAnimationFrame(E),clearTimeout(G),s=performance.now(),o=0,d$2=false,M=false,v=false,R=0,w=true,N=0,B.clear(),ve(),E=requestAnimationFrame(S);}let l=new IntersectionObserver(b=>{b.forEach(T=>{T.isIntersecting&&!(te&&v)?a():!T.isIntersecting&&!te&&!v&&(cancelAnimationFrame(E),clearTimeout(G),w=false);});},{root:P??null,threshold:je,rootMargin:Xe}),y;function g(){clearTimeout(y),y=setTimeout(()=>c$1.forEach(we),150);}return window.addEventListener("resize",g),window.addEventListener("orientationchange",g),me>0?setTimeout(()=>l.observe(r),me):l.observe(r),{destroy(){cancelAnimationFrame(E),clearTimeout(G),l.disconnect(),window.removeEventListener("resize",g),window.removeEventListener("orientationchange",g),clearTimeout(y);},replay(){R=0,a();},pause(){d$2||!w||(d$2=true,o=performance.now()-s,cancelAnimationFrame(E));},resume(){d$2&&(d$2=false,w=true,s=performance.now()-o,E=requestAnimationFrame(S));},seek(b){let T=Math.min(1,Math.max(0,b));N=T,d$2=true,o=T*t,s=performance.now()-o,cancelAnimationFrame(E),z(o);},getProgress(){return N},refresh(){clearTimeout(y),c$1.forEach(we);}}}if(Ye)return Ie(Ct());lt();function ut(){if(d$2||!fe)return;let e=performance.now(),t=he();if(!_&&pe===false&&t===nt){Ve(t);return}_=false,nt=t;let s=D;if(pe!==false){let a=e-ot,l=a>0?Math.abs(t-(ke<0?t:ke))/a:0;s=D*Math.max(.2,1+l*(typeof pe=="number"?pe:1)*.04);}ke=t,ot=e;let o=Oe?xe===-1||t>=xe?"forward":"reverse":u;xe=t;let w=A-$,z=true,S=w===0?0:(t-$)/w;if(isNaN(le)||(le<=0&&S>0?Qe?.():le>0&&S<=0&&Ke?.(),le<1&&S>=1?Ze?.():le>=1&&S<1&&Je?.()),le=S,O){let a=ft(0,b$3(t,$,A,s));N=a,r.style.setProperty("--scroll-draw-progress",String(a));let l=o==="reverse"?1-a:a;r.style.clipPath=ie(l),de?.(a),!M&&b$3(t,$,A,s)>0&&(M=true,Te?.()),a>=1&&!v?(v=true,ye?.(),R<(Z==="infinite"?1/0:Z??0)&&(R++,G=setTimeout(()=>{ge=-1,ae=[],M=false,v=false,ve();},Fe))):a<1&&!te&&(v=false),Ve(t);return}if(c$1.forEach((a,l)=>{let y=l*$e*w,g=ft(l,b$3(t,$+y,A+y,s));Re(a,l,g,o),l===0&&(N=g,de?.(g),r.style.setProperty("--scroll-draw-progress",String(g))),g<1&&(z=false);}),Q){let a=q(b$3(t,$,A,s));for(let l in Q){let y=parseFloat(l);a>=y&&!B.has(y)&&(B.add(y),Q[l]?.());}}!M&&b$3(t,$,A,s)>0&&(M=true,Te?.()),z&&!v?(v=true,ye?.(),R<(Z==="infinite"?1/0:Z??0)&&(R++,G=setTimeout(()=>{ge=-1,ae=[],M=false,v=false,B.clear(),ve(),_=true;},Fe))):!z&&!te&&(v=false),Ve(t);}function ze(e){return e>=A&&e<rt}function Ve(e){Ae||ze(e)?E=requestAnimationFrame(ut):fe=false;}function We(){return Ae||ze(he())}let fe=false;function Pe(){fe||(fe=true,E=requestAnimationFrame(function(){ut();}));}function Le(){fe=false,cancelAnimationFrame(E);}let qe=new IntersectionObserver(e=>{e.forEach(t=>{Ae=t.isIntersecting,Ae&&!d$2?(_=true,Pe()):fe&&!d$2&&ze(he())||Le();});},{root:P??null,threshold:je,rootMargin:Xe});function mt(){c$1.forEach(we),lt(),_=true;}let Me;function be(){clearTimeout(Me),Me=setTimeout(mt,150);}window.addEventListener("resize",be),window.addEventListener("orientationchange",be);let Ot=d$1([r],be);return me>0?setTimeout(()=>qe.observe(r),me):qe.observe(r),Ie({destroy(){cancelAnimationFrame(E),clearTimeout(G),Le(),qe.disconnect(),Ot(),window.removeEventListener("resize",be),window.removeEventListener("orientationchange",be),clearTimeout(Me),st();},replay(){ge=-1,ae=[],xe=-1,ke=-1,M=false,v=false,R=0,d$2=false,N=0,B.clear(),clearTimeout(G),ve(),_=true,We()&&Pe();},pause(){d$2=true,Le();},resume(){d$2&&(d$2=false,_=true,We()&&Pe());},seek(e){let t=Math.min(1,Math.max(0,e));N=t,ge=t,ae=[],d$2=true,Le(),Lt(t,u),_=true;},getProgress(){return N},refresh(){clearTimeout(Me),mt(),We()&&!d$2&&Pe();}},()=>({tStart:$,tEnd:A}))}export{Et as a,er as b};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import {b}from'./chunk-
|
|
1
|
+
import {b}from'./chunk-6TWFLRUB.mjs';import {b as b$1}from'./chunk-LFSU6LR3.mjs';function l(r,s){let n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return n;let o=typeof r=="string"?document.querySelector(r):r;return o?b(o,s):(b$1("Container not found:",r),n)}export{l as a};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import {a}from'./chunk-2PYLM3E7.mjs';import {a as a$1,b as b$1,d as d$1,c}from'./chunk-A4JCC3QQ.mjs';import {d}from'./chunk-DM6EDKWH.mjs';import {a as a$2,b as b$2}from'./chunk-BCV4RAIX.mjs';import {b}from'./chunk-LFSU6LR3.mjs';var P={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function te(t,w){if(typeof window>"u")return P;let u=typeof t=="string"?document.querySelector(t):t;return u?a(w,(m,f)=>K(u,m,f)):(b("scrollCounter: element not found:",t),P)}function K(t,w,u){let{from:m=0,to:f,format:B,easing:h="ease-out",trigger:F={},once:M=true,decimals:x,onComplete:I}=w,z=x!==void 0?e=>e.toFixed(x):B??(e=>String(Math.round(e))),y=typeof h=="function"?h:d[h]??d["ease-out"],G=a$1(F.start||"top 80%"),W=a$1(F.end||"top 20%");if(u)return t.textContent=z(f),I?.(),{...P,getProgress:()=>1};let a=0,c$1=0,L=false,n=0,g=false,o=false,b=-1,s=0,i=0,p=false,v=()=>window.scrollY,Y=()=>window.innerHeight;function O(){let e=t.getBoundingClientRect(),r=c({top:e.top,height:e.height},v(),Y(),G,W);L&&Math.abs(r.tStart-a)<1&&Math.abs(r.tEnd-c$1)<1||(L=true,a=r.tStart,c$1=r.tEnd);}let j=t.style.getPropertyValue("--scroll-draw-progress");function d$2(e){t.textContent=z(m+(f-m)*e),t.style.setProperty("--scroll-draw-progress",String(e));}function S(){if(!g||o)return;let e=b$1(v(),a,c$1,1),r=M?Math.max(b,y(s=Math.max(s,e))):y(e);i=r,d$2(r),r>=1&&!p?(p=true,I?.()):r<1&&!M&&(p=false),n=requestAnimationFrame(S);}O();{s=b$1(v(),a,c$1,1);let e=y(s);i=e,d$2(e);}let R=new IntersectionObserver(e=>{e.forEach(r=>{g=r.isIntersecting,g&&!o?n=requestAnimationFrame(S):cancelAnimationFrame(n);});}),C;function l(){clearTimeout(C),C=setTimeout(O,150);}window.addEventListener("resize",l),window.addEventListener("orientationchange",l);let J=d$1([t],l);R.observe(t),a$2(t,{type:"counter",getProgress:()=>i,getTrigger:()=>({tStart:a,tEnd:c$1})});function q(){o&&(o=false,g&&(n=requestAnimationFrame(S)));}return {destroy(){cancelAnimationFrame(n),R.disconnect(),window.removeEventListener("resize",l),window.removeEventListener("orientationchange",l),J(),clearTimeout(C),t.style.setProperty("--scroll-draw-progress",j),b$2(t);},replay(){b=-1,s=0,p=false,i=0,d$2(0),q();},pause(){o=true,cancelAnimationFrame(n);},resume:q,seek(e){let r=Math.min(1,Math.max(0,e));i=r,b=r,s=0,o=true,cancelAnimationFrame(n),d$2(r);},getProgress(){return i}}}export{te as a};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import {a}from'./chunk-2PYLM3E7.mjs';import {a as a$1,d as d$1,c,b as b$2}from'./chunk-A4JCC3QQ.mjs';import {d}from'./chunk-DM6EDKWH.mjs';import {a as a$2,b as b$1}from'./chunk-BCV4RAIX.mjs';import {b}from'./chunk-LFSU6LR3.mjs';function _(e,o){let t=document.createElement("span");t.textContent=o,t.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;user-select:none",e.appendChild(t);}function S(e=""){let o=document.createElement("span");return o.setAttribute("aria-hidden","true"),o.textContent=e,o}function G(e){let o=e.textContent??"";return e.textContent="",o.split(/(\s+)/).filter(Boolean).map(t=>{let n=e.appendChild(S(t)),a=/^\s+$/.test(t);return a?n.style.whiteSpace="pre":n.style.display="inline-block",a?null:n}).filter(t=>t!==null)}function ee(e){let o=e.textContent??"";e.textContent="";let t=[],n=null;for(let a of o){let r=S(a),i=a===" ";i?r.style.whiteSpace="pre":(r.style.display="inline-block",t.push(r)),i||a>"\u0DFF"?n=null:n||(n=e.appendChild(S()),n.style.cssText="display:inline-block;white-space:nowrap"),(n??e).appendChild(r);}return t}function j(e){let o=G(e),t=new Map;for(let r of o){let i=r.offsetTop;t.has(i)||t.set(i,[]),t.get(i).push(r);}let n=[],a=Array.from(t.keys()).sort((r,i)=>r-i);for(let r of a){let i=t.get(r),l=S();l.style.display="inline-block",i.forEach((g,w)=>{let h=g.nextElementSibling;l.appendChild(g),w<i.length-1&&h&&h.style.whiteSpace==="pre"&&l.appendChild(h);}),n.push(l);}return e.textContent="",n.forEach((r,i)=>{e.appendChild(r),i<n.length-1&&e.appendChild(document.createTextNode(" "));}),n}function te(e,o,t,n){if(t<=1||n===0)return e;n=Math.min(n,1/t);let a=(t-1)*n,r=o*n,i=r+(1-a);return i<=r?e>=r?1:0:Math.min(1,Math.max(0,(e-r)/(i-r)))}function ne(e,o){let t=[];if(o?.y!==void 0&&t.push(`translateY(${o.y*(1-e)}px)`),o?.x!==void 0&&t.push(`translateX(${o.x*(1-e)}px)`),o?.rotate!==void 0&&t.push(`rotate(${o.rotate*(1-e)}deg)`),o?.scale!==void 0){let n=o.scale+(1-o.scale)*e;t.push(`scale(${n})`);}return t.join(" ")}var F={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function pe(e,o={}){if(typeof window>"u")return F;let t=typeof e=="string"?document.querySelector(e):e;if(!t)return b("scrollText: element not found:",e),F;let n=t;return a(o,(a,r)=>oe(n,a,r))}function oe(e,o,t){let{split:n="words",stagger:a=.04,easing:r="ease-out",from:i={opacity:0,y:24},trigger:l={},once:g=true,onComplete:w}=o,h=typeof r=="function"?r:d[r]??d["ease-out"],U=a$1(l.start||"top 85%"),V=a$1(l.end||"top 40%"),M=e.innerHTML,P=e.textContent??"",u;n==="chars"?u=ee(e):n==="lines"?u=j(e):u=G(e),_(e,P);let X=u.length;function J(s,c){i?.opacity!==void 0&&(s.style.opacity=String(i.opacity+(1-i.opacity)*c));let E=ne(c,i);E&&(s.style.transform=E);}function m(s){e.style.setProperty("--scroll-draw-progress",String(s)),u.forEach((c,E)=>{let Z=h(te(s,E,X,a));J(c,Z);});}if(t)return m(1),w?.(),{...F,destroy:()=>{e.innerHTML=M;},getProgress:()=>1};m(0);let L=0,C=0,p=0,b=false,d$2=false,y=-1,f=0,x=false,O=()=>window.scrollY,K=()=>window.innerHeight;function k(){let s=e.getBoundingClientRect(),c$1=c({top:s.top,height:s.height},O(),K(),U,V);L=c$1.tStart,C=c$1.tEnd;}function v(){if(!b||d$2)return;let s=b$2(O(),L,C,1);g&&(y=Math.max(y,s),s=y),f=s,m(s),s>=1&&!x?(x=true,w?.()):s<1&&!g&&(x=false),p=requestAnimationFrame(v);}k();let z=new IntersectionObserver(s=>{s.forEach(c=>{b=c.isIntersecting,b&&!d$2?p=requestAnimationFrame(v):cancelAnimationFrame(p);});}),H;function T(){clearTimeout(H),H=setTimeout(()=>{if(n==="lines"){let s=f;e.innerHTML=M,u=j(e),_(e,P),m(s);}k();},150);}window.addEventListener("resize",T),window.addEventListener("orientationchange",T);let Q=d$1([e],T);z.observe(e),a$2(e,{type:"text",getProgress:()=>f,getTrigger:()=>({tStart:L,tEnd:C})});function D(){d$2&&(d$2=false,b&&(p=requestAnimationFrame(v)));}return {destroy(){cancelAnimationFrame(p),z.disconnect(),window.removeEventListener("resize",T),window.removeEventListener("orientationchange",T),Q(),clearTimeout(H),e.innerHTML=M,b$1(e);},replay(){y=-1,x=false,f=0,m(0),D();},pause(){d$2=true,cancelAnimationFrame(p);},resume:D,seek(s){let c=Math.min(1,Math.max(0,s));f=c,y=c,d$2=true,cancelAnimationFrame(p),m(c);},getProgress(){return f}}}export{pe as a};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import {b,a as a$4}from'./chunk-OJFWQ6CU.mjs';import {a as a$3}from'./chunk-UPWWULKI.mjs';import {a}from'./chunk-2PYLM3E7.mjs';import {a as a$1,b as b$2,d as d$1,c}from'./chunk-A4JCC3QQ.mjs';import {d}from'./chunk-DM6EDKWH.mjs';import {a as a$2,b as b$3}from'./chunk-BCV4RAIX.mjs';import {b as b$1}from'./chunk-LFSU6LR3.mjs';function Ne(t){return t.startsWith("#")||t.startsWith("rgb")||t.startsWith("hsl")}function ve(t){let i=[],l=/([\w]+)\(([^)]*)\)/g,s;for(;(s=l.exec(t))!==null;){let m=[],r=[],c=s[2].trim();if(c)for(let u of c.split(/[\s,]+/)){let o=u.match(/^([-+]?[\d.eE]+)(.*)$/);m.push(o?parseFloat(o[1]):0),r.push(o?o[2]:"");}i.push({fn:s[1],nums:m,units:r});}return i}function Re(t,i,l){let s=ve(t),m=ve(i);return s.length===0||s.length!==m.length?l<1?t:i:s.map((r,c)=>{let u=m[c];return r.fn!==u.fn||r.nums.length!==u.nums.length?l<1?`${r.fn}(${r.nums.map((o,p)=>`${o}${r.units[p]}`).join(", ")})`:`${u.fn}(${u.nums.map((o,p)=>`${o}${u.units[p]}`).join(", ")})`:`${r.fn}(${r.nums.map((o,p)=>`${o+(u.nums[p]-o)*l}${r.units[p]}`).join(", ")})`}).join(" ")}function be(t,i,l){if(typeof t=="number"&&typeof i=="number")return String(t+(i-t)*l);let s=String(t),m=String(i);if(Ne(s))return a$4(s,m,l);if(s.includes("("))return Re(s,m,l);let r=s.match(/^([-+]?[\d.]+)(.*)$/),c=m.match(/^([-+]?[\d.]+)(.*)$/);if(r&&c){let u=parseFloat(r[1]),o=parseFloat(c[1]);return `${u+(o-u)*l}${r[2]||c[2]}`}return l<1?s:m}function Fe(t){return t.replace(/([A-Z])/g,i=>`-${i.toLowerCase()}`)}var ke=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),Ie=0,Se="--scroll-draw-progress";function Ve(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}var Te={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Ue(t,i){return typeof window>"u"?Te:i.respectReducedMotion===false?we(t,i,false):a(i,(l,s)=>we(t,l,s))}function we(t,i,l){let{props:s,trigger:m={},easing:r="ease-out",speed:c$1=1,once:u=false,axis:o="y",scrollContainer:p,native:Le=true,velocityScale:R=false,triggerElement:Pe,onProgress:J,onComplete:O,onEnter:K,onLeave:Q,onEnterBack:ee,onLeaveBack:te}=i,F=typeof r=="function"?r:d[r]??d["ease-out"],ne=a$1(m.start||"top bottom"),re=a$1(m.end||"bottom top"),k=Pe??t,y=typeof p=="string"?document.querySelector(p):p??null,h=Object.entries(s).map(([e,n])=>({prop:Fe(e),from:Array.isArray(n)?n[0]:"",to:Array.isArray(n)?n[1]:n}));function Me(){let e=window.getComputedStyle(t);for(let n of h)n.from===""&&(n.from=e.getPropertyValue(n.prop).trim()||"0");}function $e(){for(let e of h)t.style.setProperty(e.prop,String(e.to));}let W=new Map;for(let e of [...h.map(n=>n.prop),Se])W.set(e,t.style.getPropertyValue(e));function B(){for(let[e,n]of W)n?t.style.setProperty(e,n):t.style.removeProperty(e);}if(l)return $e(),O?.(),{...Te,destroy:B,getProgress:()=>1};Me();let $=()=>y?o==="x"?y.scrollLeft:y.scrollTop:o==="x"?window.scrollX:window.scrollY,oe=()=>y?o==="x"?y.clientWidth:y.clientHeight:o==="x"?window.innerWidth:window.innerHeight,se=typeof r=="string"?b(r):null;function Ae(){if(!Le||!Ve()||!se||o!=="y"||y||k!==t||u||c$1!==1||J||O||K||Q||ee||te||R!==false||(m.start||"top bottom").trim()!=="top bottom"||(m.end||"bottom top").trim()!=="bottom top")return false;for(let e of h)if(!ke.has(e.prop))return false;return true}function Ce(){let e=`ssd-a-${++Ie}`,n=h.map(a=>`${a.prop}:${a.from}`).join(";"),M=h.map(a=>`${a.prop}:${a.to}`).join(";"),v=document.createElement("style");v.setAttribute("data-ssd-animate",""),v.textContent=`@keyframes ${e}{from{${n}}to{${M}}}.${e}{animation-name:${e};animation-duration:auto;animation-timing-function:${se};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(v),t.classList.add(e);let d=()=>{let a=t.getBoundingClientRect();return c({top:a.top,height:a.height},$(),oe(),ne,re)};a$2(t,{type:"animate",getProgress:()=>f.getProgress(),getTrigger:d});let f={refresh(){},destroy(){t.classList.remove(e),v.remove(),t.style.animationPlayState="",B(),b$3(t);},replay(){t.classList.remove(e),t.offsetWidth,t.classList.add(e);},pause(){t.style.animationPlayState="paused";},resume(){t.style.animationPlayState="";},seek(a){let x=Math.min(1,Math.max(0,a));t.classList.remove(e);for(let z of h)t.style.setProperty(z.prop,be(z.from,z.to,x));},getProgress(){let{tStart:a,tEnd:x}=d();return F(b$2($(),a,x,c$1))}};return f}if(Ae())return Ce();let g=0,E=0,A=0,T=NaN,b$4=false,j=-1,L=0,S=0,I=false,w=NaN,D=-1,ie=0,C=k===t?h:[],ae=false;function le(){let e=t.style,n=C.map(f=>e.getPropertyValue(f.prop)),M=e.transition;C.length&&(e.transition="none"),C.forEach(f=>e.setProperty(f.prop,W.get(f.prop)??""));let v=a$3(k,y,o);C.forEach((f,a)=>e.setProperty(f.prop,n[a])),C.length&&(t.offsetWidth,e.transition=M);let d=c(v,v.scroll,oe(),ne,re);ae&&Math.abs(d.tStart-g)<1&&Math.abs(d.tEnd-E)<1||(ae=true,g=d.tStart,E=d.tEnd);}function V(e){t.style.setProperty(Se,String(e));for(let n of h)t.style.setProperty(n.prop,be(n.from,n.to,e));J?.(e);}function He(e){if(isNaN(w)){w=e;return}w<=0&&e>0?K?.():w>0&&e<=0&&te?.(),w<1&&e>=1?Q?.():w>=1&&e<1&&ee?.(),w=e;}let me=e=>b$2(e,g,E,Math.min(c$1,1));function P(){!A&&!b$4&&me($())!==T&&(A=requestAnimationFrame(ce));}function ce(){if(b$4)return;let e=performance.now(),n=$(),M=c$1;if(R!==false){let a=e-ie,x=a>0?Math.abs(n-(D<0?n:D))/a:0;M=c$1*Math.max(.2,1+x*(typeof R=="number"?R:1)*.04);}D=n,ie=e;let v=E===g?0:(n-g)/(E-g);He(v);let d=b$2(n,g,E,M),f=u?Math.max(j,F(L=Math.max(L,d))):F(d);S=f,V(f),f>=1&&!I?(I=true,O?.()):f<1&&!u&&(I=false),!b$4&&(T=me(n),A=T>0&&T<1?requestAnimationFrame(ce):0);}le(),E===g&&b$1("scrollAnimate: zero-length trigger window, so it never animates. In a sticky stage, set triggerElement.",t),L=b$2($(),g,E,c$1),S=F(L),V(S);function ue(){le(),P();}let _;function H(){clearTimeout(_),_=setTimeout(ue,150);}let fe=y??window;fe.addEventListener("scroll",P,{passive:true}),window.addEventListener("resize",H),window.addEventListener("orientationchange",H);let xe=d$1([k],H);P(),a$2(t,{type:"animate",getProgress:()=>S,getTrigger:()=>({tStart:g,tEnd:E})});function q(){b$4=true,cancelAnimationFrame(A),A=0,T=NaN;}return {destroy(){q(),fe.removeEventListener("scroll",P),window.removeEventListener("resize",H),window.removeEventListener("orientationchange",H),xe(),clearTimeout(_),B(),b$3(t);},replay(){j=-1,L=0,I=false,S=0,b$4=false,V(0),T=0,P();},pause:q,resume(){b$4&&(b$4=false,P());},seek(e){let n=Math.min(1,Math.max(0,e));S=n,j=n,L=0,q(),V(n);},getProgress(){return S},refresh:ue}}export{Ue as a};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import {a,d as d$1,c,b as b$2}from'./chunk-A4JCC3QQ.mjs';import {d}from'./chunk-DM6EDKWH.mjs';import {a as a$1}from'./chunk-5PJEKEEP.mjs';import {a as a$2,b as b$1}from'./chunk-BCV4RAIX.mjs';import {b}from'./chunk-LFSU6LR3.mjs';var J={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function ce(m,E={}){if(typeof window>"u")return J;let b$3=typeof m=="string"?document.querySelector(m):m;if(!b$3||b$3.tagName.toLowerCase()!=="video")return b("scrollVideo: <video> element not found:",m),J;let t=b$3,{trigger:P={},easing:T="linear",once:C=false,axis:u="y",preload:K="auto",triggerElement:Q,onReady:I,onComplete:U,onProgress:Z}=E,R=Q??t,f=window.matchMedia("(prefers-reduced-motion: reduce)").matches,V=typeof T=="function"?T:d[T]??d.linear,$=a(P.start||"top top"),ee=a(P.end||"bottom top");t.pause(),t.hasAttribute("preload")||(t.preload=K);let q=E.from??0,A=E.to,g=0,p=0,o=0,l=false,n=false,S=-1,w=0,a$3=0,v=false,i=false,O=()=>u==="x"?window.scrollX:window.scrollY,te=()=>u==="x"?window.innerWidth:window.innerHeight;function x(){let e=R.getBoundingClientRect(),r=u==="x"?e.left:e.top,d=u==="x"?e.width:e.height,_=c({top:r,height:d},O(),te(),$,ee);g=_.tStart,p=_.tEnd,i&&p===g&&b("scrollVideo: zero-length trigger window, so it never scrubs. In a sticky stage, set triggerElement.",t);}let h=NaN;function s(e){if(!i)return;let r=A??t.duration??0,d=q+(r-q)*e;d!==h&&(h=d,t.currentTime=d),t.style.setProperty("--scroll-draw-progress",String(e)),Z?.(e);}function y(){if(!l||n||!i||f)return;let e=b$2(O(),g,p,1),r=C?Math.max(S,V(w=Math.max(w,e))):V(e);a$3=r,s(r),r>=1&&!v?(v=true,U?.()):r<1&&!C&&(v=false),o=requestAnimationFrame(y);}function L(){if(i=true,A===void 0&&(A=t.duration),f){s(1),I?.();return}x(),I?.(),n?s(a$3):l&&(o=requestAnimationFrame(y));}t.readyState>=1?L():t.addEventListener("loadedmetadata",L,{once:true}),i||x();let k=f?()=>{}:a$1(e=>{e&&(k(),f=true,cancelAnimationFrame(o),s(1));}),D=new IntersectionObserver(e=>{e.forEach(r=>{l=r.isIntersecting,l&&!n&&i?o=requestAnimationFrame(y):cancelAnimationFrame(o);});}),N;function c$1(){clearTimeout(N),N=setTimeout(x,150);}window.addEventListener("resize",c$1),window.addEventListener("orientationchange",c$1);let re=d$1([R],c$1);D.observe(t),a$2(t,{type:"video",getProgress:()=>a$3,getTrigger:()=>({tStart:g,tEnd:p})});function H(){n&&(n=false,l&&i&&(o=requestAnimationFrame(y)));}return {destroy(){cancelAnimationFrame(o),D.disconnect(),t.removeEventListener("loadedmetadata",L),window.removeEventListener("resize",c$1),window.removeEventListener("orientationchange",c$1),re(),k(),clearTimeout(N),b$1(t);},replay(){S=-1,w=0,v=false,a$3=0,h=NaN,s(0),H();},pause(){n=true,cancelAnimationFrame(o);},resume:H,seek(e){let r=Math.min(1,Math.max(0,e));a$3=r,S=r,w=0,n=true,cancelAnimationFrame(o),h=NaN,s(r);},getProgress(){return a$3}}}export{ce as a};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
function g(i,t,n){let e=i.getBoundingClientRect(),o=n==="x"?e.width:e.height;return t?{top:n==="x"?e.left-t.getBoundingClientRect().left-t.clientLeft+t.scrollLeft:e.top-t.getBoundingClientRect().top-t.clientTop+t.scrollTop,height:o,scroll:0}:{top:n==="x"?e.left:e.top,height:o,scroll:n==="x"?window.scrollX:window.scrollY}}export{g as a};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
function o(t){let r=parseFloat(t.getAttribute("pathLength")??"");if(r>0)return r;let n=t.tagName.toLowerCase();if(n==="rect"){let e=parseFloat(t.getAttribute("width")??"0"),a=parseFloat(t.getAttribute("height")??"0");return 2*(e+a)}if(n==="circle"){let e=parseFloat(t.getAttribute("r")??"0");return 2*Math.PI*e}return t.getTotalLength()}export{o as a};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import {a}from'./chunk-
|
|
1
|
+
import {a}from'./chunk-OPXWNJBG.mjs';import {b as b$1}from'./chunk-LFSU6LR3.mjs';var n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function b(e,o){if(typeof window>"u")return n;let r=typeof e=="string"?document.querySelector(e):e;return r?a(r,o):(b$1("scrollAnimate: element not found:",e),n)}function P(e,o={}){if(typeof window>"u")return n;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return b$1("scrollParallax: element not found:",e),n;let{speed:c=.3,axis:p="y",easing:f="linear",trigger:u,onProgress:g}=o,i=-c*100,s=r.style,m=!!r.ownerSVGElement,y=s.getPropertyValue("transform-box");m&&s.setProperty("transform-box","fill-box");let l=a(r,{props:p==="x"?{transform:["translateX(0%)",`translateX(${i}%)`]}:{transform:["translateY(0%)",`translateY(${i}%)`]},trigger:u??{start:"top bottom",end:"bottom top"},easing:f,native:false,onProgress:g});return m?{...l,destroy(){l.destroy(),s.setProperty("transform-box",y);}}:l}export{b as a,P as b};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import {a,b as b$1}from'./chunk-XSVTHCLO.mjs';import {a as a$3}from'./chunk-
|
|
1
|
+
import {a,b as b$1}from'./chunk-XSVTHCLO.mjs';import {a as a$3}from'./chunk-QFSTKVA3.mjs';import {a as a$4}from'./chunk-NLPSVYFP.mjs';import {a as a$2}from'./chunk-I73SOXBN.mjs';import {a as a$1}from'./chunk-OPXWNJBG.mjs';import {b as b$2}from'./chunk-6TWFLRUB.mjs';import {defineComponent,ref,h as h$1,onMounted,watch,onUnmounted,unref}from'vue';var u=e=>typeof e=="function"?e():unref(e);function r(e,t,o){let l=null,i=t(),s=()=>{l?.destroy(),l=e.value?o(e.value,b$1(i,()=>i)):null;};onMounted(s),watch(()=>a(i=t()),s),onUnmounted(()=>{l?.destroy(),l=null;});}function B(e={}){let t=ref(null);return r(t,()=>u(e),b$2),t}var g={preset:0,selector:0,speed:0,fade:1,easing:0,trigger:0,stagger:0,direction:0,once:1,debug:1,axis:0,scrollContainer:0,autoReverse:1,delay:0,strokeColor:0,strokeWidth:0,fillOpacity:0,clip:2,waypoints:0,velocityScale:3,threshold:0,rootMargin:0,repeat:0,repeatDelay:0,morphTo:0,onProgress:0,onStart:0,onComplete:0,onEnter:0,onLeave:0,onEnterBack:0,onLeaveBack:0,autoplay:1,duration:0,native:1},b=[null,Boolean,[Boolean,String],[Boolean,Number]],T=e=>({type:e,default:void 0}),H=defineComponent({name:"ScrollDraw",props:Object.fromEntries(Object.entries(g).map(([e,t])=>[e,t?T(b[t]):null])),setup(e,{slots:t}){let o=ref(null);return r(o,()=>{let l={};for(let i in g){let s=e[i];s!=null&&(l[i]=s);}return l},b$2),()=>h$1("div",{ref:o},t.default?.())}});function V(e){let t=ref(null);return r(t,()=>u(e),a$1),t}var j=defineComponent({name:"ScrollAnimate",props:{options:{type:Object,required:true}},setup(e,{slots:t}){let o=ref(null);return r(o,()=>e.options,a$1),()=>h$1("div",{ref:o},t.default?.())}});function G(e){let t=ref(null);return r(t,()=>u(e),a$2),t}var h=defineComponent({name:"ScrollCounter",props:{to:{type:Number,required:true},from:{type:Number},format:{type:Function},easing:{type:[String,Function]},trigger:{type:Object},once:T(Boolean),decimals:{type:Number},onComplete:{type:Function}},setup(e){let t=ref(null);return r(t,()=>{let o={to:e.to};return e.from!=null&&(o.from=e.from),e.format!=null&&(o.format=e.format),e.easing!=null&&(o.easing=e.easing),e.trigger!=null&&(o.trigger=e.trigger),e.once!=null&&(o.once=e.once),e.decimals!=null&&(o.decimals=e.decimals),e.onComplete!=null&&(o.onComplete=e.onComplete),o},a$2),()=>h$1("span",{ref:t})}});function N(e={}){let t=ref(null);return r(t,()=>u(e),a$3),t}var F=defineComponent({name:"ScrollVideo",props:{src:{type:String,required:true},options:{type:Object},muted:{type:Boolean,default:true},playsInline:{type:Boolean,default:true},class:{type:String}},setup(e){let t=ref(null);return r(t,()=>e.options??{},a$3),()=>h$1("video",{ref:t,src:e.src,muted:e.muted,playsinline:e.playsInline,preload:"auto",class:e.class})}});function q(e={}){let t=ref(null);return r(t,()=>u(e),a$4),t}var I=defineComponent({name:"ScrollText",props:{options:{type:Object},tag:{type:String,default:"p"}},setup(e,{slots:t}){let o=ref(null);return r(o,()=>e.options??{},a$4),()=>h$1(e.tag,{ref:o},t.default?.())}});export{B as a,H as b,V as c,j as d,G as e,h as f,N as g,F as h,q as i,I as j};
|
package/dist/group/index.cjs
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
'use strict';function
|
|
1
|
+
'use strict';function sr({bounces:e=3,decay:n=.5}={}){let r=Math.max(1,Math.round(e)),t=Math.max(.01,Math.min(.99,n)),o=Math.sqrt(t),c=0,u=[];for(let g=0;g<r;g++){let E=Math.pow(o,g);u.push(E),c+=E;}let i=[0],m=0;for(let g=0;g<r;g++)m+=u[g]/c,i.push(m);return g=>{if(g<=0)return 0;if(g>=1)return 1;for(let E=0;E<r;E++)if(g<=i[E+1]){let T=(g-i[E])/(i[E+1]-i[E]);if(E===0)return T*(2-T);let b=1-Math.pow(t,E);return b+(1-b)*(2*T-1)*(2*T-1)}return 1}}function ir({amplitude:e=1,period:n=.4}={}){let r=Math.max(1,e),t=Math.max(.1,n),o=r<=1?t/4:t/(2*Math.PI)*Math.asin(1/r);return c=>c<=0?0:c>=1?1:r*Math.pow(2,-10*c)*Math.sin((c-o)*(2*Math.PI)/t)+1}var Te={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:sr(),elastic:ir()};function It(e,n,r){return Math.min(r,Math.max(n,e))}function Ne(e="top bottom"){let n=e.trim();if(/^\d+(\.\d+)?%$/.test(n))return {element:"top",viewport:n};let[r="top",t="bottom"]=n.split(/\s+/).filter(Boolean);return {element:r,viewport:t}}function Ct(e,n,r,t){switch(t){case "top":return e+r;case "center":return e+r+n/2;case "bottom":return e+r+n;default:return e+r}}function Ot(e,n){if(/^\d+(\.\d+)?%$/.test(e))return n*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return n/2;case "bottom":return n;default:return n}}function ee(e,n,r,t){return r===n?0:It((e-n)/(r-n)*t,0,1)}function Fe(e,n,r,t,o){let c=Ct(e.top,e.height,n,t.element)-Ot(t.viewport,r),u=Ct(e.top,e.height,n,o.element)-Ot(o.viewport,r);return {tStart:c,tEnd:u}}function nt(e,n,r){let t=e.getBoundingClientRect(),o=r==="x"?t.width:t.height;return n?{top:r==="x"?t.left-n.getBoundingClientRect().left-n.clientLeft+n.scrollLeft:t.top-n.getBoundingClientRect().top-n.clientTop+n.scrollTop,height:o,scroll:0}:{top:r==="x"?t.left:t.top,height:o,scroll:r==="x"?window.scrollX:window.scrollY}}function ot(e){let n=parseFloat(e.getAttribute("pathLength")??"");if(n>0)return n;let r=e.tagName.toLowerCase();if(r==="rect"){let t=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(t+o)}if(r==="circle"){let t=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*t}return e.getTotalLength()}function Rt(e){let n=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(n)return [parseInt(n[1]+n[1],16),parseInt(n[2]+n[2],16),parseInt(n[3]+n[3],16)];let r=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(r)return [parseInt(r[1],16),parseInt(r[2],16),parseInt(r[3],16)];let t=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return t?[parseInt(t[1]),parseInt(t[2]),parseInt(t[3])]:null}function st(e,n,r){let t=Rt(e),o=Rt(n);return !t||!o?e:`rgb(${Math.round(t[0]+(o[0]-t[0])*r)},${Math.round(t[1]+(o[1]-t[1])*r)},${Math.round(t[2]+(o[2]-t[2])*r)})`}var Nt={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 _e=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function le(e,...n){_e&&console.warn(`[svg-scroll-draw] ${e}`,...n);}var ar="cubic-bezier(0.333333, 0, 0.666667, 0.333333)",lr="cubic-bezier(0.333333, 0.666667, 0.666667, 1)",Ft=33;function cr(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timing-function: linear(0, 1)")}function ur(e){let n=[];for(let r=0;r<Ft;r++){let t=r/(Ft-1);n.push(String(Math.round(e(t)*1e5)/1e5));}return `linear(${n.join(",")})`}function it(e){switch(e){case "linear":return "linear";case "ease-in":return ar;case "ease-out":return lr;case "ease-in-out":return cr()?ur(Te["ease-in-out"]):null;default:return null}}var _t=Symbol.for("svg-scroll-draw.registry");function Ht(){let e=globalThis;return e[_t]||(e[_t]=new Map)}function Be(e,n){Ht().set(e,n);}function Qe(e){Ht().delete(e);}var je,at=new Set,lt=new WeakMap,Ue=new Map,Vt=e=>{let n=e.getBoundingClientRect();return n.width+" "+n.height};function fr(e){let n=new Set;for(let r of e)for(;r&&r!==document.body;r=r.parentElement)for(let t=r;t;t=t.previousElementSibling)n.add(t);return n}function ct(e,n){if(typeof ResizeObserver>"u"||typeof document>"u")return ()=>{};let r=()=>n();je??(je=new ResizeObserver(o=>{let c=false;for(let{target:u}of o)lt.get(u)!==Vt(u)&&(c=true),lt.set(u,"");c&&at.forEach(u=>u());})),at.add(r);let t=fr(e);return [document.body,document.documentElement].forEach(o=>o&&t.add(o)),t.forEach(o=>{lt.has(o)||lt.set(o,Vt(o)),Ue.set(o,(Ue.get(o)??0)+1),je.observe(o);}),()=>{at.delete(r)&&(t.forEach(o=>{let c=(Ue.get(o)??1)-1;if(c)return void Ue.set(o,c);Ue.delete(o),je?.unobserve(o);}),at.size||(je?.disconnect(),je=void 0));}}function zt(e){if(typeof window>"u"||typeof window.matchMedia!="function")return ()=>{};let n=window.matchMedia("(prefers-reduced-motion: reduce)"),r=o=>e(!!o.matches);if(typeof n.addEventListener=="function")return n.addEventListener("change",r),()=>n.removeEventListener("change",r);let t=n;return t.addListener?.(r),()=>t.removeListener?.(r)}function ut(e,n){if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return n(e,true);let r=n(e,false),t=zt(c=>{if(!c)return;t();let u=(r.getProgress?.()??0)>=1;r.destroy(),r=n(u?{...e,onComplete:void 0}:e,true);}),o={};for(let c of Object.keys(r))o[c]=(...u)=>r[c]?.(...u);return o.destroy=()=>{t(),r.destroy();},o}var mr=0;function pr(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")&&CSS.supports("view-timeline-name: --x")}function Wt(e,n){let r="";try{r=getComputedStyle(e).getPropertyValue(n).trim();}catch{}return r||(e.getAttribute(n)??"").trim()}var Gt=new Set(["","none","transparent","rgba(0, 0, 0, 0)"]);function dr(e){if(!_e)return;let n=Wt(e,"stroke");if(!n||n==="none"){le("Element has no stroke \u2014 path will not be visible.",e);return}let r=(e.getAttribute("fill")??"").trim();r&&!Gt.has(r)&&!Gt.has(Wt(e,"fill"))&&le("Element has a fill \u2014 it may obscure the stroke animation.",e);}function gr(e,n,r){let t=document.createElement("div");t.setAttribute("data-svg-scroll-draw-debug",""),t.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 o(){let c=r==="x"?window.scrollX:window.scrollY,u=e-c,i=n-c,m=r==="x";t.innerHTML=`
|
|
2
2
|
<div style="position:absolute;${m?`left:${u}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${u}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
|
|
3
|
-
<div style="position:absolute;${m?`left:${i}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${i}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(t),window.addEventListener("scroll",o,{passive:true}),o(),{el:t,destroy(){window.removeEventListener("scroll",o),t.remove();}}}var Wt=/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,zt=/[MmLlHhVvCcSsQqTtAaZz]/g;function mr(e,n,r){if(!Be)return;let t=(e.match(zt)??[]).join("").toUpperCase(),o=(n.match(zt)??[]).join("").toUpperCase(),c=(e.match(Wt)??[]).length,u=(n.match(Wt)??[]).length;if(t!==o){de(`morphTo: command sequence differs (${t||"\u2205"} \u2192 ${o||"\u2205"}). Interpolation is coordinate-for-coordinate, so the result will not reach the target shape. Redraw both paths with the same commands.`,r);return}c!==u&&de(`morphTo: coordinate count differs (${c} \u2192 ${u}). Extra coordinates are ignored and missing ones hold their start value, so the result will not reach the target shape.`,r);}function ht(e,n,r){let t=(n.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),o=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,c=>{let u=parseFloat(c),i=t[o++]??u;return String(+(u+(i-u)*r).toFixed(4))})}function bt(e,n={}){return typeof window>"u"?{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0}:lt(n,(r,t)=>pr(e,r,t))}function pr(e,n,r){let{preset:t,...o}=n,c=t?{...It[t],...o}:o,{selector:u="path, polyline, line, polygon, rect, circle",speed:i=1,fade:m=false,easing:y="linear",trigger:M={},stagger:L=0,direction:v="forward",once:ae=false,debug:Ve=false,axis:J="y",scrollContainer:De,autoReverse:$e=false,delay:ve=0,strokeColor:ee,strokeWidth:le,fillOpacity:ce,waypoints:j,velocityScale:W=false,threshold:U=0,rootMargin:Ze="0px",repeat:ge=0,repeatDelay:Ae=0,morphTo:N,clip:Oe,autoplay:ct=false,duration:ut=1e3,native:te=true,onProgress:q,onStart:X,onComplete:re,onEnter:ue,onLeave:ye,onEnterBack:he,onLeaveBack:Le}=c,F=Oe===true?"left":typeof Oe=="string"?Oe:false,ne=typeof y=="function"?y:Pe[y]??Pe.linear,We=Re(M.start??"top bottom"),ze=Re(M.end??"bottom top"),Q=typeof De=="string"?document.querySelector(De):De??null,_=Array.isArray(ee)?ee[0]:null,C=Array.isArray(ee)?ee[1]:typeof ee=="string"?ee:null,R=Array.isArray(le)?le[0]:null,k=Array.isArray(le)?le[1]:typeof le=="number"?le:null,z=Array.isArray(ce)?ce[0]:null,I=Array.isArray(ce)?ce[1]:typeof ce=="number"?ce:null;function fe(s){let l=s*100;switch(F){case "right":return `inset(0 0 0 ${100-l}%)`;case "top":return `inset(0 0 ${100-l}% 0)`;case "bottom":return `inset(${100-l}% 0 0 0)`;case "center":return `circle(${s*150}% at 50% 50%)`;default:return `inset(0 ${100-l}% 0 0)`}}let x=F?[]:Array.from(e.querySelectorAll(u)),w=[],G=[],a=0,f=0,oe=L,Y=0,b=false,S=false,$=0,Ee=false,P=-1,be=[],Se=-1,H=false,me=0,we=0,xe,ft=null;function vt(){ft?.destroy(),ft=null;}let Te=new Set,Et=NaN,Me=true,Ke=-1,St=performance.now(),Ie=NaN;function qe(){return Q?J==="x"?Q.scrollLeft:Q.scrollTop:J==="x"?window.scrollX:window.scrollY}function xt(){return Q?J==="x"?Q.clientWidth:Q.clientHeight:J==="x"?window.innerWidth:window.innerHeight}function Tt(){let s=nt(e,Q,J);return Ne(s,s.scroll,xt(),We,ze)}function Xt(){let s=f-a,l=x.length-1,d=Q??document.documentElement,D=J==="x"?"Width":"Height";if(oe=L,L>0&&l>0&&s>0){let Z=d[`scroll${D}`]-d[`client${D}`]-1-a-s/i;Z>=0&&(oe=Math.min(L,Z/(l*s)));}Y=f+l*oe*s;}function Mt(){(({tStart:a,tEnd:f}=Tt())),Xt(),Ve&&Be&&(vt(),ft=fr(a,f,J));}function mt(s,l=Tt){Qe(e,{type:"draw",getProgress:()=>s.getProgress(),getTrigger:l});let d=s.destroy;return s.destroy=()=>{d.call(s),je(e);},s}function Yt(s,l){if(e.style.setProperty("--scroll-draw-progress",String(s)),F){let d=l==="reverse"?1-s:s;e.style.clipPath=fe(d);return}x.forEach((d,D)=>{d.style.strokeDashoffset=l==="reverse"?`${w[D]*s}`:`${w[D]*(1-s)}`,m&&(d.style.opacity=l==="reverse"?`${1-s}`:`${s}`),_&&C?d.style.stroke=_e(_,C,s):C&&(d.style.stroke=C),R!==null&&k!==null?d.style.strokeWidth=`${R+(k-R)*s}`:k!==null&&(d.style.strokeWidth=`${k}`),z!==null&&I!==null?d.style.fillOpacity=`${z+(I-z)*s}`:I!==null&&(d.style.fillOpacity=`${I}`),N&&d.tagName.toLowerCase()==="path"&&G[D]&&d.setAttribute("d",ht(G[D],N,s));});}function Je(){if(e.style.setProperty("--scroll-draw-progress","0"),F){e.style.clipPath=fe(0);return}x.forEach((s,l)=>{s.style.strokeDasharray=`${w[l]}`,s.style.strokeDashoffset=v==="reverse"?"0":`${w[l]}`,m?s.style.opacity=v==="reverse"?"1":"0":s.style.opacity="",_&&(s.style.stroke=_),R!==null&&(s.style.strokeWidth=`${R}`),z!==null&&(s.style.fillOpacity=`${z}`),N&&s.tagName.toLowerCase()==="path"&&G[l]&&s.setAttribute("d",G[l]);});}if(x.forEach(s=>{ur(s);let l=Fe(s);w.push(l);let d=s.tagName.toLowerCase()==="path";d?G.push(s.getAttribute("d")??""):G.push(""),N&&(d?mr(G[G.length-1],N,s):de(`morphTo only applies to <path> elements \u2014 ignored on <${s.tagName}>.`,s)),r?(s.style.strokeDasharray=`${l}`,s.style.strokeDashoffset=v==="reverse"?`${l}`:"0",m&&(s.style.opacity="1"),C&&(s.style.stroke=C),k!==null&&(s.style.strokeWidth=`${k}`),I!==null&&(s.style.fillOpacity=`${I}`),N&&s.tagName.toLowerCase()==="path"&&s.setAttribute("d",N)):(s.style.strokeDasharray=`${l}`,s.style.strokeDashoffset=v==="reverse"?"0":`${l}`,m?s.style.opacity=v==="reverse"?"1":"0":s.style.opacity="",_&&(s.style.stroke=_),R!==null&&(s.style.strokeWidth=`${R}`),z!==null&&(s.style.fillOpacity=`${z}`));}),F){if(r)return e.style.clipPath=fe(1),re?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=fe(0);}else if(r)return re?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};let Pt=typeof y=="string"?ot(y):null;function Zt(){return !(te===false||!cr()||!x.length||!Pt||F||J!=="y"||Q||i!==1||L!==0||ae||$e||W!==false||N||j||ge||ve>0||q||X||re||ue||ye||he||Le||ee!=null||le!=null||ce!=null||(M.start??"top bottom").trim()!=="top bottom"||(M.end??"bottom top").trim()!=="bottom top")}function Kt(){let s=++lr,l=`svg-scroll-draw-${s}`,d=`svg-scroll-draw-host-${s}`,D=`--svg-scroll-draw-${s}`,Z=v==="reverse"?"0":"var(--ssd-len)",pe=v==="reverse"?"var(--ssd-len)":"0",se=`stroke-dashoffset:${Z};`,h=`stroke-dashoffset:${pe};`;m&&(se+=`opacity:${v==="reverse"?1:0};`,h+=`opacity:${v==="reverse"?0:1};`);let E=document.createElement("style");E.setAttribute("data-svg-scroll-draw",""),E.textContent=`@keyframes ${l}{from{${se}}to{${h}}}.${d}{view-timeline-name:${D};view-timeline-axis:block;}.${l}{animation-name:${l};animation-duration:auto;animation-timing-function:${Pt};animation-fill-mode:both;animation-timeline:${D};animation-range:cover 0% cover 100%;}`,document.head.appendChild(E),e.classList.add(d);function V(p,O){p.style.setProperty("--ssd-len",String(w[O])),p.style.strokeDasharray=`${w[O]}`,p.style.strokeDashoffset="",p.style.opacity="",p.style.animationPlayState="",p.classList.add(l);}x.forEach(V);let g=false,T=-1;function A(){if(T>=0)return T;let p=e.getBoundingClientRect(),{tStart:O,tEnd:K}=Ne({top:p.top,height:p.height},qe(),xt(),We,ze);return ne(ie(qe(),O,K,i))}return {destroy(){e.classList.remove(d),x.forEach(p=>{p.classList.remove(l),p.style.removeProperty("--ssd-len"),p.style.animationPlayState="";}),E.remove();},replay(){g=false,T=-1,x.forEach(V);},pause(){g=true,x.forEach(p=>{p.style.animationPlayState="paused";});},resume(){g&&(g=false,x.forEach(p=>{p.style.animationPlayState="running";}));},seek(p){let O=Math.min(1,Math.max(0,p));T=O,g=true,x.forEach((K,B)=>{K.classList.remove(l),K.style.strokeDashoffset=v==="reverse"?`${w[B]*O}`:`${w[B]*(1-O)}`,m&&(K.style.opacity=v==="reverse"?`${1-O}`:`${O}`);});},getProgress(){return A()},refresh(){x.forEach((p,O)=>{w[O]=Fe(p),p.style.setProperty("--ssd-len",String(w[O])),p.style.strokeDasharray=`${w[O]}`;});}}}if(Zt())return mt(Kt());function Jt(){let s=Math.max(1,ut),l=0,d=0,D=false;function Z(g){let T=true;if(F){let A=Math.min(1,Math.max(0,g/s)),p=ne(A);me=p,e.style.setProperty("--scroll-draw-progress",String(p)),e.style.clipPath=fe(v==="reverse"?1-p:p),q?.(p),A<1&&(T=false);}else x.forEach((A,p)=>{let O=p*L*s,K=Math.min(1,Math.max(0,(g-O)/s)),B=ne(K);A.style.strokeDashoffset=v==="reverse"?`${w[p]*B}`:`${w[p]*(1-B)}`,m&&(A.style.opacity=v==="reverse"?`${1-B}`:`${B}`),_&&C?A.style.stroke=_e(_,C,B):C&&(A.style.stroke=C),R!==null&&k!==null?A.style.strokeWidth=`${R+(k-R)*B}`:k!==null&&(A.style.strokeWidth=`${k}`),z!==null&&I!==null?A.style.fillOpacity=`${z+(I-z)*B}`:I!==null&&(A.style.fillOpacity=`${I}`),N&&A.tagName.toLowerCase()==="path"&&G[p]&&A.setAttribute("d",ht(G[p],N,B)),p===0&&(me=B,q?.(B),e.style.setProperty("--scroll-draw-progress",String(B))),K<1&&(T=false);});if(j){let A=Math.min(1,Math.max(0,g/s)),p=ne(A);for(let O in j){let K=parseFloat(O);p>=K&&!Te.has(K)&&(Te.add(K),j[O]?.());}}return T}function pe(g){if(H)return;let T=g-l;S||(S=true,X?.());let A=Z(T);if(A&&!b){b=true,Z(s*(1+Math.max(0,x.length-1)*L)),re?.(),we<(ge==="infinite"?1/0:ge??0)&&(we++,xe=setTimeout(()=>{l=performance.now(),S=false,b=false,Te.clear(),Je(),$=requestAnimationFrame(pe);},Ae));return}A||($=requestAnimationFrame(pe));}function se(){cancelAnimationFrame($),clearTimeout(xe),l=performance.now(),d=0,H=false,S=false,b=false,we=0,D=true,me=0,Te.clear(),Je(),$=requestAnimationFrame(pe);}let h=new IntersectionObserver(g=>{g.forEach(T=>{T.isIntersecting&&!(ae&&b)?se():!T.isIntersecting&&!ae&&!b&&(cancelAnimationFrame($),clearTimeout(xe),D=false);});},{root:Q??null,threshold:U,rootMargin:Ze}),E;function V(){clearTimeout(E),E=setTimeout(()=>{x.forEach((g,T)=>{w[T]=Fe(g),g.style.strokeDasharray=`${w[T]}`;});},150);}return window.addEventListener("resize",V),window.addEventListener("orientationchange",V),ve>0?setTimeout(()=>h.observe(e),ve):h.observe(e),{destroy(){cancelAnimationFrame($),clearTimeout(xe),h.disconnect(),window.removeEventListener("resize",V),window.removeEventListener("orientationchange",V),clearTimeout(E);},replay(){we=0,se();},pause(){H||!D||(H=true,d=performance.now()-l,cancelAnimationFrame($));},resume(){H&&(H=false,D=true,l=performance.now()-d,$=requestAnimationFrame(pe));},seek(g){let T=Math.min(1,Math.max(0,g));me=T,H=true,d=T*s,l=performance.now()-d,cancelAnimationFrame($),Z(d);},getProgress(){return me},refresh(){clearTimeout(E),x.forEach((g,T)=>{w[T]=Fe(g),g.style.strokeDasharray=`${w[T]}`;});}}}if(ct)return mt(Jt());Mt();function $t(){if(H||!Ce)return;let s=performance.now(),l=qe();if(!Me&&W===false&&l===Et){dt(l);return}Me=false,Et=l;let d=i;if(W!==false){let h=s-St,E=h>0?Math.abs(l-(Ke<0?l:Ke))/h:0;d=i*Math.max(.2,1+E*(typeof W=="number"?W:1)*.04);}Ke=l,St=s;let D=$e?Se===-1||l>=Se?"forward":"reverse":v;Se=l;let Z=f-a,pe=true,se=Z===0?0:(l-a)/Z;if(isNaN(Ie)||(Ie<=0&&se>0?ue?.():Ie>0&&se<=0&&Le?.(),Ie<1&&se>=1?ye?.():Ie>=1&&se<1&&he?.()),Ie=se,F){let h=ne(ie(l,a,f,d));ae&&!$e&&(P=Math.max(P,h),h=P),me=h,e.style.setProperty("--scroll-draw-progress",String(h));let E=D==="reverse"?1-h:h;e.style.clipPath=fe(E),q?.(h),!S&&ie(l,a,f,d)>0&&(S=true,X?.()),h>=1&&!b?(b=true,re?.(),we<(ge==="infinite"?1/0:ge??0)&&(we++,xe=setTimeout(()=>{P=-1,S=false,b=false,e.style.clipPath=fe(0);},Ae))):h<1&&!ae&&(b=false),dt(l);return}if(x.forEach((h,E)=>{let V=E*oe*Z,g=ne(ie(l,a+V,f+V,d));ae&&!$e&&(g=be[E]=Math.max(be[E]??P,g)),h.style.strokeDashoffset=D==="reverse"?`${w[E]*g}`:`${w[E]*(1-g)}`,m&&(h.style.opacity=D==="reverse"?`${1-g}`:`${g}`),_&&C?h.style.stroke=_e(_,C,g):C&&(h.style.stroke=C),R!==null&&k!==null?h.style.strokeWidth=`${R+(k-R)*g}`:k!==null&&(h.style.strokeWidth=`${k}`),z!==null&&I!==null?h.style.fillOpacity=`${z+(I-z)*g}`:I!==null&&(h.style.fillOpacity=`${I}`),N&&h.tagName.toLowerCase()==="path"&&G[E]&&h.setAttribute("d",ht(G[E],N,g)),E===0&&(me=g,q?.(g),e.style.setProperty("--scroll-draw-progress",String(g))),g<1&&(pe=false);}),j){let h=ne(ie(l,a,f,d));for(let E in j){let V=parseFloat(E);h>=V&&!Te.has(V)&&(Te.add(V),j[E]?.());}}!S&&ie(l,a,f,d)>0&&(S=true,X?.()),pe&&!b?(b=true,re?.(),we<(ge==="infinite"?1/0:ge??0)&&(we++,xe=setTimeout(()=>{P=-1,be=[],S=false,b=false,Te.clear(),Je(),Me=true;},Ae))):!pe&&!ae&&(b=false),dt(l);}function pt(s){return s>=f&&s<Y}function dt(s){Ee||pt(s)?$=requestAnimationFrame($t):Ce=false;}function gt(){return Ee||pt(qe())}let Ce=false;function et(){Ce||(Ce=true,$=requestAnimationFrame(function(){$t();}));}function tt(){Ce=false,cancelAnimationFrame($);}let yt=new IntersectionObserver(s=>{s.forEach(l=>{Ee=l.isIntersecting,Ee&&!H?(Me=true,et()):Ce&&!H&&pt(qe())||tt();});},{root:Q??null,threshold:U,rootMargin:Ze});function At(){x.forEach((s,l)=>{w[l]=Fe(s),s.style.strokeDasharray=`${w[l]}`;}),Mt(),Me=true;}let rt;function Ge(){clearTimeout(rt),rt=setTimeout(At,150);}window.addEventListener("resize",Ge),window.addEventListener("orientationchange",Ge);let er=at([e],Ge);return ve>0?setTimeout(()=>yt.observe(e),ve):yt.observe(e),mt({destroy(){cancelAnimationFrame($),clearTimeout(xe),tt(),yt.disconnect(),er(),window.removeEventListener("resize",Ge),window.removeEventListener("orientationchange",Ge),clearTimeout(rt),vt();},replay(){P=-1,be=[],Se=-1,Ke=-1,S=false,b=false,we=0,H=false,me=0,Te.clear(),clearTimeout(xe),Je(),Me=true,gt()&&et();},pause(){H=true,tt();},resume(){H&&(H=false,Me=true,gt()&&et());},seek(s){let l=Math.min(1,Math.max(0,s));me=l,P=l,be=[],H=true,tt(),Yt(l,v),Me=true;},getProgress(){return me},refresh(){clearTimeout(rt),At(),gt()&&!H&&et();}},()=>({tStart:a,tEnd:f}))}function dr(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function qt(e){let n=[],r=/([\w]+)\(([^)]*)\)/g,t;for(;(t=r.exec(e))!==null;){let o=[],c=[],u=t[2].trim();if(u)for(let i of u.split(/[\s,]+/)){let m=i.match(/^([-+]?[\d.eE]+)(.*)$/);o.push(m?parseFloat(m[1]):0),c.push(m?m[2]:"");}n.push({fn:t[1],nums:o,units:c});}return n}function gr(e,n,r){let t=qt(e),o=qt(n);return t.length===0||t.length!==o.length?r<1?e:n:t.map((c,u)=>{let i=o[u];return c.fn!==i.fn||c.nums.length!==i.nums.length?r<1?`${c.fn}(${c.nums.map((m,y)=>`${m}${c.units[y]}`).join(", ")})`:`${i.fn}(${i.nums.map((m,y)=>`${m}${i.units[y]}`).join(", ")})`:`${c.fn}(${c.nums.map((m,y)=>`${m+(i.nums[y]-m)*r}${c.units[y]}`).join(", ")})`}).join(" ")}function wt(e,n,r){if(typeof e=="number"&&typeof n=="number")return String(e+(n-e)*r);let t=String(e),o=String(n);if(dr(t))return _e(t,o,r);if(t.includes("("))return gr(t,o,r);let c=t.match(/^([-+]?[\d.]+)(.*)$/),u=o.match(/^([-+]?[\d.]+)(.*)$/);if(c&&u){let i=parseFloat(c[1]),m=parseFloat(u[1]);return `${i+(m-i)*r}${c[2]||u[2]}`}return r<1?t:o}function yr(e){return e.replace(/([A-Z])/g,n=>`-${n.toLowerCase()}`)}var hr=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),br=0,Gt="--scroll-draw-progress";function wr(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}var Qt={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function He(e,n){return typeof window>"u"?Qt:n.respectReducedMotion===false?Bt(e,n,false):lt(n,(r,t)=>Bt(e,r,t))}function Bt(e,n,r){let{props:t,trigger:o={},easing:c="ease-out",speed:u=1,once:i=false,axis:m="y",scrollContainer:y,native:M=true,velocityScale:L=false,triggerElement:v,onProgress:ae,onComplete:Ve,onEnter:J,onLeave:De,onEnterBack:$e,onLeaveBack:ve}=n,ee=typeof c=="function"?c:Pe[c]??Pe["ease-out"],le=Re(o.start??"top bottom"),ce=Re(o.end??"bottom top"),j=v??e,W=typeof y=="string"?document.querySelector(y):y??null,U=Object.entries(t).map(([a,f])=>({prop:yr(a),from:Array.isArray(f)?f[0]:"",to:Array.isArray(f)?f[1]:f}));function Ze(){let a=window.getComputedStyle(e);for(let f of U)f.from===""&&(f.from=a.getPropertyValue(f.prop).trim()||"0");}function ge(){for(let a of U)e.style.setProperty(a.prop,String(a.to));}let Ae=new Map;for(let a of [...U.map(f=>f.prop),Gt])Ae.set(a,e.style.getPropertyValue(a));function N(){for(let[a,f]of Ae)f?e.style.setProperty(a,f):e.style.removeProperty(a);}if(r)return ge(),Ve?.(),{...Qt,destroy:N,getProgress:()=>1};Ze();let Oe=typeof c=="string"?ot(c):null;function ct(){if(!M||!wr()||!Oe||m!=="y"||W||j!==e||i||u!==1||ae||Ve||J||De||$e||ve||L!==false||(o.start??"top bottom").trim()!=="top bottom"||(o.end??"bottom top").trim()!=="bottom top")return false;for(let a of U)if(!hr.has(a.prop))return false;return true}function ut(){let a=`ssd-a-${++br}`,f=U.map(P=>`${P.prop}:${P.from}`).join(";"),oe=U.map(P=>`${P.prop}:${P.to}`).join(";"),Y=document.createElement("style");Y.setAttribute("data-ssd-animate",""),Y.textContent=`@keyframes ${a}{from{${f}}to{${oe}}}.${a}{animation-name:${a};animation-duration:auto;animation-timing-function:${Oe};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(Y),e.classList.add(a);let b=()=>m==="x"?window.scrollX:window.scrollY,S=()=>m==="x"?window.innerWidth:window.innerHeight,$=()=>{let P=e.getBoundingClientRect();return Ne({top:P.top,height:P.height},b(),S(),le,ce)};Qe(e,{type:"animate",getProgress:()=>Ee.getProgress(),getTrigger:$});let Ee={refresh(){},destroy(){e.classList.remove(a),Y.remove(),e.style.animationPlayState="",N(),je(e);},replay(){e.classList.remove(a),e.offsetWidth,e.classList.add(a);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(P){let be=Math.min(1,Math.max(0,P));e.classList.remove(a);for(let Se of U)e.style.setProperty(Se.prop,wt(Se.from,Se.to,be));},getProgress(){let{tStart:P,tEnd:be}=$();return ee(ie(b(),P,be,u))}};return Ee}if(ct())return ut();let te=0,q=0,X=0,re=false,ue=false,ye=-1,he=0,Le=false,F=NaN,ne=-1,We=0,ze=()=>W?m==="x"?W.scrollLeft:W.scrollTop:m==="x"?window.scrollX:window.scrollY,Q=()=>W?m==="x"?W.clientWidth:W.clientHeight:m==="x"?window.innerWidth:window.innerHeight,_=j===e?U:[],C=false;function R(){let a=e.style,f=_.map(S=>a.getPropertyValue(S.prop)),oe=a.transition;_.length&&(a.transition="none"),_.forEach(S=>a.setProperty(S.prop,Ae.get(S.prop)??""));let Y=nt(j,W,m);_.forEach((S,$)=>a.setProperty(S.prop,f[$])),_.length&&(e.offsetWidth,a.transition=oe);let b=Ne(Y,Y.scroll,Q(),le,ce);C&&Math.abs(b.tStart-te)<1&&Math.abs(b.tEnd-q)<1||(C=true,te=b.tStart,q=b.tEnd);}function k(a){e.style.setProperty(Gt,String(a));for(let f of U)e.style.setProperty(f.prop,wt(f.from,f.to,a));ae?.(a);}function z(a){if(isNaN(F)){F=a;return}F<=0&&a>0?J?.():F>0&&a<=0&&ve?.(),F<1&&a>=1?De?.():F>=1&&a<1&&$e?.(),F=a;}function I(){if(!re||ue)return;let a=performance.now(),f=ze(),oe=u;if(L!==false){let S=a-We,$=S>0?Math.abs(f-(ne<0?f:ne))/S:0;oe=u*Math.max(.2,1+$*(typeof L=="number"?L:1)*.04);}ne=f,We=a;let Y=q===te?0:(f-te)/(q-te);z(Y);let b=ee(ie(f,te,q,oe));i&&(ye=Math.max(ye,b),b=ye),he=b,k(b),b>=1&&!Le?(Le=true,Ve?.()):b<1&&!i&&(Le=false),X=requestAnimationFrame(I);}R(),q===te&&de("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 a=ee(ie(ze(),te,q,u));i&&a>0&&(ye=a),he=a,k(a);}let fe=new IntersectionObserver(a=>{a.forEach(f=>{re=f.isIntersecting,re&&!ue?X=requestAnimationFrame(I):cancelAnimationFrame(X);});},{root:W??null}),x;function w(){clearTimeout(x),x=setTimeout(R,150);}window.addEventListener("resize",w),window.addEventListener("orientationchange",w);let G=at([j],w);return fe.observe(e),Qe(e,{type:"animate",getProgress:()=>he,getTrigger:()=>({tStart:te,tEnd:q})}),{destroy(){cancelAnimationFrame(X),fe.disconnect(),window.removeEventListener("resize",w),window.removeEventListener("orientationchange",w),G(),clearTimeout(x),N(),je(e);},replay(){ye=-1,Le=false,he=0,ue=false,k(0);},pause(){ue=true,cancelAnimationFrame(X);},resume(){ue&&(ue=false,re&&(X=requestAnimationFrame(I)));},seek(a){let f=Math.min(1,Math.max(0,a));he=f,ye=f,ue=true,cancelAnimationFrame(X),k(f);},getProgress(){return he},refresh(){R();}}}var jt={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Ut(e,n={}){if(typeof window>"u")return jt;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return de("scrollParallax: element not found:",e),jt;let{speed:t=.3,axis:o="y",easing:c="linear",trigger:u,onProgress:i}=n,m=-t*100,y=r.style,M=!!r.ownerSVGElement,L=y.getPropertyValue("transform-box");M&&y.setProperty("transform-box","fill-box");let v=He(r,{props:o==="x"?{transform:["translateX(0%)",`translateX(${m}%)`]}:{transform:["translateY(0%)",`translateY(${m}%)`]},trigger:u??{start:"top bottom",end:"bottom top"},easing:c,native:false,onProgress:i});return M?{...v,destroy(){v.destroy(),y.setProperty("transform-box",L);}}:v}function Ye(e){return e.map(n=>typeof n=="string"?document.querySelector(n):n).filter(n=>n!==null)}var ke={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function fn(e,n={}){if(typeof window>"u")return ke;let r=Ye(e).map(t=>bt(t,n));return {destroy(){r.forEach(t=>t.destroy());},replay(){r.forEach(t=>t.replay());},pause(){r.forEach(t=>t.pause());},resume(){r.forEach(t=>t.resume());},seek(t){r.forEach(o=>o.seek(t));},getProgress(){return r[0]?.getProgress()??0},refresh(){r.forEach(t=>t.refresh?.());}}}function mn(e,n={}){if(typeof window>"u")return ke;let r=Ye(e);if(r.length===0)return ke;let t=0,o=[];function c(i){return bt(r[i],{...n,once:true,onComplete(){n.onComplete?.(),t=Math.min(i+1,r.length-1),t>i&&o[t]?.resume();}})}function u(){r.forEach((i,m)=>{o[m]=c(m);});for(let i=1;i<o.length;i++)o[i].pause();}return u(),{destroy(){o.forEach(i=>i.destroy()),o.length=0;},replay(){o.forEach(i=>i.destroy()),o.length=0,t=0,u();},pause(){o[t]?.pause();},resume(){o[t]?.resume();},seek(i){o[t]?.seek(i);},getProgress(){return o[t]?.getProgress()??0},refresh(){o.forEach(i=>i.refresh?.());}}}function pn(e,n){if(typeof window>"u")return ke;let r=Ye(e).map(t=>He(t,n));return {destroy(){r.forEach(t=>t.destroy());},replay(){r.forEach(t=>t.replay());},pause(){r.forEach(t=>t.pause());},resume(){r.forEach(t=>t.resume());},seek(t){r.forEach(o=>o.seek(t));},getProgress(){return r[0]?.getProgress()??0},refresh(){r.forEach(t=>t.refresh?.());}}}function dn(e,n){if(typeof window>"u")return ke;let r=Ye(e);if(r.length===0)return ke;let t=0,o=[];function c(i){return He(r[i],{...n,once:true,onComplete(){n.onComplete?.(),t=Math.min(i+1,r.length-1),t>i&&o[t]?.resume();}})}function u(){r.forEach((i,m)=>{o[m]=c(m);});for(let i=1;i<o.length;i++)o[i].pause();}return u(),{destroy(){o.forEach(i=>i.destroy()),o.length=0;},replay(){o.forEach(i=>i.destroy()),o.length=0,t=0,u();},pause(){o[t]?.pause();},resume(){o[t]?.resume();},seek(i){o[t]?.seek(i);},getProgress(){return o[t]?.getProgress()??0},refresh(){o.forEach(i=>i.refresh?.());}}}function gn(e,n={}){if(typeof window>"u")return ke;let r=Ye(e).map(t=>Ut(t,n));return {destroy(){r.forEach(t=>t.destroy());},replay(){r.forEach(t=>t.replay());},pause(){r.forEach(t=>t.pause());},resume(){r.forEach(t=>t.resume());},seek(t){r.forEach(o=>o.seek(t));},getProgress(){return r[0]?.getProgress()??0},refresh(){r.forEach(t=>t.refresh?.());}}}exports.scrollAnimateGroup=pn;exports.scrollAnimateSequence=dn;exports.scrollDrawGroup=fn;exports.scrollDrawSequence=mn;exports.scrollParallaxGroup=gn;
|
|
3
|
+
<div style="position:absolute;${m?`left:${i}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${i}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(t),window.addEventListener("scroll",o,{passive:true}),o(),{el:t,destroy(){window.removeEventListener("scroll",o),t.remove();}}}var qt=/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,Bt=/[MmLlHhVvCcSsQqTtAaZz]/g;function yr(e,n,r){if(!_e)return;let t=(e.match(Bt)??[]).join("").toUpperCase(),o=(n.match(Bt)??[]).join("").toUpperCase(),c=(e.match(qt)??[]).length,u=(n.match(qt)??[]).length;if(t!==o){le(`morphTo: command sequence differs (${t||"\u2205"} \u2192 ${o||"\u2205"}). Interpolation is coordinate-for-coordinate, so the result will not reach the target shape. Redraw both paths with the same commands.`,r);return}c!==u&&le(`morphTo: coordinate count differs (${c} \u2192 ${u}). Extra coordinates are ignored and missing ones hold their start value, so the result will not reach the target shape.`,r);}function hr(e,n,r){let t=(n.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),o=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,c=>{let u=parseFloat(c),i=t[o++]??u;return String(+(u+(i-u)*r).toFixed(4))})}function wt(e,n={}){return typeof window>"u"?{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0}:ut(n,(r,t)=>br(e,r,t))}function br(e,n,r){let{preset:t,...o}=n,c=t?{...Nt[t],...o}:o,{selector:u="path, polyline, line, polygon, rect, circle",speed:i=1,fade:m=false,easing:g="linear",trigger:E={},stagger:T=0,direction:b="forward",once:ce=false,debug:ke=false,axis:te="y",scrollContainer:De,autoReverse:Ie=false,delay:be=0,strokeColor:X,strokeWidth:ne,fillOpacity:oe,waypoints:Y,velocityScale:N=false,threshold:Z=0,rootMargin:Ye="0px",repeat:ue=0,repeatDelay:Me=0,morphTo:W,clip:fe,autoplay:Ve=false,duration:Ze=1e3,native:ft=true,onProgress:Pe,onStart:F,onComplete:_,onEnter:we,onLeave:me,onEnterBack:se,onLeaveBack:Ce}=c,L=fe===true?"left":typeof fe=="string"?fe:false,k=typeof g=="function"?g:Te[g]??Te.linear,Ae=Ne(E.start||"top bottom"),ie=Ne(E.end||"bottom top"),H=typeof De=="string"?document.querySelector(De):De??null,pe=Array.isArray(X)?X[0]:null,K=Array.isArray(X)?X[1]:typeof X=="string"?X:null,ae=Array.isArray(ne)?ne[0]:null,de=Array.isArray(ne)?ne[1]:typeof ne=="number"?ne:null,J=Array.isArray(oe)?oe[0]:null,ve=Array.isArray(oe)?oe[1]:typeof oe=="number"?oe:null;function ge(s){let a=s*100;switch(L){case "right":return `inset(0 0 0 ${100-a}%)`;case "top":return `inset(0 0 ${100-a}% 0)`;case "bottom":return `inset(${100-a}% 0 0 0)`;case "center":return `circle(${s*150}% at 50% 50%)`;default:return `inset(0 ${100-a}% 0 0)`}}let w=L?[]:Array.from(e.querySelectorAll(u)),G=[],Q=[],D=0,A=0,Le=T,Ke=0,M=false,l=false,f=0,re=false,V=-1,$=[],P=-1,d=false,I=0,q=0,Ee,mt=null;function Et(){mt?.destroy(),mt=null;}let Se=new Set,St=NaN,xe=true,Je=-1,xt=performance.now(),Oe=NaN;function ze(){return H?te==="x"?H.scrollLeft:H.scrollTop:te==="x"?window.scrollX:window.scrollY}function Tt(){return H?te==="x"?H.clientWidth:H.clientHeight:te==="x"?window.innerWidth:window.innerHeight}function Mt(){let s=nt(e,H,te);return Fe(s,s.scroll,Tt(),Ae,ie)}function Kt(){let s=A-D,a=w.length-1,p=H??document.documentElement,h=te==="x"?"Width":"Height";if(Le=T,T>0&&a>0&&s>0){let z=p[`scroll${h}`]-p[`client${h}`]-1-D-s/i;z>=0&&(Le=Math.min(T,z/(a*s)));}Ke=A+a*Le*s;}function Pt(){(({tStart:D,tEnd:A}=Mt())),Kt(),ke&&_e&&(Et(),mt=gr(D,A,te));}function pt(s,a=Mt){Be(e,{type:"draw",getProgress:()=>s.getProgress(),getTrigger:a});let p=s.destroy;return s.destroy=()=>{p.call(s),Qe(e);},s}function At(s,a){return ce&&!Ie?Math.max(V,k($[s]=Math.max($[s]??0,a))):k(a)}function Jt(s,a){if(e.style.setProperty("--scroll-draw-progress",String(s)),L){let p=a==="reverse"?1-s:s;e.style.clipPath=ge(p);return}w.forEach((p,h)=>dt(p,h,s,a));}function dt(s,a,p,h){s.style.strokeDashoffset=h==="reverse"?`${G[a]*p}`:`${G[a]*(1-p)}`,m&&(s.style.opacity=h==="reverse"?`${1-p}`:`${p}`),pe&&K?s.style.stroke=st(pe,K,p):K&&(s.style.stroke=K),ae!==null&&de!==null?s.style.strokeWidth=`${ae+(de-ae)*p}`:de!==null&&(s.style.strokeWidth=`${de}`),J!==null&&ve!==null?s.style.fillOpacity=`${J+(ve-J)*p}`:ve!==null&&(s.style.fillOpacity=`${ve}`),W&&s.tagName.toLowerCase()==="path"&&Q[a]&&s.setAttribute("d",hr(Q[a],W,p));}function We(){if(e.style.setProperty("--scroll-draw-progress","0"),L){e.style.clipPath=ge(b==="reverse"?1:0);return}w.forEach((s,a)=>{s.style.strokeDasharray=`${G[a]}`,s.style.strokeDashoffset=b==="reverse"?"0":`${G[a]}`,m?s.style.opacity=b==="reverse"?"1":"0":s.style.opacity="",pe&&(s.style.stroke=pe),ae!==null&&(s.style.strokeWidth=`${ae}`),J!==null&&(s.style.fillOpacity=`${J}`),W&&s.tagName.toLowerCase()==="path"&&Q[a]&&s.setAttribute("d",Q[a]);});}function Ge(s,a){let p=s.getAttribute("d"),h=ot(s);if(W&&Q[a]){s.setAttribute("d",W);let z=ot(s);s.setAttribute("d",Q[a]),h=Math.max(ot(s),z),s.setAttribute("d",p);}G[a]=h,s.style.strokeDasharray=`${h}`;}if(w.forEach((s,a)=>{dr(s);let p=s.tagName.toLowerCase()==="path";p?Q.push(s.getAttribute("d")??""):Q.push(""),Ge(s,a);let h=G[a];W&&(p?yr(Q[Q.length-1],W,s):le(`morphTo only applies to <path> elements \u2014 ignored on <${s.tagName}>.`,s)),r?(s.style.strokeDashoffset=b==="reverse"?`${h}`:"0",m&&(s.style.opacity="1"),K&&(s.style.stroke=K),de!==null&&(s.style.strokeWidth=`${de}`),ve!==null&&(s.style.fillOpacity=`${ve}`),W&&s.tagName.toLowerCase()==="path"&&s.setAttribute("d",W)):(s.style.strokeDashoffset=b==="reverse"?"0":`${h}`,m?s.style.opacity=b==="reverse"?"1":"0":s.style.opacity="",pe&&(s.style.stroke=pe),ae!==null&&(s.style.strokeWidth=`${ae}`),J!==null&&(s.style.fillOpacity=`${J}`));}),r)return L&&(e.style.clipPath=ge(1)),_?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};L&&(e.style.clipPath=ge(b==="reverse"?1:0));let Lt=typeof g=="string"?it(g):null;function er(){return !(ft===false||Ve||ke&&_e||!pr()||!w.length||!Lt||L||te!=="y"||H||i!==1||T!==0||ce||Ie||N!==false||W||Y||ue||be>0||Pe||F||_||we||me||se||Ce||X!=null||ne!=null||oe!=null||(E.start||"top bottom").trim()!=="top bottom"||(E.end||"bottom top").trim()!=="bottom top")}function tr(){let s=++mr,a=`svg-scroll-draw-${s}`,p=`svg-scroll-draw-host-${s}`,h=`--svg-scroll-draw-${s}`,z=b==="reverse"?"0":"var(--ssd-len)",ye=b==="reverse"?"var(--ssd-len)":"0",j=`stroke-dashoffset:${z};`,S=`stroke-dashoffset:${ye};`;m&&(j+=`opacity:${b==="reverse"?1:0};`,S+=`opacity:${b==="reverse"?0:1};`);let x=document.createElement("style");x.setAttribute("data-svg-scroll-draw",""),x.textContent=`@keyframes ${a}{from{${j}}to{${S}}}.${p}{view-timeline-name:${h};view-timeline-axis:block;}.${a}{animation-name:${a};animation-duration:auto;animation-timing-function:${Lt};animation-fill-mode:both;animation-timeline:${h};animation-range:cover 0% cover 100%;}`,document.head.appendChild(x),e.classList.add(p);function C(y,v){y.style.setProperty("--ssd-len",String(G[v])),y.style.strokeDasharray=`${G[v]}`,y.style.strokeDashoffset="",y.style.opacity="",y.style.animationPlayState="",y.classList.add(a);}w.forEach(C);let O=false,B=-1;function U(){if(B>=0)return B;let y=e.getBoundingClientRect(),{tStart:v,tEnd:R}=Fe({top:y.top,height:y.height},ze(),Tt(),Ae,ie);return k(ee(ze(),v,R,i))}return {destroy(){e.classList.remove(p),w.forEach(y=>{y.classList.remove(a),y.style.removeProperty("--ssd-len"),y.style.animationPlayState="";}),x.remove();},replay(){O=false,B=-1,w.forEach(C);},pause(){O=true,w.forEach(y=>{y.style.animationPlayState="paused";});},resume(){O&&(O=false,w.forEach(y=>{y.style.animationPlayState="running";}));},seek(y){let v=Math.min(1,Math.max(0,y));B=v,O=true,w.forEach((R,he)=>{R.classList.remove(a),R.style.strokeDashoffset=b==="reverse"?`${G[he]*v}`:`${G[he]*(1-v)}`,m&&(R.style.opacity=b==="reverse"?`${1-v}`:`${v}`);});},getProgress(){return U()},refresh(){w.forEach((y,v)=>{Ge(y,v),y.style.setProperty("--ssd-len",String(G[v]));});}}}if(er())return pt(tr());function rr(){let s=Math.max(1,Ze),a=L?s:s*(1+Math.max(0,w.length-1)*T),p=0,h=0,z=false;function ye(B){let U=true,y=Math.min(1,Math.max(0,B/a));if(L){let v=Math.min(1,Math.max(0,B/s)),R=k(v);I=R,e.style.setProperty("--scroll-draw-progress",String(R)),e.style.clipPath=ge(b==="reverse"?1-R:R),Pe?.(R),v<1&&(U=false);}else {w.forEach((R,he)=>{let or=he*T*s,Dt=Math.min(1,Math.max(0,(B-or)/s));dt(R,he,k(Dt),b),Dt<1&&(U=false);});let v=k(y);I=v,Pe?.(v),e.style.setProperty("--scroll-draw-progress",String(v));}if(Y){let v=k(y);for(let R in Y){let he=parseFloat(R);v>=he&&!Se.has(he)&&(Se.add(he),Y[R]?.());}}return U}function j(B){if(d)return;let U=B-p;l||(l=true,F?.());let y=ye(U);if(y&&!M){M=true,ye(a),_?.(),q<(ue==="infinite"?1/0:ue??0)&&(q++,Ee=setTimeout(()=>{p=performance.now(),l=false,M=false,Se.clear(),We(),f=requestAnimationFrame(j);},Me));return}y||(f=requestAnimationFrame(j));}function S(){cancelAnimationFrame(f),clearTimeout(Ee),p=performance.now(),h=0,d=false,l=false,M=false,q=0,z=true,I=0,Se.clear(),We(),f=requestAnimationFrame(j);}let x=new IntersectionObserver(B=>{B.forEach(U=>{U.isIntersecting&&!(ce&&M)?S():!U.isIntersecting&&!ce&&!M&&(cancelAnimationFrame(f),clearTimeout(Ee),z=false);});},{root:H??null,threshold:Z,rootMargin:Ye}),C;function O(){clearTimeout(C),C=setTimeout(()=>w.forEach(Ge),150);}return window.addEventListener("resize",O),window.addEventListener("orientationchange",O),be>0?setTimeout(()=>x.observe(e),be):x.observe(e),{destroy(){cancelAnimationFrame(f),clearTimeout(Ee),x.disconnect(),window.removeEventListener("resize",O),window.removeEventListener("orientationchange",O),clearTimeout(C);},replay(){q=0,S();},pause(){d||!z||(d=true,h=performance.now()-p,cancelAnimationFrame(f));},resume(){d&&(d=false,z=true,p=performance.now()-h,f=requestAnimationFrame(j));},seek(B){let U=Math.min(1,Math.max(0,B));I=U,d=true,h=U*a,p=performance.now()-h,cancelAnimationFrame(f),ye(h);},getProgress(){return I},refresh(){clearTimeout(C),w.forEach(Ge);}}}if(Ve)return pt(rr());Pt();function $t(){if(d||!Re)return;let s=performance.now(),a=ze();if(!xe&&N===false&&a===St){yt(a);return}xe=false,St=a;let p=i;if(N!==false){let S=s-xt,x=S>0?Math.abs(a-(Je<0?a:Je))/S:0;p=i*Math.max(.2,1+x*(typeof N=="number"?N:1)*.04);}Je=a,xt=s;let h=Ie?P===-1||a>=P?"forward":"reverse":b;P=a;let z=A-D,ye=true,j=z===0?0:(a-D)/z;if(isNaN(Oe)||(Oe<=0&&j>0?we?.():Oe>0&&j<=0&&Ce?.(),Oe<1&&j>=1?me?.():Oe>=1&&j<1&&se?.()),Oe=j,L){let S=At(0,ee(a,D,A,p));I=S,e.style.setProperty("--scroll-draw-progress",String(S));let x=h==="reverse"?1-S:S;e.style.clipPath=ge(x),Pe?.(S),!l&&ee(a,D,A,p)>0&&(l=true,F?.()),S>=1&&!M?(M=true,_?.(),q<(ue==="infinite"?1/0:ue??0)&&(q++,Ee=setTimeout(()=>{V=-1,$=[],l=false,M=false,We();},Me))):S<1&&!ce&&(M=false),yt(a);return}if(w.forEach((S,x)=>{let C=x*Le*z,O=At(x,ee(a,D+C,A+C,p));dt(S,x,O,h),x===0&&(I=O,Pe?.(O),e.style.setProperty("--scroll-draw-progress",String(O))),O<1&&(ye=false);}),Y){let S=k(ee(a,D,A,p));for(let x in Y){let C=parseFloat(x);S>=C&&!Se.has(C)&&(Se.add(C),Y[x]?.());}}!l&&ee(a,D,A,p)>0&&(l=true,F?.()),ye&&!M?(M=true,_?.(),q<(ue==="infinite"?1/0:ue??0)&&(q++,Ee=setTimeout(()=>{V=-1,$=[],l=false,M=false,Se.clear(),We(),xe=true;},Me))):!ye&&!ce&&(M=false),yt(a);}function gt(s){return s>=A&&s<Ke}function yt(s){re||gt(s)?f=requestAnimationFrame($t):Re=false;}function ht(){return re||gt(ze())}let Re=false;function et(){Re||(Re=true,f=requestAnimationFrame(function(){$t();}));}function tt(){Re=false,cancelAnimationFrame(f);}let bt=new IntersectionObserver(s=>{s.forEach(a=>{re=a.isIntersecting,re&&!d?(xe=true,et()):Re&&!d&>(ze())||tt();});},{root:H??null,threshold:Z,rootMargin:Ye});function kt(){w.forEach(Ge),Pt(),xe=true;}let rt;function qe(){clearTimeout(rt),rt=setTimeout(kt,150);}window.addEventListener("resize",qe),window.addEventListener("orientationchange",qe);let nr=ct([e],qe);return be>0?setTimeout(()=>bt.observe(e),be):bt.observe(e),pt({destroy(){cancelAnimationFrame(f),clearTimeout(Ee),tt(),bt.disconnect(),nr(),window.removeEventListener("resize",qe),window.removeEventListener("orientationchange",qe),clearTimeout(rt),Et();},replay(){V=-1,$=[],P=-1,Je=-1,l=false,M=false,q=0,d=false,I=0,Se.clear(),clearTimeout(Ee),We(),xe=true,ht()&&et();},pause(){d=true,tt();},resume(){d&&(d=false,xe=true,ht()&&et());},seek(s){let a=Math.min(1,Math.max(0,s));I=a,V=a,$=[],d=true,tt(),Jt(a,b),xe=true;},getProgress(){return I},refresh(){clearTimeout(rt),kt(),ht()&&!d&&et();}},()=>({tStart:D,tEnd:A}))}function wr(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function Qt(e){let n=[],r=/([\w]+)\(([^)]*)\)/g,t;for(;(t=r.exec(e))!==null;){let o=[],c=[],u=t[2].trim();if(u)for(let i of u.split(/[\s,]+/)){let m=i.match(/^([-+]?[\d.eE]+)(.*)$/);o.push(m?parseFloat(m[1]):0),c.push(m?m[2]:"");}n.push({fn:t[1],nums:o,units:c});}return n}function vr(e,n,r){let t=Qt(e),o=Qt(n);return t.length===0||t.length!==o.length?r<1?e:n:t.map((c,u)=>{let i=o[u];return c.fn!==i.fn||c.nums.length!==i.nums.length?r<1?`${c.fn}(${c.nums.map((m,g)=>`${m}${c.units[g]}`).join(", ")})`:`${i.fn}(${i.nums.map((m,g)=>`${m}${i.units[g]}`).join(", ")})`:`${c.fn}(${c.nums.map((m,g)=>`${m+(i.nums[g]-m)*r}${c.units[g]}`).join(", ")})`}).join(" ")}function vt(e,n,r){if(typeof e=="number"&&typeof n=="number")return String(e+(n-e)*r);let t=String(e),o=String(n);if(wr(t))return st(t,o,r);if(t.includes("("))return vr(t,o,r);let c=t.match(/^([-+]?[\d.]+)(.*)$/),u=o.match(/^([-+]?[\d.]+)(.*)$/);if(c&&u){let i=parseFloat(c[1]),m=parseFloat(u[1]);return `${i+(m-i)*r}${c[2]||u[2]}`}return r<1?t:o}function Er(e){return e.replace(/([A-Z])/g,n=>`-${n.toLowerCase()}`)}var Sr=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),xr=0,jt="--scroll-draw-progress";function Tr(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}var Xt={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function He(e,n){return typeof window>"u"?Xt:n.respectReducedMotion===false?Ut(e,n,false):ut(n,(r,t)=>Ut(e,r,t))}function Ut(e,n,r){let{props:t,trigger:o={},easing:c="ease-out",speed:u=1,once:i=false,axis:m="y",scrollContainer:g,native:E=true,velocityScale:T=false,triggerElement:b,onProgress:ce,onComplete:ke,onEnter:te,onLeave:De,onEnterBack:Ie,onLeaveBack:be}=n,X=typeof c=="function"?c:Te[c]??Te["ease-out"],ne=Ne(o.start||"top bottom"),oe=Ne(o.end||"bottom top"),Y=b??e,N=typeof g=="string"?document.querySelector(g):g??null,Z=Object.entries(t).map(([l,f])=>({prop:Er(l),from:Array.isArray(f)?f[0]:"",to:Array.isArray(f)?f[1]:f}));function Ye(){let l=window.getComputedStyle(e);for(let f of Z)f.from===""&&(f.from=l.getPropertyValue(f.prop).trim()||"0");}function ue(){for(let l of Z)e.style.setProperty(l.prop,String(l.to));}let Me=new Map;for(let l of [...Z.map(f=>f.prop),jt])Me.set(l,e.style.getPropertyValue(l));function W(){for(let[l,f]of Me)f?e.style.setProperty(l,f):e.style.removeProperty(l);}if(r)return ue(),ke?.(),{...Xt,destroy:W,getProgress:()=>1};Ye();let fe=()=>N?m==="x"?N.scrollLeft:N.scrollTop:m==="x"?window.scrollX:window.scrollY,Ve=()=>N?m==="x"?N.clientWidth:N.clientHeight:m==="x"?window.innerWidth:window.innerHeight,Ze=typeof c=="string"?it(c):null;function ft(){if(!E||!Tr()||!Ze||m!=="y"||N||Y!==e||i||u!==1||ce||ke||te||De||Ie||be||T!==false||(o.start||"top bottom").trim()!=="top bottom"||(o.end||"bottom top").trim()!=="bottom top")return false;for(let l of Z)if(!Sr.has(l.prop))return false;return true}function Pe(){let l=`ssd-a-${++xr}`,f=Z.map(d=>`${d.prop}:${d.from}`).join(";"),re=Z.map(d=>`${d.prop}:${d.to}`).join(";"),V=document.createElement("style");V.setAttribute("data-ssd-animate",""),V.textContent=`@keyframes ${l}{from{${f}}to{${re}}}.${l}{animation-name:${l};animation-duration:auto;animation-timing-function:${Ze};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(V),e.classList.add(l);let $=()=>{let d=e.getBoundingClientRect();return Fe({top:d.top,height:d.height},fe(),Ve(),ne,oe)};Be(e,{type:"animate",getProgress:()=>P.getProgress(),getTrigger:$});let P={refresh(){},destroy(){e.classList.remove(l),V.remove(),e.style.animationPlayState="",W(),Qe(e);},replay(){e.classList.remove(l),e.offsetWidth,e.classList.add(l);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(d){let I=Math.min(1,Math.max(0,d));e.classList.remove(l);for(let q of Z)e.style.setProperty(q.prop,vt(q.from,q.to,I));},getProgress(){let{tStart:d,tEnd:I}=$();return X(ee(fe(),d,I,u))}};return P}if(ft())return Pe();let F=0,_=0,we=0,me=NaN,se=false,Ce=-1,L=0,k=0,Ae=false,ie=NaN,H=-1,pe=0,K=Y===e?Z:[],ae=false;function de(){let l=e.style,f=K.map(P=>l.getPropertyValue(P.prop)),re=l.transition;K.length&&(l.transition="none"),K.forEach(P=>l.setProperty(P.prop,Me.get(P.prop)??""));let V=nt(Y,N,m);K.forEach((P,d)=>l.setProperty(P.prop,f[d])),K.length&&(e.offsetWidth,l.transition=re);let $=Fe(V,V.scroll,Ve(),ne,oe);ae&&Math.abs($.tStart-F)<1&&Math.abs($.tEnd-_)<1||(ae=true,F=$.tStart,_=$.tEnd);}function J(l){e.style.setProperty(jt,String(l));for(let f of Z)e.style.setProperty(f.prop,vt(f.from,f.to,l));ce?.(l);}function ve(l){if(isNaN(ie)){ie=l;return}ie<=0&&l>0?te?.():ie>0&&l<=0&&be?.(),ie<1&&l>=1?De?.():ie>=1&&l<1&&Ie?.(),ie=l;}let ge=l=>ee(l,F,_,Math.min(u,1));function w(){!we&&!se&&ge(fe())!==me&&(we=requestAnimationFrame(G));}function G(){if(se)return;let l=performance.now(),f=fe(),re=u;if(T!==false){let d=l-pe,I=d>0?Math.abs(f-(H<0?f:H))/d:0;re=u*Math.max(.2,1+I*(typeof T=="number"?T:1)*.04);}H=f,pe=l;let V=_===F?0:(f-F)/(_-F);ve(V);let $=ee(f,F,_,re),P=i?Math.max(Ce,X(L=Math.max(L,$))):X($);k=P,J(P),P>=1&&!Ae?(Ae=true,ke?.()):P<1&&!i&&(Ae=false),!se&&(me=ge(f),we=me>0&&me<1?requestAnimationFrame(G):0);}de(),_===F&&le("scrollAnimate: zero-length trigger window, so it never animates. In a sticky stage, set triggerElement.",e),L=ee(fe(),F,_,u),k=X(L),J(k);function Q(){de(),w();}let D;function A(){clearTimeout(D),D=setTimeout(Q,150);}let Le=N??window;Le.addEventListener("scroll",w,{passive:true}),window.addEventListener("resize",A),window.addEventListener("orientationchange",A);let Ke=ct([Y],A);w(),Be(e,{type:"animate",getProgress:()=>k,getTrigger:()=>({tStart:F,tEnd:_})});function M(){se=true,cancelAnimationFrame(we),we=0,me=NaN;}return {destroy(){M(),Le.removeEventListener("scroll",w),window.removeEventListener("resize",A),window.removeEventListener("orientationchange",A),Ke(),clearTimeout(D),W(),Qe(e);},replay(){Ce=-1,L=0,Ae=false,k=0,se=false,J(0),me=0,w();},pause:M,resume(){se&&(se=false,w());},seek(l){let f=Math.min(1,Math.max(0,l));k=f,Ce=f,L=0,M(),J(f);},getProgress(){return k},refresh:Q}}var Yt={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Zt(e,n={}){if(typeof window>"u")return Yt;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return le("scrollParallax: element not found:",e),Yt;let{speed:t=.3,axis:o="y",easing:c="linear",trigger:u,onProgress:i}=n,m=-t*100,g=r.style,E=!!r.ownerSVGElement,T=g.getPropertyValue("transform-box");E&&g.setProperty("transform-box","fill-box");let b=He(r,{props:o==="x"?{transform:["translateX(0%)",`translateX(${m}%)`]}:{transform:["translateY(0%)",`translateY(${m}%)`]},trigger:u??{start:"top bottom",end:"bottom top"},easing:c,native:false,onProgress:i});return E?{...b,destroy(){b.destroy(),g.setProperty("transform-box",T);}}:b}function Xe(e){return e.map(n=>typeof n=="string"?document.querySelector(n):n).filter(n=>n!==null)}var $e={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function yn(e,n={}){if(typeof window>"u")return $e;let r=Xe(e).map(t=>wt(t,n));return {destroy(){r.forEach(t=>t.destroy());},replay(){r.forEach(t=>t.replay());},pause(){r.forEach(t=>t.pause());},resume(){r.forEach(t=>t.resume());},seek(t){r.forEach(o=>o.seek(t));},getProgress(){return r[0]?.getProgress()??0},refresh(){r.forEach(t=>t.refresh?.());}}}function hn(e,n={}){if(typeof window>"u")return $e;let r=Xe(e);if(r.length===0)return $e;let t=0,o=[];function c(i){return wt(r[i],{...n,once:true,onComplete(){n.onComplete?.(),t=Math.min(i+1,r.length-1),t>i&&o[t]?.resume();}})}function u(){r.forEach((i,m)=>{o[m]=c(m);});for(let i=1;i<o.length;i++)o[i].pause();}return u(),{destroy(){o.forEach(i=>i.destroy()),o.length=0;},replay(){o.forEach(i=>i.destroy()),o.length=0,t=0,u();},pause(){o[t]?.pause();},resume(){o[t]?.resume();},seek(i){o[t]?.seek(i);},getProgress(){return o[t]?.getProgress()??0},refresh(){o.forEach(i=>i.refresh?.());}}}function bn(e,n){if(typeof window>"u")return $e;let r=Xe(e).map(t=>He(t,n));return {destroy(){r.forEach(t=>t.destroy());},replay(){r.forEach(t=>t.replay());},pause(){r.forEach(t=>t.pause());},resume(){r.forEach(t=>t.resume());},seek(t){r.forEach(o=>o.seek(t));},getProgress(){return r[0]?.getProgress()??0},refresh(){r.forEach(t=>t.refresh?.());}}}function wn(e,n){if(typeof window>"u")return $e;let r=Xe(e);if(r.length===0)return $e;let t=0,o=[];function c(i){return He(r[i],{...n,once:true,onComplete(){n.onComplete?.(),t=Math.min(i+1,r.length-1),t>i&&o[t]?.resume();}})}function u(){r.forEach((i,m)=>{o[m]=c(m);});for(let i=1;i<o.length;i++)o[i].pause();}return u(),{destroy(){o.forEach(i=>i.destroy()),o.length=0;},replay(){o.forEach(i=>i.destroy()),o.length=0,t=0,u();},pause(){o[t]?.pause();},resume(){o[t]?.resume();},seek(i){o[t]?.seek(i);},getProgress(){return o[t]?.getProgress()??0},refresh(){o.forEach(i=>i.refresh?.());}}}function vn(e,n={}){if(typeof window>"u")return $e;let r=Xe(e).map(t=>Zt(t,n));return {destroy(){r.forEach(t=>t.destroy());},replay(){r.forEach(t=>t.replay());},pause(){r.forEach(t=>t.pause());},resume(){r.forEach(t=>t.resume());},seek(t){r.forEach(o=>o.seek(t));},getProgress(){return r[0]?.getProgress()??0},refresh(){r.forEach(t=>t.refresh?.());}}}exports.scrollAnimateGroup=bn;exports.scrollAnimateSequence=wn;exports.scrollDrawGroup=yn;exports.scrollDrawSequence=hn;exports.scrollParallaxGroup=vn;
|
package/dist/group/index.d.mts
CHANGED
|
@@ -74,7 +74,9 @@ declare function scrollAnimateGroup(targets: Array<string | Element>, options: S
|
|
|
74
74
|
declare function scrollAnimateSequence(targets: Array<string | Element>, options: ScrollAnimateOptions): ScrollDrawInstance;
|
|
75
75
|
/**
|
|
76
76
|
* Apply a parallax effect to multiple elements simultaneously.
|
|
77
|
-
* Each element
|
|
77
|
+
* Each element travels `speed × its own height` over its trigger window,
|
|
78
|
+
* independently: a positive speed moves it up as the page scrolls down, ahead
|
|
79
|
+
* of the page; a negative one moves it down, so it lags behind.
|
|
78
80
|
*
|
|
79
81
|
* @example
|
|
80
82
|
* import { scrollParallaxGroup } from 'svg-scroll-draw/group';
|
|
@@ -82,7 +84,7 @@ declare function scrollAnimateSequence(targets: Array<string | Element>, options
|
|
|
82
84
|
* // Three background layers at the same speed
|
|
83
85
|
* scrollParallaxGroup(['#layer-far', '#layer-mid', '#layer-near'], { speed: 0.4 });
|
|
84
86
|
*
|
|
85
|
-
* //
|
|
87
|
+
* // Negative: they move down, lagging behind the page as it scrolls
|
|
86
88
|
* scrollParallaxGroup(['#badge', '#tag'], { speed: -0.2 });
|
|
87
89
|
*/
|
|
88
90
|
declare function scrollParallaxGroup(targets: Array<string | Element>, options?: ScrollParallaxOptions): ScrollDrawInstance;
|
package/dist/group/index.d.ts
CHANGED
|
@@ -74,7 +74,9 @@ declare function scrollAnimateGroup(targets: Array<string | Element>, options: S
|
|
|
74
74
|
declare function scrollAnimateSequence(targets: Array<string | Element>, options: ScrollAnimateOptions): ScrollDrawInstance;
|
|
75
75
|
/**
|
|
76
76
|
* Apply a parallax effect to multiple elements simultaneously.
|
|
77
|
-
* Each element
|
|
77
|
+
* Each element travels `speed × its own height` over its trigger window,
|
|
78
|
+
* independently: a positive speed moves it up as the page scrolls down, ahead
|
|
79
|
+
* of the page; a negative one moves it down, so it lags behind.
|
|
78
80
|
*
|
|
79
81
|
* @example
|
|
80
82
|
* import { scrollParallaxGroup } from 'svg-scroll-draw/group';
|
|
@@ -82,7 +84,7 @@ declare function scrollAnimateSequence(targets: Array<string | Element>, options
|
|
|
82
84
|
* // Three background layers at the same speed
|
|
83
85
|
* scrollParallaxGroup(['#layer-far', '#layer-mid', '#layer-near'], { speed: 0.4 });
|
|
84
86
|
*
|
|
85
|
-
* //
|
|
87
|
+
* // Negative: they move down, lagging behind the page as it scrolls
|
|
86
88
|
* scrollParallaxGroup(['#badge', '#tag'], { speed: -0.2 });
|
|
87
89
|
*/
|
|
88
90
|
declare function scrollParallaxGroup(targets: Array<string | Element>, options?: ScrollParallaxOptions): ScrollDrawInstance;
|
package/dist/group/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import {b as b$1}from'../chunk-
|
|
1
|
+
import {b as b$1}from'../chunk-XTPAW6XR.mjs';import {a as a$1}from'../chunk-OPXWNJBG.mjs';import {b}from'../chunk-6TWFLRUB.mjs';import'../chunk-OJFWQ6CU.mjs';import'../chunk-UPWWULKI.mjs';import'../chunk-XC5NR2MU.mjs';import'../chunk-2PYLM3E7.mjs';import'../chunk-A4JCC3QQ.mjs';import'../chunk-DM6EDKWH.mjs';import'../chunk-5PJEKEEP.mjs';import'../chunk-4DOJSIEQ.mjs';import'../chunk-BCV4RAIX.mjs';import'../chunk-LFSU6LR3.mjs';function u(s){return s.map(o=>typeof o=="string"?document.querySelector(o):o).filter(o=>o!==null)}var a={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function y(s,o={}){if(typeof window>"u")return a;let r=u(s).map(e=>b(e,o));return {destroy(){r.forEach(e=>e.destroy());},replay(){r.forEach(e=>e.replay());},pause(){r.forEach(e=>e.pause());},resume(){r.forEach(e=>e.resume());},seek(e){r.forEach(n=>n.seek(e));},getProgress(){return r[0]?.getProgress()??0},refresh(){r.forEach(e=>e.refresh?.());}}}function E(s,o={}){if(typeof window>"u")return a;let r=u(s);if(r.length===0)return a;let e=0,n=[];function i(t){return b(r[t],{...o,once:true,onComplete(){o.onComplete?.(),e=Math.min(t+1,r.length-1),e>t&&n[e]?.resume();}})}function l(){r.forEach((t,c)=>{n[c]=i(c);});for(let t=1;t<n.length;t++)n[t].pause();}return l(),{destroy(){n.forEach(t=>t.destroy()),n.length=0;},replay(){n.forEach(t=>t.destroy()),n.length=0,e=0,l();},pause(){n[e]?.pause();},resume(){n[e]?.resume();},seek(t){n[e]?.seek(t);},getProgress(){return n[e]?.getProgress()??0},refresh(){n.forEach(t=>t.refresh?.());}}}function d(s,o){if(typeof window>"u")return a;let r=u(s).map(e=>a$1(e,o));return {destroy(){r.forEach(e=>e.destroy());},replay(){r.forEach(e=>e.replay());},pause(){r.forEach(e=>e.pause());},resume(){r.forEach(e=>e.resume());},seek(e){r.forEach(n=>n.seek(e));},getProgress(){return r[0]?.getProgress()??0},refresh(){r.forEach(e=>e.refresh?.());}}}function w(s,o){if(typeof window>"u")return a;let r=u(s);if(r.length===0)return a;let e=0,n=[];function i(t){return a$1(r[t],{...o,once:true,onComplete(){o.onComplete?.(),e=Math.min(t+1,r.length-1),e>t&&n[e]?.resume();}})}function l(){r.forEach((t,c)=>{n[c]=i(c);});for(let t=1;t<n.length;t++)n[t].pause();}return l(),{destroy(){n.forEach(t=>t.destroy()),n.length=0;},replay(){n.forEach(t=>t.destroy()),n.length=0,e=0,l();},pause(){n[e]?.pause();},resume(){n[e]?.resume();},seek(t){n[e]?.seek(t);},getProgress(){return n[e]?.getProgress()??0},refresh(){n.forEach(t=>t.refresh?.());}}}function S(s,o={}){if(typeof window>"u")return a;let r=u(s).map(e=>b$1(e,o));return {destroy(){r.forEach(e=>e.destroy());},replay(){r.forEach(e=>e.replay());},pause(){r.forEach(e=>e.pause());},resume(){r.forEach(e=>e.resume());},seek(e){r.forEach(n=>n.seek(e));},getProgress(){return r[0]?.getProgress()??0},refresh(){r.forEach(e=>e.refresh?.());}}}export{d as scrollAnimateGroup,w as scrollAnimateSequence,y as scrollDrawGroup,E as scrollDrawSequence,S as scrollParallaxGroup};
|