svg-scroll-draw 2.7.0 → 2.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/angular/index.cjs +3 -3
- package/dist/angular/index.d.mts +48 -0
- package/dist/angular/index.d.ts +48 -0
- package/dist/angular/index.mjs +3 -3
- package/dist/astro/index.cjs +3 -3
- package/dist/astro/index.d.mts +20 -5
- package/dist/astro/index.d.ts +20 -5
- package/dist/astro/index.mjs +3 -3
- package/dist/cdn/svg-scroll-draw.dev.global.js +1878 -0
- package/dist/cdn/svg-scroll-draw.global.js +3 -3
- package/dist/cinematic/index.cjs +2 -2
- package/dist/cinematic/index.mjs +2 -2
- package/dist/cli/init.js +104 -101
- package/dist/devtools/index.cjs +1 -1
- package/dist/devtools/index.mjs +1 -1
- package/dist/group/index.cjs +3 -3
- package/dist/group/index.d.mts +48 -0
- package/dist/group/index.d.ts +48 -0
- package/dist/group/index.mjs +3 -3
- package/dist/horizontal/index.cjs +1 -0
- package/dist/horizontal/index.d.mts +108 -0
- package/dist/horizontal/index.d.ts +108 -0
- package/dist/horizontal/index.mjs +1 -0
- package/dist/index.cjs +4 -4
- package/dist/index.d.mts +48 -0
- package/dist/index.d.ts +48 -0
- package/dist/index.mjs +4 -4
- package/dist/nuxt/index.cjs +3 -3
- package/dist/nuxt/index.d.mts +33 -0
- package/dist/nuxt/index.d.ts +33 -0
- package/dist/nuxt/index.mjs +3 -3
- package/dist/pin/index.cjs +1 -1
- package/dist/pin/index.mjs +1 -1
- package/dist/progress/index.cjs +1 -0
- package/dist/progress/index.d.mts +74 -0
- package/dist/progress/index.d.ts +74 -0
- package/dist/progress/index.mjs +1 -0
- package/dist/react/index.cjs +3 -3
- package/dist/react/index.d.mts +33 -0
- package/dist/react/index.d.ts +33 -0
- package/dist/react/index.mjs +3 -3
- package/dist/reveal/index.cjs +1 -0
- package/dist/reveal/index.d.mts +80 -0
- package/dist/reveal/index.d.ts +80 -0
- package/dist/reveal/index.mjs +1 -0
- package/dist/snap/index.cjs +1 -1
- package/dist/snap/index.d.mts +8 -0
- package/dist/snap/index.d.ts +8 -0
- package/dist/snap/index.mjs +1 -1
- package/dist/solid/index.cjs +3 -3
- package/dist/solid/index.d.mts +48 -0
- package/dist/solid/index.d.ts +48 -0
- package/dist/solid/index.mjs +3 -3
- package/dist/svelte/index.cjs +3 -3
- package/dist/svelte/index.d.mts +48 -0
- package/dist/svelte/index.d.ts +48 -0
- package/dist/svelte/index.mjs +3 -3
- package/dist/text/index.cjs +1 -1
- package/dist/text/index.d.mts +15 -0
- package/dist/text/index.d.ts +15 -0
- package/dist/text/index.mjs +1 -1
- package/dist/timeline/index.cjs +8 -8
- package/dist/timeline/index.d.mts +31 -0
- package/dist/timeline/index.d.ts +31 -0
- package/dist/timeline/index.mjs +8 -8
- package/dist/video/index.cjs +1 -1
- package/dist/video/index.d.mts +15 -0
- package/dist/video/index.d.ts +15 -0
- package/dist/video/index.mjs +1 -1
- package/dist/vue/index.cjs +3 -3
- package/dist/vue/index.d.mts +33 -0
- package/dist/vue/index.d.ts +33 -0
- package/dist/vue/index.mjs +3 -3
- package/dist/web-component/index.cjs +3 -3
- package/dist/web-component/index.mjs +3 -3
- package/package.json +37 -5
package/dist/text/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
function Q({bounces:e=3,decay:r=.5}={}){let n=Math.max(1,Math.round(e)),t=Math.max(.01,Math.min(.99,r)),
|
|
1
|
+
function Q({bounces:e=3,decay:r=.5}={}){let n=Math.max(1,Math.round(e)),t=Math.max(.01,Math.min(.99,r)),l=Math.sqrt(t),o=0,s=[];for(let u=0;u<n;u++){let a=Math.pow(l,u);s.push(a),o+=a;}let c=[0],m=0;for(let u=0;u<n;u++)m+=s[u]/o,c.push(m);return u=>{if(u<=0)return 0;if(u>=1)return 1;for(let a=0;a<n;a++)if(u<=c[a+1]){let g=(u-c[a])/(c[a+1]-c[a]);if(a===0)return g*(2-g);let w=1-Math.pow(t,a);return w+(1-w)*(2*g-1)*(2*g-1)}return 1}}function Z({amplitude:e=1,period:r=.4}={}){let n=Math.max(1,e),t=Math.max(.1,r),l=n<=1?t/4:t/(2*Math.PI)*Math.asin(1/n);return o=>o<=0?0:o>=1?1:n*Math.pow(2,-10*o)*Math.sin((o-l)*(2*Math.PI)/t)+1}var I={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:Q(),elastic:Z()};function R(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[n="top",t="bottom"]=r.split(/\s+/).filter(Boolean);return {element:n,viewport:t}}function F(e,r,n,t){switch(t){case "top":return e+n;case "center":return e+n+r/2;case "bottom":return e+n+r;default:return e+n}}function H(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function ee(e,r,n){return Math.min(n,Math.max(r,e))}function V(e,r,n,t){return n===r?0:ee((e-r)/(n-r)*t,0,1)}function O(e,r,n,t,l){let o=F(e.top,e.height,r,t.element)-H(t.viewport,n),s=F(e.top,e.height,r,l.element)-H(l.viewport,n);return {tStart:o,tEnd:s}}var N=new Map;function G(e,r){N.set(e,r);}function z(e){N.delete(e);}var te=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function B(e,...r){te&&console.warn(`[svg-scroll-draw] ${e}`,...r);}function k(e){let r=e.textContent??"";return e.textContent="",r.split(/(\s+)/).filter(Boolean).map(n=>{let t=document.createElement("span");return t.setAttribute("aria-hidden","true"),/^\s+$/.test(n)?(t.textContent=n,t.style.whiteSpace="pre"):(t.textContent=n,t.style.display="inline-block"),e.appendChild(t),/^\s+$/.test(n)?null:t}).filter(n=>n!==null)}function ne(e){let r=e.textContent??"";return e.textContent="",r.split("").map(n=>{let t=document.createElement("span");return t.setAttribute("aria-hidden","true"),t.textContent=n,n===" "?t.style.whiteSpace="pre":t.style.display="inline-block",e.appendChild(t),n===" "?null:t}).filter(n=>n!==null)}function q(e){let r=k(e),n=new Map;for(let o of r){let s=o.offsetTop;n.has(s)||n.set(s,[]),n.get(s).push(o);}let t=[],l=Array.from(n.keys()).sort((o,s)=>o-s);for(let o of l){let s=n.get(o),c=document.createElement("span");c.setAttribute("aria-hidden","true"),c.style.display="inline-block",s.forEach((m,u)=>{let a=m.nextElementSibling;c.appendChild(m),u<s.length-1&&a&&a.style.whiteSpace==="pre"&&c.appendChild(a);}),t.push(c);}return e.textContent="",t.forEach((o,s)=>{e.appendChild(o),s<t.length-1&&e.appendChild(document.createTextNode(" "));}),t}function re(e,r,n,t){if(n<=1||t===0)return e;let l=(n-1)*t,o=r*t,s=o+(1-l);return s<=o?e>=o?1:0:Math.min(1,Math.max(0,(e-o)/(s-o)))}function oe(e,r){let n=[];if(r?.y!==void 0&&n.push(`translateY(${r.y*(1-e)}px)`),r?.x!==void 0&&n.push(`translateX(${r.x*(1-e)}px)`),r?.rotate!==void 0&&n.push(`rotate(${r.rotate*(1-e)}deg)`),r?.scale!==void 0){let t=r.scale+(1-r.scale)*e;n.push(`scale(${t})`);}return n.join(" ")||""}var W={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function pe(e,r={}){if(typeof window>"u")return W;let n=typeof e=="string"?document.querySelector(e):e;if(!n)return B("scrollText: element not found:",e),W;let t=n,{split:l="words",stagger:o=.04,easing:s="ease-out",from:c={opacity:0,y:24},trigger:m={},once:u=true,onComplete:a}=r,g=window.matchMedia("(prefers-reduced-motion: reduce)").matches,w=typeof s=="function"?s:I[s]??I["ease-out"],X=R(m.start??"top 85%"),j=R(m.end??"top 40%"),C=t.innerHTML;t.setAttribute("aria-label",t.textContent??"");let b;l==="chars"?b=ne(t):l==="lines"?b=q(t):b=k(t);let U=b.length;function Y(i,p){c?.opacity!==void 0&&(i.style.opacity=String(c.opacity+(1-c.opacity)*p));let S=oe(p,c);S&&(i.style.transform=S);}function h(i){t.style.setProperty("--scroll-draw-progress",String(i)),b.forEach((p,S)=>{let K=w(re(i,S,U,o));Y(p,K);});}if(g)return h(1),a?.(),{destroy(){t.innerHTML=C,t.removeAttribute("aria-label");},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};h(0);let L=0,v=0,d=0,M=false,f=false,x=-1,y=0,E=false,P=()=>window.scrollY,J=()=>window.innerHeight;function $(){let i=t.getBoundingClientRect(),p=O({top:i.top,height:i.height},P(),J(),X,j);L=p.tStart,v=p.tEnd;}function _(){if(!M||f)return;let i=V(P(),L,v,1);u&&(x=Math.max(x,i),i=x),y=i,h(i),i>=1&&!E?(E=true,a?.()):i<1&&!u&&(E=false),d=requestAnimationFrame(_);}$();let D=new IntersectionObserver(i=>{i.forEach(p=>{M=p.isIntersecting,M&&!f?d=requestAnimationFrame(_):cancelAnimationFrame(d);});}),A;function T(){clearTimeout(A),A=setTimeout(()=>{if(l==="lines"){let i=y;t.innerHTML=C,t.setAttribute("aria-label",t.textContent??""),b=q(t),h(i);}$();},150);}return window.addEventListener("resize",T),window.addEventListener("orientationchange",T),D.observe(t),G(t,{type:"text",getProgress:()=>y,getTrigger:()=>({tStart:L,tEnd:v})}),{destroy(){cancelAnimationFrame(d),D.disconnect(),window.removeEventListener("resize",T),window.removeEventListener("orientationchange",T),clearTimeout(A),t.innerHTML=C,t.removeAttribute("aria-label"),z(t);},replay(){x=-1,E=false,y=0,f=false,h(0);},pause(){f=true,cancelAnimationFrame(d);},resume(){f&&(f=false,M&&(d=requestAnimationFrame(_)));},seek(i){let p=Math.min(1,Math.max(0,i));y=p,x=p,f=true,cancelAnimationFrame(d),h(p);},getProgress(){return y}}}export{pe as scrollText};
|
package/dist/timeline/index.cjs
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
'use strict';function
|
|
1
|
+
'use strict';function ve({bounces:e=3,decay:n=.5}={}){let r=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,n)),u=Math.sqrt(o),m=0,M=[];for(let c=0;c<r;c++){let p=Math.pow(u,c);M.push(p),m+=p;}let f=[0],y=0;for(let c=0;c<r;c++)y+=M[c]/m,f.push(y);return c=>{if(c<=0)return 0;if(c>=1)return 1;for(let p=0;p<r;p++)if(c<=f[p+1]){let b=(c-f[p])/(f[p+1]-f[p]);if(p===0)return b*(2-b);let E=1-Math.pow(o,p);return E+(1-E)*(2*b-1)*(2*b-1)}return 1}}function Me({amplitude:e=1,period:n=.4}={}){let r=Math.max(1,e),o=Math.max(.1,n),u=r<=1?o/4:o/(2*Math.PI)*Math.asin(1/r);return m=>m<=0?0:m>=1?1:r*Math.pow(2,-10*m)*Math.sin((m-u)*(2*Math.PI)/o)+1}var B={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:ve(),elastic:Me()};function j(e="top bottom"){let n=e.trim();if(/^\d+(\.\d+)?%$/.test(n))return {element:"top",viewport:n};let[r="top",o="bottom"]=n.split(/\s+/).filter(Boolean);return {element:r,viewport:o}}function re(e,n,r,o){switch(o){case "top":return e+r;case "center":return e+r+n/2;case "bottom":return e+r+n;default:return e+r}}function oe(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 H(e){let n=e.tagName.toLowerCase();if(n==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(r+o)}if(n==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function Ee(e,n,r){return Math.min(r,Math.max(n,e))}function ie(e,n,r,o){return r===n?0:Ee((e-n)/(r-n)*o,0,1)}function se(e,n,r,o,u){let m=re(e.top,e.height,n,o.element)-oe(o.viewport,r),M=re(e.top,e.height,n,u.element)-oe(u.viewport,r);return {tStart:m,tEnd:M}}function ae(){return typeof window>"u"||typeof window.matchMedia!="function"?false:window.matchMedia("(prefers-reduced-motion: reduce)").matches}function ue(e){if(typeof window>"u"||typeof window.matchMedia!="function")return ()=>{};let n=window.matchMedia("(prefers-reduced-motion: reduce)"),r=u=>e(!!u.matches);if(typeof n.addEventListener=="function")return n.addEventListener("change",r),()=>n.removeEventListener("change",r);let o=n;return o.addListener?.(r),()=>o.removeListener?.(r)}var Le=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function ce(e,...n){Le&&console.warn(`[svg-scroll-draw] ${e}`,...n);}var le=["#ff90e8","#ffc900","#5865F2","#22c55e","#f59e0b","#ef4444","#aaa","#60a5fa"];function _e(e,n){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let o=typeof e=="string"?document.querySelector(e):e;if(!o)return ce("timeline: Container not found:",e),r;let u=o,{trigger:m={},speed:M=1,once:f=false,axis:y="y",tracks:c,onComplete:p,repeat:b,repeatDelay:E=0,loop:P=false,loopDuration:de=1500,debug:pe=false,label:me,respectReducedMotion:X=true}=n,fe=j(m.start??"top bottom"),be=j(m.end??"bottom top"),$=b==="infinite"?1/0:b??0,l,V=P===true?1/0:typeof P=="number"?P:0,h=false,G=0,L=V,z=X&&ae(),he=ue(t=>{z=X&&t,z&&(h=false,clearTimeout(l),l=void 0);}),O=()=>V>0&&!z,Q=new Map,q=c.map(t=>{let s=typeof t.easing=="function"?t.easing:B[t.easing??"linear"]??B.linear,d=Array.from(u.querySelectorAll(t.selector)),a=d.map(i=>H(i));return d.forEach((i,g)=>{Q.has(i)||Q.set(i,i.getAttribute("style")??""),i.style.strokeDasharray=`${a[g]}`,i.style.strokeDashoffset=`${a[g]}`,t.fade&&(i.style.opacity="0");}),{...t,elements:d,lengths:a,easeFn:s}});function ge(){for(let[t,s]of Q)s?t.setAttribute("style",s):t.removeAttribute("style");}let U=0,J=0,R=false,x=false,v=0,S=false,D=-1,T=0,w=null;pe&&(w=document.createElement("div"),Object.assign(w.style,{position:"fixed",bottom:"16px",left:"16px",zIndex:"9999",background:"rgba(0,0,0,0.88)",backdropFilter:"blur(8px)",border:"1px solid rgba(255,255,255,0.1)",borderRadius:"10px",padding:"10px 14px",fontFamily:"monospace",fontSize:"11px",color:"#fff",minWidth:"240px",pointerEvents:"none",lineHeight:"1.4"}),document.body.appendChild(w));function we(t){if(!w)return;let s=me??(typeof e=="string"?e:"timeline"),d=c.map(({selector:a,from:i,to:g},W)=>{let I=le[W%le.length],F=g>i?Math.min(1,Math.max(0,(t-i)/(g-i))):0,k=Math.round(F*100);return `<div style="margin:4px 0">
|
|
2
2
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:2px">
|
|
3
|
-
<span style="color:${
|
|
4
|
-
<span style="color:#666;margin-left:8px">${
|
|
3
|
+
<span style="color:${I};max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${a}</span>
|
|
4
|
+
<span style="color:#666;margin-left:8px">${k}%</span>
|
|
5
5
|
</div>
|
|
6
6
|
<div style="height:3px;background:#2a2a2a;border-radius:2px;position:relative;overflow:hidden">
|
|
7
|
-
<div style="position:absolute;left:${i*100}%;width:${(g-i)*100}%;height:100%;background:${
|
|
8
|
-
<div style="position:absolute;left:${i*100}%;width:${(g-i)*
|
|
7
|
+
<div style="position:absolute;left:${i*100}%;width:${(g-i)*100}%;height:100%;background:${I}33;border-radius:2px"></div>
|
|
8
|
+
<div style="position:absolute;left:${i*100}%;width:${(g-i)*F*100}%;height:100%;background:${I};border-radius:2px;transition:width 0.05s linear"></div>
|
|
9
9
|
</div>
|
|
10
10
|
</div>`}).join("");w.innerHTML=`
|
|
11
11
|
<div style="color:#555;margin-bottom:8px;font-size:10px;text-transform:uppercase;letter-spacing:0.12em;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:6px">
|
|
12
|
-
scrollDrawTimeline \xB7 ${
|
|
12
|
+
scrollDrawTimeline \xB7 ${s}
|
|
13
13
|
</div>
|
|
14
|
-
${
|
|
14
|
+
${d}
|
|
15
15
|
<div style="margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.06)">
|
|
16
16
|
<div style="display:flex;justify-content:space-between;margin-bottom:2px">
|
|
17
17
|
<span style="color:#555">scroll</span>
|
|
@@ -20,4 +20,4 @@
|
|
|
20
20
|
<div style="height:2px;background:#2a2a2a;border-radius:1px;overflow:hidden">
|
|
21
21
|
<div style="height:100%;background:#fff;border-radius:1px;width:${t*100}%;transition:width 0.05s linear"></div>
|
|
22
22
|
</div>
|
|
23
|
-
</div>`;}function
|
|
23
|
+
</div>`;}function K(){return y==="x"?window.scrollX:window.scrollY}function ye(){return y==="x"?window.innerWidth:window.innerHeight}function Y(){let t=u.getBoundingClientRect(),s=K(),d=y==="x"?t.left:t.top,a=y==="x"?t.width:t.height,i=se({top:d,height:a},s,ye(),fe,be);U=i.tStart,J=i.tEnd;}function Z(t){u.style.setProperty("--scroll-draw-progress",String(t)),q.forEach(({elements:s,lengths:d,from:a,to:i,easeFn:g,fade:W})=>{let I=i-a,F=I>0?Math.min(1,Math.max(0,(t-a)/I)):0,k=g(F);s.forEach((ne,xe)=>{ne.style.strokeDashoffset=`${d[xe]*(1-k)}`,W&&(ne.style.opacity=String(k));});}),we(t);}function _(){D=-1,T=0,S=false,q.forEach(({elements:t,lengths:s,fade:d})=>{t.forEach((a,i)=>{a.style.strokeDashoffset=`${s[i]}`,d&&(a.style.opacity="0");});}),u.style.setProperty("--scroll-draw-progress","0");}function N(){if(!R||x)return;let t;h?t=Math.min(1,(performance.now()-G)/de):(t=ie(K(),U,J,M),(f||O())&&(D=Math.max(D,t),t=D)),T=t,Z(t),t>=1&&!S?(S=true,p?.(),O()&&!h&&!l?l=setTimeout(()=>{l=void 0,L!==1/0&&L--,_(),h=true,G=performance.now();},E):$>0&&f&&!h&&!l&&(l=setTimeout(()=>{l=void 0,$!==1/0&&$--,_();},E))):!h&&t<1&&!f&&(S=false),h&&t>=1&&!l&&(S=false,L>0&&O()?l=setTimeout(()=>{l=void 0,L!==1/0&&L--,_(),G=performance.now();},E):h=false),v=requestAnimationFrame(N);}Y();let ee=new IntersectionObserver(t=>{t.forEach(s=>{R=s.isIntersecting,R&&!x?v=requestAnimationFrame(N):cancelAnimationFrame(v);});},{threshold:0});ee.observe(u);function te(){q.forEach(({elements:t,lengths:s})=>{t.forEach((d,a)=>{s[a]=H(d),d.style.strokeDasharray=`${s[a]}`;});}),Y();}let A;function C(){clearTimeout(A),A=setTimeout(te,150);}return window.addEventListener("resize",C),window.addEventListener("orientationchange",C),{destroy(){cancelAnimationFrame(v),clearTimeout(A),clearTimeout(l),ee.disconnect(),window.removeEventListener("resize",C),window.removeEventListener("orientationchange",C),he(),w&&(w.remove(),w=null),ge(),u.style.removeProperty("--scroll-draw-progress");},refresh(){clearTimeout(A),te();},replay(){$=b==="infinite"?1/0:b??0,L=V,h=false,clearTimeout(l),l=void 0,_(),x=false;},pause(){x=true,cancelAnimationFrame(v);},resume(){x&&(x=false,R&&(v=requestAnimationFrame(N)));},seek(t){T=Math.min(1,Math.max(0,t)),D=T,x=true,cancelAnimationFrame(v),Z(T);},getProgress(){return T}}}exports.scrollDrawTimeline=_e;
|
|
@@ -11,6 +11,21 @@ interface ScrollDrawInstance {
|
|
|
11
11
|
seek: (progress: number) => void;
|
|
12
12
|
/** Returns current draw progress (0–1). */
|
|
13
13
|
getProgress: () => number;
|
|
14
|
+
/**
|
|
15
|
+
* Re-measure after a layout change: path lengths, and the scroll trigger window.
|
|
16
|
+
*
|
|
17
|
+
* The engine already re-measures on `resize`, on `orientationchange`, and via a
|
|
18
|
+
* `ResizeObserver` on the document element — but none of those fire for a layout
|
|
19
|
+
* change that leaves the document height alone, such as a tab switching, a
|
|
20
|
+
* sibling collapsing, or a font swapping inside a fixed-height box. Call this
|
|
21
|
+
* after one of those.
|
|
22
|
+
*
|
|
23
|
+
* Optional on this shared type because several instances here are fan-outs over
|
|
24
|
+
* other instances or SSR no-op stubs. `scrollDraw`, `scrollPin`,
|
|
25
|
+
* `scrollHorizontal`, `scrollDrawTimeline` and the group APIs all provide it;
|
|
26
|
+
* use `instance.refresh?.()` if you hold an instance of unknown origin.
|
|
27
|
+
*/
|
|
28
|
+
refresh?: () => void;
|
|
14
29
|
}
|
|
15
30
|
|
|
16
31
|
interface TimelineTrack {
|
|
@@ -69,6 +84,22 @@ interface ScrollDrawTimelineOptions {
|
|
|
69
84
|
debug?: boolean;
|
|
70
85
|
/** Label shown in the debug panel header. Defaults to the target selector string. */
|
|
71
86
|
label?: string;
|
|
87
|
+
/**
|
|
88
|
+
* Honour `prefers-reduced-motion: reduce` for the time-driven `loop` only.
|
|
89
|
+
* Default: `true`.
|
|
90
|
+
*
|
|
91
|
+
* The two halves of this API deserve different answers. Scroll scrubbing
|
|
92
|
+
* advances 1:1 with the user's own input — direct manipulation, not motion
|
|
93
|
+
* played at them — and suppressing it would freeze the drawing at whatever
|
|
94
|
+
* fraction the first paint happened to compute, so it keeps scrubbing. `loop`
|
|
95
|
+
* is the opposite: it replays the whole timeline off `performance.now()` with
|
|
96
|
+
* no scroll input at all, which is autonomous motion by any definition and had
|
|
97
|
+
* no check whatsoever. With reduced motion requested, the scroll pass runs
|
|
98
|
+
* normally and the loop simply does not start.
|
|
99
|
+
*
|
|
100
|
+
* Set to `false` to loop regardless of the preference.
|
|
101
|
+
*/
|
|
102
|
+
respectReducedMotion?: boolean;
|
|
72
103
|
}
|
|
73
104
|
/**
|
|
74
105
|
* Animate multiple path groups with independent start/end windows within a
|
package/dist/timeline/index.d.ts
CHANGED
|
@@ -11,6 +11,21 @@ interface ScrollDrawInstance {
|
|
|
11
11
|
seek: (progress: number) => void;
|
|
12
12
|
/** Returns current draw progress (0–1). */
|
|
13
13
|
getProgress: () => number;
|
|
14
|
+
/**
|
|
15
|
+
* Re-measure after a layout change: path lengths, and the scroll trigger window.
|
|
16
|
+
*
|
|
17
|
+
* The engine already re-measures on `resize`, on `orientationchange`, and via a
|
|
18
|
+
* `ResizeObserver` on the document element — but none of those fire for a layout
|
|
19
|
+
* change that leaves the document height alone, such as a tab switching, a
|
|
20
|
+
* sibling collapsing, or a font swapping inside a fixed-height box. Call this
|
|
21
|
+
* after one of those.
|
|
22
|
+
*
|
|
23
|
+
* Optional on this shared type because several instances here are fan-outs over
|
|
24
|
+
* other instances or SSR no-op stubs. `scrollDraw`, `scrollPin`,
|
|
25
|
+
* `scrollHorizontal`, `scrollDrawTimeline` and the group APIs all provide it;
|
|
26
|
+
* use `instance.refresh?.()` if you hold an instance of unknown origin.
|
|
27
|
+
*/
|
|
28
|
+
refresh?: () => void;
|
|
14
29
|
}
|
|
15
30
|
|
|
16
31
|
interface TimelineTrack {
|
|
@@ -69,6 +84,22 @@ interface ScrollDrawTimelineOptions {
|
|
|
69
84
|
debug?: boolean;
|
|
70
85
|
/** Label shown in the debug panel header. Defaults to the target selector string. */
|
|
71
86
|
label?: string;
|
|
87
|
+
/**
|
|
88
|
+
* Honour `prefers-reduced-motion: reduce` for the time-driven `loop` only.
|
|
89
|
+
* Default: `true`.
|
|
90
|
+
*
|
|
91
|
+
* The two halves of this API deserve different answers. Scroll scrubbing
|
|
92
|
+
* advances 1:1 with the user's own input — direct manipulation, not motion
|
|
93
|
+
* played at them — and suppressing it would freeze the drawing at whatever
|
|
94
|
+
* fraction the first paint happened to compute, so it keeps scrubbing. `loop`
|
|
95
|
+
* is the opposite: it replays the whole timeline off `performance.now()` with
|
|
96
|
+
* no scroll input at all, which is autonomous motion by any definition and had
|
|
97
|
+
* no check whatsoever. With reduced motion requested, the scroll pass runs
|
|
98
|
+
* normally and the loop simply does not start.
|
|
99
|
+
*
|
|
100
|
+
* Set to `false` to loop regardless of the preference.
|
|
101
|
+
*/
|
|
102
|
+
respectReducedMotion?: boolean;
|
|
72
103
|
}
|
|
73
104
|
/**
|
|
74
105
|
* Animate multiple path groups with independent start/end windows within a
|
package/dist/timeline/index.mjs
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
function
|
|
1
|
+
function ve({bounces:e=3,decay:n=.5}={}){let r=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,n)),u=Math.sqrt(o),m=0,M=[];for(let c=0;c<r;c++){let p=Math.pow(u,c);M.push(p),m+=p;}let f=[0],y=0;for(let c=0;c<r;c++)y+=M[c]/m,f.push(y);return c=>{if(c<=0)return 0;if(c>=1)return 1;for(let p=0;p<r;p++)if(c<=f[p+1]){let b=(c-f[p])/(f[p+1]-f[p]);if(p===0)return b*(2-b);let E=1-Math.pow(o,p);return E+(1-E)*(2*b-1)*(2*b-1)}return 1}}function Me({amplitude:e=1,period:n=.4}={}){let r=Math.max(1,e),o=Math.max(.1,n),u=r<=1?o/4:o/(2*Math.PI)*Math.asin(1/r);return m=>m<=0?0:m>=1?1:r*Math.pow(2,-10*m)*Math.sin((m-u)*(2*Math.PI)/o)+1}var B={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:ve(),elastic:Me()};function j(e="top bottom"){let n=e.trim();if(/^\d+(\.\d+)?%$/.test(n))return {element:"top",viewport:n};let[r="top",o="bottom"]=n.split(/\s+/).filter(Boolean);return {element:r,viewport:o}}function re(e,n,r,o){switch(o){case "top":return e+r;case "center":return e+r+n/2;case "bottom":return e+r+n;default:return e+r}}function oe(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 H(e){let n=e.tagName.toLowerCase();if(n==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(r+o)}if(n==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function Ee(e,n,r){return Math.min(r,Math.max(n,e))}function ie(e,n,r,o){return r===n?0:Ee((e-n)/(r-n)*o,0,1)}function se(e,n,r,o,u){let m=re(e.top,e.height,n,o.element)-oe(o.viewport,r),M=re(e.top,e.height,n,u.element)-oe(u.viewport,r);return {tStart:m,tEnd:M}}function ae(){return typeof window>"u"||typeof window.matchMedia!="function"?false:window.matchMedia("(prefers-reduced-motion: reduce)").matches}function ue(e){if(typeof window>"u"||typeof window.matchMedia!="function")return ()=>{};let n=window.matchMedia("(prefers-reduced-motion: reduce)"),r=u=>e(!!u.matches);if(typeof n.addEventListener=="function")return n.addEventListener("change",r),()=>n.removeEventListener("change",r);let o=n;return o.addListener?.(r),()=>o.removeListener?.(r)}var Le=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function ce(e,...n){Le&&console.warn(`[svg-scroll-draw] ${e}`,...n);}var le=["#ff90e8","#ffc900","#5865F2","#22c55e","#f59e0b","#ef4444","#aaa","#60a5fa"];function _e(e,n){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let o=typeof e=="string"?document.querySelector(e):e;if(!o)return ce("timeline: Container not found:",e),r;let u=o,{trigger:m={},speed:M=1,once:f=false,axis:y="y",tracks:c,onComplete:p,repeat:b,repeatDelay:E=0,loop:P=false,loopDuration:de=1500,debug:pe=false,label:me,respectReducedMotion:X=true}=n,fe=j(m.start??"top bottom"),be=j(m.end??"bottom top"),$=b==="infinite"?1/0:b??0,l,V=P===true?1/0:typeof P=="number"?P:0,h=false,G=0,L=V,z=X&&ae(),he=ue(t=>{z=X&&t,z&&(h=false,clearTimeout(l),l=void 0);}),O=()=>V>0&&!z,Q=new Map,q=c.map(t=>{let s=typeof t.easing=="function"?t.easing:B[t.easing??"linear"]??B.linear,d=Array.from(u.querySelectorAll(t.selector)),a=d.map(i=>H(i));return d.forEach((i,g)=>{Q.has(i)||Q.set(i,i.getAttribute("style")??""),i.style.strokeDasharray=`${a[g]}`,i.style.strokeDashoffset=`${a[g]}`,t.fade&&(i.style.opacity="0");}),{...t,elements:d,lengths:a,easeFn:s}});function ge(){for(let[t,s]of Q)s?t.setAttribute("style",s):t.removeAttribute("style");}let U=0,J=0,R=false,x=false,v=0,S=false,D=-1,T=0,w=null;pe&&(w=document.createElement("div"),Object.assign(w.style,{position:"fixed",bottom:"16px",left:"16px",zIndex:"9999",background:"rgba(0,0,0,0.88)",backdropFilter:"blur(8px)",border:"1px solid rgba(255,255,255,0.1)",borderRadius:"10px",padding:"10px 14px",fontFamily:"monospace",fontSize:"11px",color:"#fff",minWidth:"240px",pointerEvents:"none",lineHeight:"1.4"}),document.body.appendChild(w));function we(t){if(!w)return;let s=me??(typeof e=="string"?e:"timeline"),d=c.map(({selector:a,from:i,to:g},W)=>{let I=le[W%le.length],F=g>i?Math.min(1,Math.max(0,(t-i)/(g-i))):0,k=Math.round(F*100);return `<div style="margin:4px 0">
|
|
2
2
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:2px">
|
|
3
|
-
<span style="color:${
|
|
4
|
-
<span style="color:#666;margin-left:8px">${
|
|
3
|
+
<span style="color:${I};max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${a}</span>
|
|
4
|
+
<span style="color:#666;margin-left:8px">${k}%</span>
|
|
5
5
|
</div>
|
|
6
6
|
<div style="height:3px;background:#2a2a2a;border-radius:2px;position:relative;overflow:hidden">
|
|
7
|
-
<div style="position:absolute;left:${i*100}%;width:${(g-i)*100}%;height:100%;background:${
|
|
8
|
-
<div style="position:absolute;left:${i*100}%;width:${(g-i)*
|
|
7
|
+
<div style="position:absolute;left:${i*100}%;width:${(g-i)*100}%;height:100%;background:${I}33;border-radius:2px"></div>
|
|
8
|
+
<div style="position:absolute;left:${i*100}%;width:${(g-i)*F*100}%;height:100%;background:${I};border-radius:2px;transition:width 0.05s linear"></div>
|
|
9
9
|
</div>
|
|
10
10
|
</div>`}).join("");w.innerHTML=`
|
|
11
11
|
<div style="color:#555;margin-bottom:8px;font-size:10px;text-transform:uppercase;letter-spacing:0.12em;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:6px">
|
|
12
|
-
scrollDrawTimeline \xB7 ${
|
|
12
|
+
scrollDrawTimeline \xB7 ${s}
|
|
13
13
|
</div>
|
|
14
|
-
${
|
|
14
|
+
${d}
|
|
15
15
|
<div style="margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.06)">
|
|
16
16
|
<div style="display:flex;justify-content:space-between;margin-bottom:2px">
|
|
17
17
|
<span style="color:#555">scroll</span>
|
|
@@ -20,4 +20,4 @@ function pe({bounces:e=3,decay:n=.5}={}){let r=Math.max(1,Math.round(e)),o=Math.
|
|
|
20
20
|
<div style="height:2px;background:#2a2a2a;border-radius:1px;overflow:hidden">
|
|
21
21
|
<div style="height:100%;background:#fff;border-radius:1px;width:${t*100}%;transition:width 0.05s linear"></div>
|
|
22
22
|
</div>
|
|
23
|
-
</div>`;}function
|
|
23
|
+
</div>`;}function K(){return y==="x"?window.scrollX:window.scrollY}function ye(){return y==="x"?window.innerWidth:window.innerHeight}function Y(){let t=u.getBoundingClientRect(),s=K(),d=y==="x"?t.left:t.top,a=y==="x"?t.width:t.height,i=se({top:d,height:a},s,ye(),fe,be);U=i.tStart,J=i.tEnd;}function Z(t){u.style.setProperty("--scroll-draw-progress",String(t)),q.forEach(({elements:s,lengths:d,from:a,to:i,easeFn:g,fade:W})=>{let I=i-a,F=I>0?Math.min(1,Math.max(0,(t-a)/I)):0,k=g(F);s.forEach((ne,xe)=>{ne.style.strokeDashoffset=`${d[xe]*(1-k)}`,W&&(ne.style.opacity=String(k));});}),we(t);}function _(){D=-1,T=0,S=false,q.forEach(({elements:t,lengths:s,fade:d})=>{t.forEach((a,i)=>{a.style.strokeDashoffset=`${s[i]}`,d&&(a.style.opacity="0");});}),u.style.setProperty("--scroll-draw-progress","0");}function N(){if(!R||x)return;let t;h?t=Math.min(1,(performance.now()-G)/de):(t=ie(K(),U,J,M),(f||O())&&(D=Math.max(D,t),t=D)),T=t,Z(t),t>=1&&!S?(S=true,p?.(),O()&&!h&&!l?l=setTimeout(()=>{l=void 0,L!==1/0&&L--,_(),h=true,G=performance.now();},E):$>0&&f&&!h&&!l&&(l=setTimeout(()=>{l=void 0,$!==1/0&&$--,_();},E))):!h&&t<1&&!f&&(S=false),h&&t>=1&&!l&&(S=false,L>0&&O()?l=setTimeout(()=>{l=void 0,L!==1/0&&L--,_(),G=performance.now();},E):h=false),v=requestAnimationFrame(N);}Y();let ee=new IntersectionObserver(t=>{t.forEach(s=>{R=s.isIntersecting,R&&!x?v=requestAnimationFrame(N):cancelAnimationFrame(v);});},{threshold:0});ee.observe(u);function te(){q.forEach(({elements:t,lengths:s})=>{t.forEach((d,a)=>{s[a]=H(d),d.style.strokeDasharray=`${s[a]}`;});}),Y();}let A;function C(){clearTimeout(A),A=setTimeout(te,150);}return window.addEventListener("resize",C),window.addEventListener("orientationchange",C),{destroy(){cancelAnimationFrame(v),clearTimeout(A),clearTimeout(l),ee.disconnect(),window.removeEventListener("resize",C),window.removeEventListener("orientationchange",C),he(),w&&(w.remove(),w=null),ge(),u.style.removeProperty("--scroll-draw-progress");},refresh(){clearTimeout(A),te();},replay(){$=b==="infinite"?1/0:b??0,L=V,h=false,clearTimeout(l),l=void 0,_(),x=false;},pause(){x=true,cancelAnimationFrame(v);},resume(){x&&(x=false,R&&(v=requestAnimationFrame(N)));},seek(t){T=Math.min(1,Math.max(0,t)),D=T,x=true,cancelAnimationFrame(v),Z(T);},getProgress(){return T}}}export{_e as scrollDrawTimeline};
|
package/dist/video/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
'use strict';function
|
|
1
|
+
'use strict';function Y({bounces:e=3,decay:t=.5}={}){let n=Math.max(1,Math.round(e)),r=Math.max(.01,Math.min(.99,t)),c=Math.sqrt(r),s=0,p=[];for(let i=0;i<n;i++){let a=Math.pow(c,i);p.push(a),s+=a;}let u=[0],y=0;for(let i=0;i<n;i++)y+=p[i]/s,u.push(y);return i=>{if(i<=0)return 0;if(i>=1)return 1;for(let a=0;a<n;a++)if(i<=u[a+1]){let f=(i-u[a])/(u[a+1]-u[a]);if(a===0)return f*(2-f);let x=1-Math.pow(r,a);return x+(1-x)*(2*f-1)*(2*f-1)}return 1}}function Z({amplitude:e=1,period:t=.4}={}){let n=Math.max(1,e),r=Math.max(.1,t),c=n<=1?r/4:r/(2*Math.PI)*Math.asin(1/n);return s=>s<=0?0:s>=1?1:n*Math.pow(2,-10*s)*Math.sin((s-c)*(2*Math.PI)/r)+1}var V={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:Y(),elastic:Z()};function P(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let[n="top",r="bottom"]=t.split(/\s+/).filter(Boolean);return {element:n,viewport:r}}function O(e,t,n,r){switch(r){case "top":return e+n;case "center":return e+n+t/2;case "bottom":return e+n+t;default:return e+n}}function $(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 H(e,t,n){return Math.min(n,Math.max(t,e))}function z(e,t,n,r){return n===t?0:H((e-t)/(n-t)*r,0,1)}function G(e,t,n,r,c){let s=O(e.top,e.height,t,r.element)-$(r.viewport,n),p=O(e.top,e.height,t,c.element)-$(c.viewport,n);return {tStart:s,tEnd:p}}var q=new Map;function B(e,t){q.set(e,t);}function W(e){q.delete(e);}var ee=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function k(e,...t){ee&&console.warn(`[svg-scroll-draw] ${e}`,...t);}var X={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function ae(e,t={}){if(typeof window>"u")return X;let n=typeof e=="string"?document.querySelector(e):e;if(!n||n.tagName.toLowerCase()!=="video")return k("scrollVideo: <video> element not found:",e),X;let r=n,{trigger:c={},easing:s="linear",once:p=false,axis:u="y",preload:y="auto",onReady:i,onComplete:a,onProgress:f}=t,x=window.matchMedia("(prefers-reduced-motion: reduce)").matches,j=typeof s=="function"?s:V[s]??V.linear,J=P(c.start??"top top"),K=P(c.end??"bottom top");r.pause(),r.hasAttribute("preload")||(r.preload=y);let C=t.from??0,S=t.to,I=0,T=0,l=0,b=false,d=false,h=-1,w=0,v=false,g=false,F=()=>u==="x"?window.scrollX:window.scrollY,Q=()=>u==="x"?window.innerWidth:window.innerHeight;function A(){let o=r.getBoundingClientRect(),m=u==="x"?o.left:o.top,U=u==="x"?o.width:o.height,N=G({top:m,height:U},F(),Q(),J,K);I=N.tStart,T=N.tEnd;}function M(o){if(!g)return;let m=S??r.duration??0;r.currentTime=C+(m-C)*o,r.style.setProperty("--scroll-draw-progress",String(o)),f?.(o);}function E(){if(!b||d||!g)return;let o=j(z(F(),I,T,1));p&&(h=Math.max(h,o),o=h),w=o,M(o),o>=1&&!v?(v=true,a?.()):o<1&&!p&&(v=false),l=requestAnimationFrame(E);}function R(){if(g=true,S===void 0&&(S=r.duration),x){M(1),i?.();return}A(),i?.(),b&&!d&&(l=requestAnimationFrame(E));}r.readyState>=1?R():r.addEventListener("loadedmetadata",R,{once:true}),g||A();let D=new IntersectionObserver(o=>{o.forEach(m=>{b=m.isIntersecting,b&&!d&&g?l=requestAnimationFrame(E):cancelAnimationFrame(l);});}),L;function _(){clearTimeout(L),L=setTimeout(A,150);}return window.addEventListener("resize",_),window.addEventListener("orientationchange",_),D.observe(r),B(r,{type:"video",getProgress:()=>w,getTrigger:()=>({tStart:I,tEnd:T})}),{destroy(){cancelAnimationFrame(l),D.disconnect(),r.removeEventListener("loadedmetadata",R),window.removeEventListener("resize",_),window.removeEventListener("orientationchange",_),clearTimeout(L),W(r);},replay(){h=-1,v=false,w=0,d=false,M(0);},pause(){d=true,cancelAnimationFrame(l);},resume(){d&&(d=false,b&&g&&(l=requestAnimationFrame(E)));},seek(o){let m=Math.min(1,Math.max(0,o));w=m,h=m,d=true,cancelAnimationFrame(l),M(m);},getProgress(){return w}}}exports.scrollVideo=ae;
|
package/dist/video/index.d.mts
CHANGED
|
@@ -15,6 +15,21 @@ interface ScrollDrawInstance {
|
|
|
15
15
|
seek: (progress: number) => void;
|
|
16
16
|
/** Returns current draw progress (0–1). */
|
|
17
17
|
getProgress: () => number;
|
|
18
|
+
/**
|
|
19
|
+
* Re-measure after a layout change: path lengths, and the scroll trigger window.
|
|
20
|
+
*
|
|
21
|
+
* The engine already re-measures on `resize`, on `orientationchange`, and via a
|
|
22
|
+
* `ResizeObserver` on the document element — but none of those fire for a layout
|
|
23
|
+
* change that leaves the document height alone, such as a tab switching, a
|
|
24
|
+
* sibling collapsing, or a font swapping inside a fixed-height box. Call this
|
|
25
|
+
* after one of those.
|
|
26
|
+
*
|
|
27
|
+
* Optional on this shared type because several instances here are fan-outs over
|
|
28
|
+
* other instances or SSR no-op stubs. `scrollDraw`, `scrollPin`,
|
|
29
|
+
* `scrollHorizontal`, `scrollDrawTimeline` and the group APIs all provide it;
|
|
30
|
+
* use `instance.refresh?.()` if you hold an instance of unknown origin.
|
|
31
|
+
*/
|
|
32
|
+
refresh?: () => void;
|
|
18
33
|
}
|
|
19
34
|
|
|
20
35
|
interface ScrollVideoOptions {
|
package/dist/video/index.d.ts
CHANGED
|
@@ -15,6 +15,21 @@ interface ScrollDrawInstance {
|
|
|
15
15
|
seek: (progress: number) => void;
|
|
16
16
|
/** Returns current draw progress (0–1). */
|
|
17
17
|
getProgress: () => number;
|
|
18
|
+
/**
|
|
19
|
+
* Re-measure after a layout change: path lengths, and the scroll trigger window.
|
|
20
|
+
*
|
|
21
|
+
* The engine already re-measures on `resize`, on `orientationchange`, and via a
|
|
22
|
+
* `ResizeObserver` on the document element — but none of those fire for a layout
|
|
23
|
+
* change that leaves the document height alone, such as a tab switching, a
|
|
24
|
+
* sibling collapsing, or a font swapping inside a fixed-height box. Call this
|
|
25
|
+
* after one of those.
|
|
26
|
+
*
|
|
27
|
+
* Optional on this shared type because several instances here are fan-outs over
|
|
28
|
+
* other instances or SSR no-op stubs. `scrollDraw`, `scrollPin`,
|
|
29
|
+
* `scrollHorizontal`, `scrollDrawTimeline` and the group APIs all provide it;
|
|
30
|
+
* use `instance.refresh?.()` if you hold an instance of unknown origin.
|
|
31
|
+
*/
|
|
32
|
+
refresh?: () => void;
|
|
18
33
|
}
|
|
19
34
|
|
|
20
35
|
interface ScrollVideoOptions {
|
package/dist/video/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
function
|
|
1
|
+
function Y({bounces:e=3,decay:t=.5}={}){let n=Math.max(1,Math.round(e)),r=Math.max(.01,Math.min(.99,t)),c=Math.sqrt(r),s=0,p=[];for(let i=0;i<n;i++){let a=Math.pow(c,i);p.push(a),s+=a;}let u=[0],y=0;for(let i=0;i<n;i++)y+=p[i]/s,u.push(y);return i=>{if(i<=0)return 0;if(i>=1)return 1;for(let a=0;a<n;a++)if(i<=u[a+1]){let f=(i-u[a])/(u[a+1]-u[a]);if(a===0)return f*(2-f);let x=1-Math.pow(r,a);return x+(1-x)*(2*f-1)*(2*f-1)}return 1}}function Z({amplitude:e=1,period:t=.4}={}){let n=Math.max(1,e),r=Math.max(.1,t),c=n<=1?r/4:r/(2*Math.PI)*Math.asin(1/n);return s=>s<=0?0:s>=1?1:n*Math.pow(2,-10*s)*Math.sin((s-c)*(2*Math.PI)/r)+1}var V={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:Y(),elastic:Z()};function P(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let[n="top",r="bottom"]=t.split(/\s+/).filter(Boolean);return {element:n,viewport:r}}function O(e,t,n,r){switch(r){case "top":return e+n;case "center":return e+n+t/2;case "bottom":return e+n+t;default:return e+n}}function $(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 H(e,t,n){return Math.min(n,Math.max(t,e))}function z(e,t,n,r){return n===t?0:H((e-t)/(n-t)*r,0,1)}function G(e,t,n,r,c){let s=O(e.top,e.height,t,r.element)-$(r.viewport,n),p=O(e.top,e.height,t,c.element)-$(c.viewport,n);return {tStart:s,tEnd:p}}var q=new Map;function B(e,t){q.set(e,t);}function W(e){q.delete(e);}var ee=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function k(e,...t){ee&&console.warn(`[svg-scroll-draw] ${e}`,...t);}var X={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function ae(e,t={}){if(typeof window>"u")return X;let n=typeof e=="string"?document.querySelector(e):e;if(!n||n.tagName.toLowerCase()!=="video")return k("scrollVideo: <video> element not found:",e),X;let r=n,{trigger:c={},easing:s="linear",once:p=false,axis:u="y",preload:y="auto",onReady:i,onComplete:a,onProgress:f}=t,x=window.matchMedia("(prefers-reduced-motion: reduce)").matches,j=typeof s=="function"?s:V[s]??V.linear,J=P(c.start??"top top"),K=P(c.end??"bottom top");r.pause(),r.hasAttribute("preload")||(r.preload=y);let C=t.from??0,S=t.to,I=0,T=0,l=0,b=false,d=false,h=-1,w=0,v=false,g=false,F=()=>u==="x"?window.scrollX:window.scrollY,Q=()=>u==="x"?window.innerWidth:window.innerHeight;function A(){let o=r.getBoundingClientRect(),m=u==="x"?o.left:o.top,U=u==="x"?o.width:o.height,N=G({top:m,height:U},F(),Q(),J,K);I=N.tStart,T=N.tEnd;}function M(o){if(!g)return;let m=S??r.duration??0;r.currentTime=C+(m-C)*o,r.style.setProperty("--scroll-draw-progress",String(o)),f?.(o);}function E(){if(!b||d||!g)return;let o=j(z(F(),I,T,1));p&&(h=Math.max(h,o),o=h),w=o,M(o),o>=1&&!v?(v=true,a?.()):o<1&&!p&&(v=false),l=requestAnimationFrame(E);}function R(){if(g=true,S===void 0&&(S=r.duration),x){M(1),i?.();return}A(),i?.(),b&&!d&&(l=requestAnimationFrame(E));}r.readyState>=1?R():r.addEventListener("loadedmetadata",R,{once:true}),g||A();let D=new IntersectionObserver(o=>{o.forEach(m=>{b=m.isIntersecting,b&&!d&&g?l=requestAnimationFrame(E):cancelAnimationFrame(l);});}),L;function _(){clearTimeout(L),L=setTimeout(A,150);}return window.addEventListener("resize",_),window.addEventListener("orientationchange",_),D.observe(r),B(r,{type:"video",getProgress:()=>w,getTrigger:()=>({tStart:I,tEnd:T})}),{destroy(){cancelAnimationFrame(l),D.disconnect(),r.removeEventListener("loadedmetadata",R),window.removeEventListener("resize",_),window.removeEventListener("orientationchange",_),clearTimeout(L),W(r);},replay(){h=-1,v=false,w=0,d=false,M(0);},pause(){d=true,cancelAnimationFrame(l);},resume(){d&&(d=false,b&&g&&(l=requestAnimationFrame(E)));},seek(o){let m=Math.min(1,Math.max(0,o));w=m,h=m,d=true,cancelAnimationFrame(l),M(m);},getProgress(){return w}}}export{ae as scrollVideo};
|
package/dist/vue/index.cjs
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
'use strict';var vue=require('vue');function
|
|
2
|
-
<div style="position:absolute;${
|
|
3
|
-
<div style="position:absolute;${u?`left:${c}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${c}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",l,{passive:true}),l(),t}function Ke(e,r,n){let t=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),l=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,s=>{let m=parseFloat(s),c=t[l++]??m;return String(+(m+(c-m)*n).toFixed(4))})}function Qe(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:n,...t}=r,l=n?{...ft[n],...t}:t,s=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:m="path, polyline, line, polygon, rect, circle",speed:c=1,fade:u=false,easing:h="linear",trigger:L={},stagger:_=0,direction:E="forward",once:Q=false,debug:he=false,axis:H="y",scrollContainer:ee,autoReverse:te=false,delay:q=0,strokeColor:x,strokeWidth:A,fillOpacity:w,waypoints:b,velocityScale:P=false,threshold:O=0,rootMargin:G="0px",repeat:$=0,repeatDelay:N=0,morphTo:M,clip:z,autoplay:ne=false,duration:D=1e3,native:B=true,onProgress:d,onStart:C,onComplete:g,onEnter:y,onLeave:j,onEnterBack:Ae,onLeaveBack:be}=l,we=z===true?"left":typeof z=="string"?z:false,de=typeof h=="function"?h:ie[h]??ie.linear,He=ae(L.start??"top bottom"),Ie=ae(L.end??"bottom top"),U=typeof ee=="string"?document.querySelector(ee):ee??null,i=Array.isArray(x)?x[0]:null,p=Array.isArray(x)?x[1]:typeof x=="string"?x:null,X=Array.isArray(A)?A[0]:null,R=Array.isArray(A)?A[1]:typeof A=="number"?A:null,Z=Array.isArray(w)?w[0]:null,oe=Array.isArray(w)?w[1]:typeof w=="number"?w:null;function J(o){let a=o*100;switch(we){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 W=we?[]:Array.from(e.querySelectorAll(m)),k=[],fe=[],ge=0,Ce=0,se=false,ye=false,re=0,Be=false,ve=-1,We=-1,le=false,ke=0,Me=0,Le,Ue=null,$e=new Set,_e=-1,st=performance.now(),Ne=NaN;function ze(){return U?H==="x"?U.scrollLeft:U.scrollTop:H==="x"?window.scrollX:window.scrollY}function it(){return U?H==="x"?U.clientWidth:U.clientHeight:H==="x"?window.innerWidth:window.innerHeight}function at(){let o=e.getBoundingClientRect(),a,S,Y;if(U){let ue=U.getBoundingClientRect();a=H==="x"?o.left-ue.left+U.scrollLeft:o.top-ue.top+U.scrollTop,S=H==="x"?o.width:o.height,Y=ze();}else a=H==="x"?o.left:o.top,S=H==="x"?o.width:o.height,Y=ze();let ce=pe({top:a,height:S},Y,it(),He,Ie);ge=ce.tStart,Ce=ce.tEnd,he&&process.env.NODE_ENV!=="production"&&(Ue?.remove(),Ue=kt(ge,Ce,H));}function Et(o,a){if(e.style.setProperty("--scroll-draw-progress",String(o)),we){let S=a==="reverse"?1-o:o;e.style.clipPath=J(S);return}W.forEach((S,Y)=>{S.style.strokeDashoffset=a==="reverse"?`${k[Y]*o}`:`${k[Y]*(1-o)}`,u&&(S.style.opacity=a==="reverse"?`${1-o}`:`${o}`),i&&p?S.style.stroke=Re(i,p,o):p&&(S.style.stroke=p),X!==null&&R!==null?S.style.strokeWidth=`${X+(R-X)*o}`:R!==null&&(S.style.strokeWidth=`${R}`),Z!==null&&oe!==null?S.style.fillOpacity=`${Z+(oe-Z)*o}`:oe!==null&&(S.style.fillOpacity=`${oe}`),M&&S.tagName.toLowerCase()==="path"&&fe[Y]&&S.setAttribute("d",Ke(fe[Y],M,o));});}function Ge(){if(e.style.setProperty("--scroll-draw-progress","0"),we){e.style.clipPath=J(0);return}W.forEach((o,a)=>{o.style.strokeDasharray=`${k[a]}`,o.style.strokeDashoffset=E==="reverse"?"0":`${k[a]}`,u?o.style.opacity=E==="reverse"?"1":"0":o.style.opacity="",i&&(o.style.stroke=i),X!==null&&(o.style.strokeWidth=`${X}`),Z!==null&&(o.style.fillOpacity=`${Z}`),M&&o.tagName.toLowerCase()==="path"&&fe[a]&&o.setAttribute("d",fe[a]);});}if(W.forEach(o=>{Ot(o);let a=Ye(o);k.push(a),o.tagName.toLowerCase()==="path"?fe.push(o.getAttribute("d")??""):fe.push(""),s?(o.style.strokeDasharray=`${a}`,o.style.strokeDashoffset=E==="reverse"?`${a}`:"0",u&&(o.style.opacity="1"),p&&(o.style.stroke=p),R!==null&&(o.style.strokeWidth=`${R}`),oe!==null&&(o.style.fillOpacity=`${oe}`),M&&o.tagName.toLowerCase()==="path"&&o.setAttribute("d",M)):(o.style.strokeDasharray=`${a}`,o.style.strokeDashoffset=E==="reverse"?"0":`${a}`,u?o.style.opacity=E==="reverse"?"1":"0":o.style.opacity="",i&&(o.style.stroke=i),X!==null&&(o.style.strokeWidth=`${X}`),Z!==null&&(o.style.fillOpacity=`${Z}`));}),we){if(s)return e.style.clipPath=J(1),g?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=J(0);}else if(s)return g?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function xt(){return !(B===false||!Pt()||!W.length||typeof h!="string"||!(h in pt)||we||H!=="y"||U||c!==1||_!==0||Q||te||P!==false||M||b||$||q>0||d||C||g||y||j||Ae||be||x!=null||A!=null||w!=null||(L.start??"top bottom").trim()!=="top bottom"||(L.end??"bottom top").trim()!=="bottom top")}function Tt(){let o=`svg-scroll-draw-${++$t}`,a=E==="reverse"?"0":"var(--ssd-len)",S=E==="reverse"?"var(--ssd-len)":"0",Y=`stroke-dashoffset:${a};`,ce=`stroke-dashoffset:${S};`;u&&(Y+=`opacity:${E==="reverse"?1:0};`,ce+=`opacity:${E==="reverse"?0:1};`);let ue=document.createElement("style");ue.setAttribute("data-svg-scroll-draw",""),ue.textContent=`@keyframes ${o}{from{${Y}}to{${ce}}}.${o}{animation-name:${o};animation-duration:auto;animation-timing-function:${pt[h]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(ue);function me(f,T){f.style.setProperty("--ssd-len",String(k[T])),f.style.strokeDasharray=`${k[T]}`,f.style.strokeDashoffset="",f.style.opacity="",f.style.animationPlayState="",f.classList.add(o);}W.forEach(me);let v=false,F=-1;function I(){if(F>=0)return F;let f=e.getBoundingClientRect(),{tStart:T,tEnd:V}=pe({top:f.top,height:f.height},ze(),it(),He,Ie);return de(K(ze(),T,V,c))}return {destroy(){W.forEach(f=>{f.classList.remove(o),f.style.removeProperty("--ssd-len"),f.style.animationPlayState="";}),ue.remove();},replay(){v=false,F=-1,W.forEach(me);},pause(){v=true,W.forEach(f=>{f.style.animationPlayState="paused";});},resume(){v&&(v=false,W.forEach(f=>{f.style.animationPlayState="running";}));},seek(f){let T=Math.min(1,Math.max(0,f));F=T,v=true,W.forEach((V,Fe)=>{V.classList.remove(o),V.style.strokeDashoffset=E==="reverse"?`${k[Fe]*T}`:`${k[Fe]*(1-T)}`,u&&(V.style.opacity=E==="reverse"?`${1-T}`:`${T}`);});},getProgress(){return I()}}}if(xt())return Tt();function At(){let o=Math.max(1,D),a=0,S=0;function Y(I){let f=true;if(we){let T=Math.min(1,Math.max(0,I/o)),V=de(T);ke=V,e.style.setProperty("--scroll-draw-progress",String(V)),e.style.clipPath=J(E==="reverse"?1-V:V),d?.(V),T<1&&(f=false);}else W.forEach((T,V)=>{let Fe=V*_*o,De=Math.min(1,Math.max(0,(I-Fe)/o)),Se=de(De);T.style.strokeDashoffset=E==="reverse"?`${k[V]*Se}`:`${k[V]*(1-Se)}`,u&&(T.style.opacity=E==="reverse"?`${1-Se}`:`${Se}`),i&&p?T.style.stroke=Re(i,p,Se):p&&(T.style.stroke=p),X!==null&&R!==null?T.style.strokeWidth=`${X+(R-X)*Se}`:R!==null&&(T.style.strokeWidth=`${R}`),Z!==null&&oe!==null?T.style.fillOpacity=`${Z+(oe-Z)*Se}`:oe!==null&&(T.style.fillOpacity=`${oe}`),M&&T.tagName.toLowerCase()==="path"&&fe[V]&&T.setAttribute("d",Ke(fe[V],M,Se)),V===0&&(d?.(Se),e.style.setProperty("--scroll-draw-progress",String(Se))),De<1&&(f=false);});if(b){let T=Math.min(1,Math.max(0,I/o)),V=de(T);for(let Fe in b){let De=parseFloat(Fe);V>=De&&!$e.has(De)&&($e.add(De),b[Fe]?.());}}return f}function ce(I){if(le)return;let f=I-a;ye||(ye=true,C?.());let T=Y(f);if(T&&!se){se=true,Y(o*(1+Math.max(0,W.length-1)*_)),g?.(),Me<($==="infinite"?1/0:$??0)&&(Me++,Le=setTimeout(()=>{a=performance.now(),ye=false,se=false,$e.clear(),Ge(),re=requestAnimationFrame(ce);},N));return}T||(re=requestAnimationFrame(ce));}function ue(){cancelAnimationFrame(re),clearTimeout(Le),a=performance.now(),S=0,le=false,ye=false,se=false,Me=0,$e.clear(),Ge(),re=requestAnimationFrame(ce);}let me=new IntersectionObserver(I=>{I.forEach(f=>{f.isIntersecting&&!(Q&&se)?ue():!f.isIntersecting&&!Q&&!se&&(cancelAnimationFrame(re),clearTimeout(Le),a=null);});},{root:U??null,threshold:O,rootMargin:G}),v;function F(){clearTimeout(v),v=setTimeout(()=>{W.forEach((I,f)=>{k[f]=Ye(I),I.style.strokeDasharray=`${k[f]}`;});},150);}return window.addEventListener("resize",F),window.addEventListener("orientationchange",F),q>0?setTimeout(()=>me.observe(e),q):me.observe(e),{destroy(){cancelAnimationFrame(re),clearTimeout(Le),me.disconnect(),window.removeEventListener("resize",F),window.removeEventListener("orientationchange",F),clearTimeout(v);},replay(){Me=0,ue();},pause(){le||(le=true,S=performance.now()-a,cancelAnimationFrame(re));},resume(){le&&(le=false,a=performance.now()-S,re=requestAnimationFrame(ce));},seek(I){let f=Math.min(1,Math.max(0,I));ke=f,le=true,S=f*o,a=performance.now()-S,cancelAnimationFrame(re),Y(S);},getProgress(){return ke}}}if(ne)return At();at();function je(){if(!Be||le)return;let o=performance.now(),a=ze(),S=c;if(P!==false){let v=o-st,F=v>0?Math.abs(a-(_e<0?a:_e))/v:0;S=c*Math.max(.2,1+F*(typeof P=="number"?P:1)*.04);}_e=a,st=o;let Y=te?We===-1||a>=We?"forward":"reverse":E;We=a;let ce=Ce-ge,ue=true,me=ce===0?0:(a-ge)/ce;if(isNaN(Ne)||(Ne<=0&&me>0?y?.():Ne>0&&me<=0&&be?.(),Ne<1&&me>=1?j?.():Ne>=1&&me<1&&Ae?.()),Ne=me,we){let v=de(K(a,ge,Ce,S));Q&&!te&&(ve=Math.max(ve,v),v=ve),ke=v,e.style.setProperty("--scroll-draw-progress",String(v));let F=Y==="reverse"?1-v:v;e.style.clipPath=J(F),d?.(v),!ye&&K(a,ge,Ce,S)>0&&(ye=true,C?.()),v>=1&&!se?(se=true,g?.(),Me<($==="infinite"?1/0:$??0)&&(Me++,Le=setTimeout(()=>{ve=-1,ye=false,se=false,e.style.clipPath=J(0);},N))):v<1&&!Q&&(se=false),re=requestAnimationFrame(je);return}if(W.forEach((v,F)=>{let I=F*_*ce,f=de(K(a,ge+I,Ce+I,S));Q&&!te&&(ve=Math.max(ve,f),f=ve),ke=f,v.style.strokeDashoffset=Y==="reverse"?`${k[F]*f}`:`${k[F]*(1-f)}`,u&&(v.style.opacity=Y==="reverse"?`${1-f}`:`${f}`),i&&p?v.style.stroke=Re(i,p,f):p&&(v.style.stroke=p),X!==null&&R!==null?v.style.strokeWidth=`${X+(R-X)*f}`:R!==null&&(v.style.strokeWidth=`${R}`),Z!==null&&oe!==null?v.style.fillOpacity=`${Z+(oe-Z)*f}`:oe!==null&&(v.style.fillOpacity=`${oe}`),M&&v.tagName.toLowerCase()==="path"&&fe[F]&&v.setAttribute("d",Ke(fe[F],M,f)),F===0&&(d?.(f),e.style.setProperty("--scroll-draw-progress",String(f))),f<1&&(ue=false);}),b){let v=de(K(a,ge,Ce,S));for(let F in b){let I=parseFloat(F);v>=I&&!$e.has(I)&&($e.add(I),b[F]?.());}}!ye&&K(a,ge,Ce,S)>0&&(ye=true,C?.()),ue&&!se?(se=true,g?.(),Me<($==="infinite"?1/0:$??0)&&(Me++,Le=setTimeout(()=>{ve=-1,ye=false,se=false,$e.clear(),Ge();},N))):!ue&&!Q&&(se=false),re=requestAnimationFrame(je);}let Ze=new IntersectionObserver(o=>{o.forEach(a=>{Be=a.isIntersecting,Be&&!le?re=requestAnimationFrame(je):cancelAnimationFrame(re);});},{root:U??null,threshold:O,rootMargin:G}),Je;function Xe(){clearTimeout(Je),Je=setTimeout(()=>{W.forEach((o,a)=>{k[a]=Ye(o),o.style.strokeDasharray=`${k[a]}`;}),at();},150);}return window.addEventListener("resize",Xe),window.addEventListener("orientationchange",Xe),q>0?setTimeout(()=>Ze.observe(e),q):Ze.observe(e),{destroy(){cancelAnimationFrame(re),clearTimeout(Le),Ze.disconnect(),window.removeEventListener("resize",Xe),window.removeEventListener("orientationchange",Xe),clearTimeout(Je),Ue?.remove();},replay(){ve=-1,We=-1,_e=-1,ye=false,se=false,Me=0,le=false,$e.clear(),clearTimeout(Le),Ge();},pause(){le=true,cancelAnimationFrame(re);},resume(){le&&(le=false,Be&&(re=requestAnimationFrame(je)));},seek(o){let a=Math.min(1,Math.max(0,o));ke=a,ve=a,le=true,cancelAnimationFrame(re),Et(a,E);},getProgress(){return ke}}}var dt=new Map;function Pe(e,r){dt.set(e,r);}function Oe(e){dt.delete(e);}function Ft(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function gt(e){let r=[],n=/([\w]+)\(([^)]*)\)/g,t;for(;(t=n.exec(e))!==null;){let l=[],s=[],m=t[2].trim();if(m)for(let c of m.split(/[\s,]+/)){let u=c.match(/^([-+]?[\d.eE]+)(.*)$/);l.push(u?parseFloat(u[1]):0),s.push(u?u[2]:"");}r.push({fn:t[1],nums:l,units:s});}return r}function It(e,r,n){let t=gt(e),l=gt(r);return t.length===0||t.length!==l.length?n<1?e:r:t.map((s,m)=>{let c=l[m];return s.fn!==c.fn||s.nums.length!==c.nums.length?n<1?`${s.fn}(${s.nums.map((u,h)=>`${u}${s.units[h]}`).join(", ")})`:`${c.fn}(${c.nums.map((u,h)=>`${u}${c.units[h]}`).join(", ")})`:`${s.fn}(${s.nums.map((u,h)=>`${u+(c.nums[h]-u)*n}${s.units[h]}`).join(", ")})`}).join(" ")}function yt(e,r,n){if(typeof e=="number"&&typeof r=="number")return String(e+(r-e)*n);let t=String(e),l=String(r);if(Ft(t))return Re(t,l,n);if(t.includes("("))return It(t,l,n);let s=t.match(/^([-+]?[\d.]+)(.*)$/),m=l.match(/^([-+]?[\d.]+)(.*)$/);if(s&&m){let c=parseFloat(s[1]),u=parseFloat(m[1]);return `${c+(u-c)*n}${s[2]||m[2]}`}return n<1?t:l}function Nt(e){return e.replace(/([A-Z])/g,r=>`-${r.toLowerCase()}`)}var ht={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},Dt=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),Rt=0;function Ht(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function et(e,r){let n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return n;let{props:t,trigger:l={},easing:s="ease-out",speed:m=1,once:c=false,axis:u="y",scrollContainer:h,native:L=true,onProgress:_,onComplete:E,onEnter:Q,onLeave:he,onEnterBack:H,onLeaveBack:ee}=r,te=window.matchMedia("(prefers-reduced-motion: reduce)").matches,q=typeof s=="function"?s:ie[s]??ie["ease-out"],x=ae(l.start??"top bottom"),A=ae(l.end??"bottom top"),w=typeof h=="string"?document.querySelector(h):h??null,b=Object.entries(t).map(([i,p])=>({prop:Nt(i),from:Array.isArray(p)?p[0]:"",to:Array.isArray(p)?p[1]:p}));function P(){let i=window.getComputedStyle(e);for(let p of b)p.from===""&&(p.from=i.getPropertyValue(p.prop).trim()||"0");}function O(){for(let i of b)e.style.setProperty(i.prop,String(i.to));}if(te)return O(),E?.(),n;P();function G(){if(!L||!Ht()||typeof s!="string"||!(s in ht)||u!=="y"||w||c||m!==1||_||E||Q||he||H||ee||(l.start??"top bottom").trim()!=="top bottom"||(l.end??"bottom top").trim()!=="bottom top")return false;for(let i of b)if(!Dt.has(i.prop))return false;return true}function $(){let i=`ssd-a-${++Rt}`,p=b.map(J=>`${J.prop}:${J.from}`).join(";"),X=b.map(J=>`${J.prop}:${J.to}`).join(";"),R=document.createElement("style");R.setAttribute("data-ssd-animate",""),R.textContent=`@keyframes ${i}{from{${p}}to{${X}}}.${i}{animation-name:${i};animation-duration:auto;animation-timing-function:${ht[s]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(R),e.classList.add(i);let Z=()=>u==="x"?window.scrollX:window.scrollY,oe=()=>u==="x"?window.innerWidth:window.innerHeight;return {destroy(){e.classList.remove(i),R.remove();},replay(){e.classList.remove(i),e.offsetWidth,e.classList.add(i);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(J){let W=Math.min(1,Math.max(0,J));e.classList.remove(i);for(let k of b)e.style.setProperty(k.prop,yt(k.from,k.to,W));},getProgress(){let J=e.getBoundingClientRect(),W=Z(),k=oe(),{tStart:fe,tEnd:ge}=pe({top:J.top,height:J.height},W,k,x,A);return q(K(W,fe,ge,m))}}}if(G())return $();let N=0,M=0,z=0,ne=false,D=false,B=-1,d=0,C=false,g=NaN,y=()=>w?u==="x"?w.scrollLeft:w.scrollTop:u==="x"?window.scrollX:window.scrollY,j=()=>w?u==="x"?w.clientWidth:w.clientHeight:u==="x"?window.innerWidth:window.innerHeight;function Ae(){let i=e.getBoundingClientRect(),p,X;if(w){let Z=w.getBoundingClientRect();p=u==="x"?i.left-Z.left+w.scrollLeft:i.top-Z.top+w.scrollTop,X=u==="x"?i.width:i.height;}else p=u==="x"?i.left:i.top,X=u==="x"?i.width:i.height;let R=pe({top:p,height:X},y(),j(),x,A);N=R.tStart,M=R.tEnd;}function be(i){e.style.setProperty("--scroll-draw-progress",String(i));for(let p of b)e.style.setProperty(p.prop,yt(p.from,p.to,i));_?.(i);}function we(i){if(isNaN(g)){g=i;return}g<=0&&i>0?Q?.():g>0&&i<=0&&ee?.(),g<1&&i>=1?he?.():g>=1&&i<1&&H?.(),g=i;}function de(){if(!ne||D)return;let i=M===N?0:(y()-N)/(M-N);we(i);let p=q(K(y(),N,M,m));c&&(B=Math.max(B,p),p=B),d=p,be(p),p>=1&&!C?(C=true,E?.()):p<1&&!c&&(C=false),z=requestAnimationFrame(de);}Ae();{let i=q(K(y(),N,M,m));c&&i>0&&(B=i),d=i,be(i);}let He=new IntersectionObserver(i=>{i.forEach(p=>{ne=p.isIntersecting,ne&&!D?z=requestAnimationFrame(de):cancelAnimationFrame(z);});},{root:w??null}),Ie;function U(){clearTimeout(Ie),Ie=setTimeout(Ae,150);}return window.addEventListener("resize",U),window.addEventListener("orientationchange",U),He.observe(e),Pe(e,{type:"animate",getProgress:()=>d,getTrigger:()=>({tStart:N,tEnd:M})}),{destroy(){cancelAnimationFrame(z),He.disconnect(),window.removeEventListener("resize",U),window.removeEventListener("orientationchange",U),clearTimeout(Ie),Oe(e);},replay(){B=-1,C=false,d=0,D=false,be(0);},pause(){D=true,cancelAnimationFrame(z);},resume(){D&&(D=false,ne&&(z=requestAnimationFrame(de)));},seek(i){let p=Math.min(1,Math.max(0,i));d=p,B=p,D=true,cancelAnimationFrame(z),be(p);},getProgress(){return d}}}var tt={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function nt(e,r){if(typeof window>"u")return tt;let n=typeof e=="string"?document.querySelector(e):e;if(!n)return process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] scrollCounter: element not found:",e),tt;let t=n,{from:l=0,to:s,format:m,easing:c="ease-out",trigger:u={},once:h=true,decimals:L,onComplete:_}=r,E=L!==void 0?d=>d.toFixed(L):m??(d=>String(Math.round(d))),Q=typeof c=="function"?c:ie[c]??ie["ease-out"],he=ae(u.start??"top 80%"),H=ae(u.end??"top 20%");if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return t.textContent=E(s),_?.(),tt;t.textContent=E(l);let te=0,q=0,x=0,A=false,w=false,b=-1,P=0,O=false,G=()=>window.scrollY,$=()=>window.innerHeight;function N(){let d=t.getBoundingClientRect(),C=pe({top:d.top,height:d.height},G(),$(),he,H);te=C.tStart,q=C.tEnd;}function M(d){t.textContent=E(l+(s-l)*d),t.style.setProperty("--scroll-draw-progress",String(d));}function z(){if(!A||w)return;let d=Q(K(G(),te,q,1));h&&(b=Math.max(b,d),d=b),P=d,M(d),d>=1&&!O?(O=true,_?.()):d<1&&!h&&(O=false),x=requestAnimationFrame(z);}N();{let d=Q(K(G(),te,q,1));h&&d>0&&(b=d),P=d,M(d);}let ne=new IntersectionObserver(d=>{d.forEach(C=>{A=C.isIntersecting,A&&!w?x=requestAnimationFrame(z):cancelAnimationFrame(x);});}),D;function B(){clearTimeout(D),D=setTimeout(N,150);}return window.addEventListener("resize",B),window.addEventListener("orientationchange",B),ne.observe(t),Pe(t,{type:"counter",getProgress:()=>P,getTrigger:()=>({tStart:te,tEnd:q})}),{destroy(){cancelAnimationFrame(x),ne.disconnect(),window.removeEventListener("resize",B),window.removeEventListener("orientationchange",B),clearTimeout(D),Oe(t);},replay(){b=-1,O=false,P=0,w=false,M(0);},pause(){w=true,cancelAnimationFrame(x);},resume(){w&&(w=false,A&&(x=requestAnimationFrame(z)));},seek(d){let C=Math.min(1,Math.max(0,d));P=C,b=C,w=true,cancelAnimationFrame(x),M(C);},getProgress(){return P}}}var bt={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function rt(e,r={}){if(typeof window>"u")return bt;let n=typeof e=="string"?document.querySelector(e):e;if(!n||n.tagName.toLowerCase()!=="video")return process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] scrollVideo: <video> element not found:",e),bt;let t=n,{trigger:l={},easing:s="linear",once:m=false,axis:c="y",preload:u="auto",onReady:h,onComplete:L,onProgress:_}=r,E=window.matchMedia("(prefers-reduced-motion: reduce)").matches,Q=typeof s=="function"?s:ie[s]??ie.linear,he=ae(l.start??"top top"),H=ae(l.end??"bottom top");t.pause(),t.hasAttribute("preload")||(t.preload=u);let ee=r.from??0,te=r.to,q=0,x=0,A=0,w=false,b=false,P=-1,O=0,G=false,$=false,N=()=>c==="x"?window.scrollX:window.scrollY,M=()=>c==="x"?window.innerWidth:window.innerHeight;function z(){let y=t.getBoundingClientRect(),j=c==="x"?y.left:y.top,Ae=c==="x"?y.width:y.height,be=pe({top:j,height:Ae},N(),M(),he,H);q=be.tStart,x=be.tEnd;}function ne(y){if(!$)return;let j=te??t.duration??0;t.currentTime=ee+(j-ee)*y,t.style.setProperty("--scroll-draw-progress",String(y)),_?.(y);}function D(){if(!w||b||!$)return;let y=Q(K(N(),q,x,1));m&&(P=Math.max(P,y),y=P),O=y,ne(y),y>=1&&!G?(G=true,L?.()):y<1&&!m&&(G=false),A=requestAnimationFrame(D);}function B(){if($=true,te===void 0&&(te=t.duration),E){ne(1),h?.();return}z(),h?.(),w&&!b&&(A=requestAnimationFrame(D));}t.readyState>=1?B():t.addEventListener("loadedmetadata",B,{once:true}),$||z();let d=new IntersectionObserver(y=>{y.forEach(j=>{w=j.isIntersecting,w&&!b&&$?A=requestAnimationFrame(D):cancelAnimationFrame(A);});}),C;function g(){clearTimeout(C),C=setTimeout(z,150);}return window.addEventListener("resize",g),window.addEventListener("orientationchange",g),d.observe(t),Pe(t,{type:"video",getProgress:()=>O,getTrigger:()=>({tStart:q,tEnd:x})}),{destroy(){cancelAnimationFrame(A),d.disconnect(),t.removeEventListener("loadedmetadata",B),window.removeEventListener("resize",g),window.removeEventListener("orientationchange",g),clearTimeout(C),Oe(t);},replay(){P=-1,G=false,O=0,b=false,ne(0);},pause(){b=true,cancelAnimationFrame(A);},resume(){b&&(b=false,w&&$&&(A=requestAnimationFrame(D)));},seek(y){let j=Math.min(1,Math.max(0,y));O=j,P=j,b=true,cancelAnimationFrame(A),ne(j);},getProgress(){return O}}}function St(e){let r=e.textContent??"";return e.textContent="",r.split(/(\s+)/).filter(Boolean).map(n=>{let t=document.createElement("span");return t.setAttribute("aria-hidden","true"),/^\s+$/.test(n)?(t.textContent=n,t.style.whiteSpace="pre"):(t.textContent=n,t.style.display="inline-block"),e.appendChild(t),/^\s+$/.test(n)?null:t}).filter(n=>n!==null)}function zt(e){let r=e.textContent??"";return e.textContent="",r.split("").map(n=>{let t=document.createElement("span");return t.setAttribute("aria-hidden","true"),t.textContent=n,n===" "?t.style.whiteSpace="pre":t.style.display="inline-block",e.appendChild(t),n===" "?null:t}).filter(n=>n!==null)}function wt(e){let r=St(e),n=new Map;for(let s of r){let m=s.offsetTop;n.has(m)||n.set(m,[]),n.get(m).push(s);}let t=[],l=Array.from(n.keys()).sort((s,m)=>s-m);for(let s of l){let m=n.get(s),c=document.createElement("span");c.setAttribute("aria-hidden","true"),c.style.display="inline-block";for(let u of m)c.appendChild(u);t.push(c);}e.textContent="";for(let s of t)e.appendChild(s),e.appendChild(document.createTextNode(" "));return t}function Vt(e,r,n,t){if(n<=1||t===0)return e;let l=(n-1)*t,s=r*t,m=s+(1-l);return m<=s?e>=s?1:0:Math.min(1,Math.max(0,(e-s)/(m-s)))}function qt(e,r){let n=[];if(r?.y!==void 0&&n.push(`translateY(${r.y*(1-e)}px)`),r?.x!==void 0&&n.push(`translateX(${r.x*(1-e)}px)`),r?.rotate!==void 0&&n.push(`rotate(${r.rotate*(1-e)}deg)`),r?.scale!==void 0){let t=r.scale+(1-r.scale)*e;n.push(`scale(${t})`);}return n.join(" ")||""}var vt={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function ot(e,r={}){if(typeof window>"u")return vt;let n=typeof e=="string"?document.querySelector(e):e;if(!n)return process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] scrollText: element not found:",e),vt;let t=n,{split:l="words",stagger:s=.04,easing:m="ease-out",from:c={opacity:0,y:24},trigger:u={},once:h=true,onComplete:L}=r,_=window.matchMedia("(prefers-reduced-motion: reduce)").matches,E=typeof m=="function"?m:ie[m]??ie["ease-out"],Q=ae(u.start??"top 85%"),he=ae(u.end??"top 40%"),H=t.innerHTML;t.setAttribute("aria-label",t.textContent??"");let ee;l==="chars"?ee=zt(t):l==="lines"?ee=wt(t):ee=St(t);let te=ee.length;function q(g,y){c?.opacity!==void 0&&(g.style.opacity=String(c.opacity+(1-c.opacity)*y));let j=qt(y,c);j&&(g.style.transform=j);}function x(g){t.style.setProperty("--scroll-draw-progress",String(g)),ee.forEach((y,j)=>{let Ae=E(Vt(g,j,te,s));q(y,Ae);});}if(_)return x(1),L?.(),{destroy(){t.innerHTML=H,t.removeAttribute("aria-label");},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};x(0);let A=0,w=0,b=0,P=false,O=false,G=-1,$=0,N=false,M=()=>window.scrollY,z=()=>window.innerHeight;function ne(){let g=t.getBoundingClientRect(),y=pe({top:g.top,height:g.height},M(),z(),Q,he);A=y.tStart,w=y.tEnd;}function D(){if(!P||O)return;let g=K(M(),A,w,1);h&&(G=Math.max(G,g),g=G),$=g,x(g),g>=1&&!N?(N=true,L?.()):g<1&&!h&&(N=false),b=requestAnimationFrame(D);}ne();let B=new IntersectionObserver(g=>{g.forEach(y=>{P=y.isIntersecting,P&&!O?b=requestAnimationFrame(D):cancelAnimationFrame(b);});}),d;function C(){clearTimeout(d),d=setTimeout(()=>{if(l==="lines"){let g=$;t.innerHTML=H,t.setAttribute("aria-label",t.textContent??""),ee=wt(t),x(g);}ne();},150);}return window.addEventListener("resize",C),window.addEventListener("orientationchange",C),B.observe(t),Pe(t,{type:"text",getProgress:()=>$,getTrigger:()=>({tStart:A,tEnd:w})}),{destroy(){cancelAnimationFrame(b),B.disconnect(),window.removeEventListener("resize",C),window.removeEventListener("orientationchange",C),clearTimeout(d),t.innerHTML=H,t.removeAttribute("aria-label"),Oe(t);},replay(){G=-1,N=false,$=0,O=false,x(0);},pause(){O=true,cancelAnimationFrame(b);},resume(){O&&(O=false,P&&(b=requestAnimationFrame(D)));},seek(g){let y=Math.min(1,Math.max(0,g));$=y,G=y,O=true,cancelAnimationFrame(b),x(y);},getProgress(){return $}}}function pn(e={}){let r=vue.ref(null);return vue.onMounted(()=>{if(!r.value)return;let n=Qe(r.value,e);vue.onUnmounted(()=>n.destroy());}),r}var dn=vue.defineComponent({name:"ScrollDraw",props:{selector:{type:String},speed:{type:Number},fade:{type:Boolean},stagger:{type:Number},easing:{type:[String,Function]},direction:{type:String},trigger:{type:Object},onProgress:{type:Function},onStart:{type:Function},onComplete:{type:Function},once:{type:Boolean},debug:{type:Boolean}},setup(e,{slots:r}){let n=vue.ref(null);return vue.onMounted(()=>{if(!n.value)return;let t={};e.selector!=null&&(t.selector=e.selector),e.speed!=null&&(t.speed=e.speed),e.fade!=null&&(t.fade=e.fade),e.stagger!=null&&(t.stagger=e.stagger),e.easing!=null&&(t.easing=e.easing),e.direction!=null&&(t.direction=e.direction),e.trigger!=null&&(t.trigger=e.trigger),e.once!=null&&(t.once=e.once),e.debug!=null&&(t.debug=e.debug),e.onProgress!=null&&(t.onProgress=e.onProgress),e.onStart!=null&&(t.onStart=e.onStart),e.onComplete!=null&&(t.onComplete=e.onComplete);let l=Qe(n.value,t);vue.onUnmounted(()=>l.destroy());}),()=>vue.h("div",{ref:n},r.default?.())}});function gn(e){let r=vue.ref(null);return vue.onMounted(()=>{if(!r.value)return;let n=et(r.value,e);vue.onUnmounted(()=>n.destroy());}),r}var yn=vue.defineComponent({name:"ScrollAnimate",props:{options:{type:Object,required:true}},setup(e,{slots:r}){let n=vue.ref(null);return vue.onMounted(()=>{if(!n.value)return;let t=et(n.value,e.options);vue.onUnmounted(()=>t.destroy());}),()=>vue.h("div",{ref:n},r.default?.())}});function hn(e){let r=vue.ref(null);return vue.onMounted(()=>{if(!r.value)return;let n=nt(r.value,e);vue.onUnmounted(()=>n.destroy());}),r}var bn=vue.defineComponent({name:"ScrollCounter",props:{to:{type:Number,required:true},from:{type:Number},format:{type:Function},easing:{type:[String,Function]},trigger:{type:Object},once:{type:Boolean},decimals:{type:Number},onComplete:{type:Function}},setup(e){let r=vue.ref(null);return vue.onMounted(()=>{if(!r.value)return;let n={to:e.to};e.from!=null&&(n.from=e.from),e.format!=null&&(n.format=e.format),e.easing!=null&&(n.easing=e.easing),e.trigger!=null&&(n.trigger=e.trigger),e.once!=null&&(n.once=e.once),e.decimals!=null&&(n.decimals=e.decimals),e.onComplete!=null&&(n.onComplete=e.onComplete);let t=nt(r.value,n);vue.onUnmounted(()=>t.destroy());}),()=>vue.h("span",{ref:r})}});function wn(e={}){let r=vue.ref(null);return vue.onMounted(()=>{if(!r.value)return;let n=rt(r.value,e);vue.onUnmounted(()=>n.destroy());}),r}var vn=vue.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 r=vue.ref(null);return vue.onMounted(()=>{if(!r.value)return;let n=rt(r.value,e.options??{});vue.onUnmounted(()=>n.destroy());}),()=>vue.h("video",{ref:r,src:e.src,muted:e.muted,playsinline:e.playsInline,preload:"auto",class:e.class})}});function Sn(e={}){let r=vue.ref(null);return vue.onMounted(()=>{if(!r.value)return;let n=ot(r.value,e);vue.onUnmounted(()=>n.destroy());}),r}var En=vue.defineComponent({name:"ScrollText",props:{options:{type:Object},tag:{type:String,default:"p"}},setup(e,{slots:r}){let n=vue.ref(null);return vue.onMounted(()=>{if(!n.value)return;let t=ot(n.value,e.options??{});vue.onUnmounted(()=>t.destroy());}),()=>vue.h(e.tag,{ref:n},r.default?.())}});exports.ScrollAnimate=yn;exports.ScrollCounter=bn;exports.ScrollDraw=dn;exports.ScrollText=En;exports.ScrollVideo=vn;exports.useScrollAnimate=gn;exports.useScrollCounter=hn;exports.useScrollDraw=pn;exports.useScrollText=Sn;exports.useScrollVideo=wn;
|
|
1
|
+
'use strict';var vue=require('vue');function _t({bounces:e=3,decay:r=.5}={}){let n=Math.max(1,Math.round(e)),t=Math.max(.01,Math.min(.99,r)),l=Math.sqrt(t),s=0,c=[];for(let d=0;d<n;d++){let x=Math.pow(l,d);c.push(x),s+=x;}let u=[0],m=0;for(let d=0;d<n;d++)m+=c[d]/s,u.push(m);return d=>{if(d<=0)return 0;if(d>=1)return 1;for(let x=0;x<n;x++)if(d<=u[x+1]){let N=(d-u[x])/(u[x+1]-u[x]);if(x===0)return N*(2-N);let L=1-Math.pow(t,x);return L+(1-L)*(2*N-1)*(2*N-1)}return 1}}function qt({amplitude:e=1,period:r=.4}={}){let n=Math.max(1,e),t=Math.max(.1,r),l=n<=1?t/4:t/(2*Math.PI)*Math.asin(1/n);return s=>s<=0?0:s>=1?1:n*Math.pow(2,-10*s)*Math.sin((s-l)*(2*Math.PI)/t)+1}var ee={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:_t(),elastic:qt()};function pe(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[n="top",t="bottom"]=r.split(/\s+/).filter(Boolean);return {element:n,viewport:t}}function Et(e,r,n,t){switch(t){case "top":return e+n;case "center":return e+n+r/2;case "bottom":return e+n+r;default:return e+n}}function Tt(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function Be(e){let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),t=parseFloat(e.getAttribute("height")??"0");return 2*(n+t)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function Bt(e,r,n){return Math.min(n,Math.max(r,e))}function Q(e,r,n,t){return n===r?0:Bt((e-r)/(n-r)*t,0,1)}function tt(e,r,n){let t=e.getBoundingClientRect(),l=n==="x"?t.width:t.height;return r?{top:n==="x"?t.left-r.getBoundingClientRect().left+r.scrollLeft:t.top-r.getBoundingClientRect().top+r.scrollTop,height:l,scroll:0}:{top:n==="x"?t.left:t.top,height:l,scroll:n==="x"?window.scrollX:window.scrollY}}function xe(e,r,n,t,l){let s=Et(e.top,e.height,r,t.element)-Tt(t.viewport,n),c=Et(e.top,e.height,r,l.element)-Tt(l.viewport,n);return {tStart:s,tEnd:c}}function xt(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let 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 We(e,r,n){let t=xt(e),l=xt(r);return !t||!l?e:`rgb(${Math.round(t[0]+(l[0]-t[0])*n)},${Math.round(t[1]+(l[1]-t[1])*n)},${Math.round(t[2]+(l[2]-t[2])*n)})`}var At={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=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function ye(e,...r){nt&&console.warn(`[svg-scroll-draw] ${e}`,...r);}var Wt="cubic-bezier(0.333333, 0, 0.666667, 0.333333)",Gt="cubic-bezier(0.333333, 0.666667, 0.666667, 1)",Mt=33;function jt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timing-function: linear(0, 1)")}function Ut(e){let r=[];for(let n=0;n<Mt;n++){let t=n/(Mt-1);r.push(String(Math.round(e(t)*1e5)/1e5));}return `linear(${r.join(",")})`}function rt(e){switch(e){case "linear":return "linear";case "ease-in":return Wt;case "ease-out":return Gt;case "ease-in-out":return jt()?Ut(ee["ease-in-out"]):null;default:return null}}var Xt=0;function Yt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")&&CSS.supports("view-timeline-name: --x")}function Qt(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?ye("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&ye("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Zt(e,r,n){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 l(){let s=n==="x"?window.scrollX:window.scrollY,c=e-s,u=r-s,m=n==="x";t.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:${u}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${u}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",l,{passive:true}),l(),{el:t,destroy(){window.removeEventListener("scroll",l),t.remove();}}}var Lt=/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,Ct=/[MmLlHhVvCcSsQqTtAaZz]/g;function Jt(e,r,n){if(!nt)return;let t=(e.match(Ct)??[]).join("").toUpperCase(),l=(r.match(Ct)??[]).join("").toUpperCase(),s=(e.match(Lt)??[]).length,c=(r.match(Lt)??[]).length;if(t!==l){ye(`morphTo: command sequence differs (${t||"\u2205"} \u2192 ${l||"\u2205"}). Interpolation is coordinate-for-coordinate, so the result will not reach the target shape. Redraw both paths with the same commands.`,n);return}s!==c&&ye(`morphTo: coordinate count differs (${s} \u2192 ${c}). Extra coordinates are ignored and missing ones hold their start value, so the result will not reach the target shape.`,n);}function lt(e,r,n){let t=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),l=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,s=>{let c=parseFloat(s),u=t[l++]??c;return String(+(c+(u-c)*n).toFixed(4))})}function ct(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:n,...t}=r,l=n?{...At[n],...t}:t,s=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:c="path, polyline, line, polygon, rect, circle",speed:u=1,fade:m=false,easing:d="linear",trigger:x={},stagger:N=0,direction:L="forward",once:te=false,debug:Me=false,axis:B="y",scrollContainer:Z,autoReverse:X=false,delay:W=0,strokeColor:A,strokeWidth:C,fillOpacity:M,waypoints:w,velocityScale:O=false,threshold:k=0,rootMargin:$="0px",repeat:E=0,repeatDelay:ne=0,morphTo:F,clip:re,autoplay:oe=false,duration:J=1e3,native:ue=true,onProgress:y,onStart:T,onComplete:g,onEnter:p,onLeave:I,onEnterBack:de,onLeaveBack:ve}=l,me=re===true?"left":typeof re=="string"?re:false,Se=typeof d=="function"?d:ee[d]??ee.linear,Le=pe(x.start??"top bottom"),_e=pe(x.end??"bottom top"),he=typeof Z=="string"?document.querySelector(Z):Z??null,be=Array.isArray(A)?A[0]:null,se=Array.isArray(A)?A[1]:typeof A=="string"?A:null,ie=Array.isArray(C)?C[0]:null,G=Array.isArray(C)?C[1]:typeof C=="number"?C:null,fe=Array.isArray(M)?M[0]:null,Y=Array.isArray(M)?M[1]:typeof M=="number"?M:null;function Ce(o){let a=o*100;switch(me){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 V=me?[]:Array.from(e.querySelectorAll(c)),P=[],i=[],f=0,we=0,D=false,z=false,_=0,j=false,ae=-1,$e=-1,K=false,Ee=0,Re=0,De,ot=null;function gt(){ot?.destroy(),ot=null;}let He=new Set,yt=NaN,Ne=true,Ye=-1,ht=performance.now(),qe=NaN;function st(){return he?B==="x"?he.scrollLeft:he.scrollTop:B==="x"?window.scrollX:window.scrollY}function bt(){return he?B==="x"?he.clientWidth:he.clientHeight:B==="x"?window.innerWidth:window.innerHeight}function wt(){let o=tt(e,he,B),a=xe(o,o.scroll,bt(),Le,_e);f=a.tStart,we=a.tEnd,Me&&nt&&(gt(),ot=Zt(f,we,B));}function Ht(o,a){if(e.style.setProperty("--scroll-draw-progress",String(o)),me){let v=a==="reverse"?1-o:o;e.style.clipPath=Ce(v);return}V.forEach((v,le)=>{v.style.strokeDashoffset=a==="reverse"?`${P[le]*o}`:`${P[le]*(1-o)}`,m&&(v.style.opacity=a==="reverse"?`${1-o}`:`${o}`),be&&se?v.style.stroke=We(be,se,o):se&&(v.style.stroke=se),ie!==null&&G!==null?v.style.strokeWidth=`${ie+(G-ie)*o}`:G!==null&&(v.style.strokeWidth=`${G}`),fe!==null&&Y!==null?v.style.fillOpacity=`${fe+(Y-fe)*o}`:Y!==null&&(v.style.fillOpacity=`${Y}`),F&&v.tagName.toLowerCase()==="path"&&i[le]&&v.setAttribute("d",lt(i[le],F,o));});}function Qe(){if(e.style.setProperty("--scroll-draw-progress","0"),me){e.style.clipPath=Ce(0);return}V.forEach((o,a)=>{o.style.strokeDasharray=`${P[a]}`,o.style.strokeDashoffset=L==="reverse"?"0":`${P[a]}`,m?o.style.opacity=L==="reverse"?"1":"0":o.style.opacity="",be&&(o.style.stroke=be),ie!==null&&(o.style.strokeWidth=`${ie}`),fe!==null&&(o.style.fillOpacity=`${fe}`),F&&o.tagName.toLowerCase()==="path"&&i[a]&&o.setAttribute("d",i[a]);});}if(V.forEach(o=>{Qt(o);let a=Be(o);P.push(a);let v=o.tagName.toLowerCase()==="path";v?i.push(o.getAttribute("d")??""):i.push(""),F&&(v?Jt(i[i.length-1],F,o):ye(`morphTo only applies to <path> elements \u2014 ignored on <${o.tagName}>.`,o)),s?(o.style.strokeDasharray=`${a}`,o.style.strokeDashoffset=L==="reverse"?`${a}`:"0",m&&(o.style.opacity="1"),se&&(o.style.stroke=se),G!==null&&(o.style.strokeWidth=`${G}`),Y!==null&&(o.style.fillOpacity=`${Y}`),F&&o.tagName.toLowerCase()==="path"&&o.setAttribute("d",F)):(o.style.strokeDasharray=`${a}`,o.style.strokeDashoffset=L==="reverse"?"0":`${a}`,m?o.style.opacity=L==="reverse"?"1":"0":o.style.opacity="",be&&(o.style.stroke=be),ie!==null&&(o.style.strokeWidth=`${ie}`),fe!==null&&(o.style.fillOpacity=`${fe}`));}),me){if(s)return e.style.clipPath=Ce(1),g?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=Ce(0);}else if(s)return g?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};let vt=typeof d=="string"?rt(d):null;function Nt(){return !(ue===false||!Yt()||!V.length||!vt||me||B!=="y"||he||u!==1||N!==0||te||X||O!==false||F||w||E||W>0||y||T||g||p||I||de||ve||A!=null||C!=null||M!=null||(x.start??"top bottom").trim()!=="top bottom"||(x.end??"bottom top").trim()!=="bottom top")}function Vt(){let o=++Xt,a=`svg-scroll-draw-${o}`,v=`svg-scroll-draw-host-${o}`,le=`--svg-scroll-draw-${o}`,Ie=L==="reverse"?"0":"var(--ssd-len)",Pe=L==="reverse"?"var(--ssd-len)":"0",Ae=`stroke-dashoffset:${Ie};`,S=`stroke-dashoffset:${Pe};`;m&&(Ae+=`opacity:${L==="reverse"?1:0};`,S+=`opacity:${L==="reverse"?0:1};`);let R=document.createElement("style");R.setAttribute("data-svg-scroll-draw",""),R.textContent=`@keyframes ${a}{from{${Ae}}to{${S}}}.${v}{view-timeline-name:${le};view-timeline-axis:block;}.${a}{animation-name:${a};animation-duration:auto;animation-timing-function:${vt};animation-fill-mode:both;animation-timeline:${le};animation-range:cover 0% cover 100%;}`,document.head.appendChild(R),e.classList.add(v);function ce(h,U){h.style.setProperty("--ssd-len",String(P[U])),h.style.strokeDasharray=`${P[U]}`,h.style.strokeDashoffset="",h.style.opacity="",h.style.animationPlayState="",h.classList.add(a);}V.forEach(ce);let b=false,H=-1;function q(){if(H>=0)return H;let h=e.getBoundingClientRect(),{tStart:U,tEnd:Te}=xe({top:h.top,height:h.height},st(),bt(),Le,_e);return Se(Q(st(),U,Te,u))}return {destroy(){e.classList.remove(v),V.forEach(h=>{h.classList.remove(a),h.style.removeProperty("--ssd-len"),h.style.animationPlayState="";}),R.remove();},replay(){b=false,H=-1,V.forEach(ce);},pause(){b=true,V.forEach(h=>{h.style.animationPlayState="paused";});},resume(){b&&(b=false,V.forEach(h=>{h.style.animationPlayState="running";}));},seek(h){let U=Math.min(1,Math.max(0,h));H=U,b=true,V.forEach((Te,ge)=>{Te.classList.remove(a),Te.style.strokeDashoffset=L==="reverse"?`${P[ge]*U}`:`${P[ge]*(1-U)}`,m&&(Te.style.opacity=L==="reverse"?`${1-U}`:`${U}`);});},getProgress(){return q()},refresh(){V.forEach((h,U)=>{P[U]=Be(h),h.style.setProperty("--ssd-len",String(P[U])),h.style.strokeDasharray=`${P[U]}`;});}}}if(Nt())return Vt();function zt(){let o=Math.max(1,J),a=0,v=0,le=false;function Ie(b){let H=true;if(me){let q=Math.min(1,Math.max(0,b/o)),h=Se(q);Ee=h,e.style.setProperty("--scroll-draw-progress",String(h)),e.style.clipPath=Ce(L==="reverse"?1-h:h),y?.(h),q<1&&(H=false);}else V.forEach((q,h)=>{let U=h*N*o,Te=Math.min(1,Math.max(0,(b-U)/o)),ge=Se(Te);q.style.strokeDashoffset=L==="reverse"?`${P[h]*ge}`:`${P[h]*(1-ge)}`,m&&(q.style.opacity=L==="reverse"?`${1-ge}`:`${ge}`),be&&se?q.style.stroke=We(be,se,ge):se&&(q.style.stroke=se),ie!==null&&G!==null?q.style.strokeWidth=`${ie+(G-ie)*ge}`:G!==null&&(q.style.strokeWidth=`${G}`),fe!==null&&Y!==null?q.style.fillOpacity=`${fe+(Y-fe)*ge}`:Y!==null&&(q.style.fillOpacity=`${Y}`),F&&q.tagName.toLowerCase()==="path"&&i[h]&&q.setAttribute("d",lt(i[h],F,ge)),h===0&&(Ee=ge,y?.(ge),e.style.setProperty("--scroll-draw-progress",String(ge))),Te<1&&(H=false);});if(w){let q=Math.min(1,Math.max(0,b/o)),h=Se(q);for(let U in w){let Te=parseFloat(U);h>=Te&&!He.has(Te)&&(He.add(Te),w[U]?.());}}return H}function Pe(b){if(K)return;let H=b-a;z||(z=true,T?.());let q=Ie(H);if(q&&!D){D=true,Ie(o*(1+Math.max(0,V.length-1)*N)),g?.(),Re<(E==="infinite"?1/0:E??0)&&(Re++,De=setTimeout(()=>{a=performance.now(),z=false,D=false,He.clear(),Qe(),_=requestAnimationFrame(Pe);},ne));return}q||(_=requestAnimationFrame(Pe));}function Ae(){cancelAnimationFrame(_),clearTimeout(De),a=performance.now(),v=0,K=false,z=false,D=false,Re=0,le=true,Ee=0,He.clear(),Qe(),_=requestAnimationFrame(Pe);}let S=new IntersectionObserver(b=>{b.forEach(H=>{H.isIntersecting&&!(te&&D)?Ae():!H.isIntersecting&&!te&&!D&&(cancelAnimationFrame(_),clearTimeout(De),le=false);});},{root:he??null,threshold:k,rootMargin:$}),R;function ce(){clearTimeout(R),R=setTimeout(()=>{V.forEach((b,H)=>{P[H]=Be(b),b.style.strokeDasharray=`${P[H]}`;});},150);}return window.addEventListener("resize",ce),window.addEventListener("orientationchange",ce),W>0?setTimeout(()=>S.observe(e),W):S.observe(e),{destroy(){cancelAnimationFrame(_),clearTimeout(De),S.disconnect(),window.removeEventListener("resize",ce),window.removeEventListener("orientationchange",ce),clearTimeout(R);},replay(){Re=0,Ae();},pause(){K||!le||(K=true,v=performance.now()-a,cancelAnimationFrame(_));},resume(){K&&(K=false,le=true,a=performance.now()-v,_=requestAnimationFrame(Pe));},seek(b){let H=Math.min(1,Math.max(0,b));Ee=H,K=true,v=H*o,a=performance.now()-v,cancelAnimationFrame(_),Ie(v);},getProgress(){return Ee},refresh(){clearTimeout(R),V.forEach((b,H)=>{P[H]=Be(b),b.style.strokeDasharray=`${P[H]}`;});}}}if(oe)return zt();wt();function Ze(){if(!j||K)return;let o=performance.now(),a=st();if(!Ne&&O===false&&a===yt){_=requestAnimationFrame(Ze);return}Ne=false,yt=a;let v=u;if(O!==false){let S=o-ht,R=S>0?Math.abs(a-(Ye<0?a:Ye))/S:0;v=u*Math.max(.2,1+R*(typeof O=="number"?O:1)*.04);}Ye=a,ht=o;let le=X?$e===-1||a>=$e?"forward":"reverse":L;$e=a;let Ie=we-f,Pe=true,Ae=Ie===0?0:(a-f)/Ie;if(isNaN(qe)||(qe<=0&&Ae>0?p?.():qe>0&&Ae<=0&&ve?.(),qe<1&&Ae>=1?I?.():qe>=1&&Ae<1&&de?.()),qe=Ae,me){let S=Se(Q(a,f,we,v));te&&!X&&(ae=Math.max(ae,S),S=ae),Ee=S,e.style.setProperty("--scroll-draw-progress",String(S));let R=le==="reverse"?1-S:S;e.style.clipPath=Ce(R),y?.(S),!z&&Q(a,f,we,v)>0&&(z=true,T?.()),S>=1&&!D?(D=true,g?.(),Re<(E==="infinite"?1/0:E??0)&&(Re++,De=setTimeout(()=>{ae=-1,z=false,D=false,e.style.clipPath=Ce(0);},ne))):S<1&&!te&&(D=false),_=requestAnimationFrame(Ze);return}if(V.forEach((S,R)=>{let ce=R*N*Ie,b=Se(Q(a,f+ce,we+ce,v));te&&!X&&(ae=Math.max(ae,b),b=ae),Ee=b,S.style.strokeDashoffset=le==="reverse"?`${P[R]*b}`:`${P[R]*(1-b)}`,m&&(S.style.opacity=le==="reverse"?`${1-b}`:`${b}`),be&&se?S.style.stroke=We(be,se,b):se&&(S.style.stroke=se),ie!==null&&G!==null?S.style.strokeWidth=`${ie+(G-ie)*b}`:G!==null&&(S.style.strokeWidth=`${G}`),fe!==null&&Y!==null?S.style.fillOpacity=`${fe+(Y-fe)*b}`:Y!==null&&(S.style.fillOpacity=`${Y}`),F&&S.tagName.toLowerCase()==="path"&&i[R]&&S.setAttribute("d",lt(i[R],F,b)),R===0&&(y?.(b),e.style.setProperty("--scroll-draw-progress",String(b))),b<1&&(Pe=false);}),w){let S=Se(Q(a,f,we,v));for(let R in w){let ce=parseFloat(R);S>=ce&&!He.has(ce)&&(He.add(ce),w[R]?.());}}!z&&Q(a,f,we,v)>0&&(z=true,T?.()),Pe&&!D?(D=true,g?.(),Re<(E==="infinite"?1/0:E??0)&&(Re++,De=setTimeout(()=>{ae=-1,z=false,D=false,He.clear(),Qe(),Ne=true;},ne))):!Pe&&!te&&(D=false),_=requestAnimationFrame(Ze);}let it=false;function Je(){it||(it=true,_=requestAnimationFrame(function(){Ze();}));}function Ke(){it=false,cancelAnimationFrame(_);}let at=new IntersectionObserver(o=>{o.forEach(a=>{j=a.isIntersecting,j&&!K?(Ne=true,Je()):Ke();});},{root:he??null,threshold:k,rootMargin:$});function St(){V.forEach((o,a)=>{P[a]=Be(o),o.style.strokeDasharray=`${P[a]}`;}),wt(),Ne=true;}let et;function Ge(){clearTimeout(et),et=setTimeout(St,150);}window.addEventListener("resize",Ge),window.addEventListener("orientationchange",Ge);let je;return typeof ResizeObserver<"u"&&(je=new ResizeObserver(()=>Ge()),je.observe(document.body),je.observe(document.documentElement),je.observe(e)),W>0?setTimeout(()=>at.observe(e),W):at.observe(e),{destroy(){cancelAnimationFrame(_),clearTimeout(De),Ke(),at.disconnect(),je?.disconnect(),window.removeEventListener("resize",Ge),window.removeEventListener("orientationchange",Ge),clearTimeout(et),gt();},replay(){ae=-1,$e=-1,Ye=-1,z=false,D=false,Re=0,K=false,Ee=0,He.clear(),clearTimeout(De),Qe(),Ne=true,j&&Je();},pause(){K=true,Ke();},resume(){K&&(K=false,Ne=true,j&&Je());},seek(o){let a=Math.min(1,Math.max(0,o));Ee=a,ae=a,K=true,Ke(),Ht(a,L),Ne=true;},getProgress(){return Ee},refresh(){clearTimeout(et),St(),j&&!K&&Je();}}}var $t=new Map;function Ve(e,r){$t.set(e,r);}function ze(e){$t.delete(e);}function Kt(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function Pt(e){let r=[],n=/([\w]+)\(([^)]*)\)/g,t;for(;(t=n.exec(e))!==null;){let l=[],s=[],c=t[2].trim();if(c)for(let u of c.split(/[\s,]+/)){let m=u.match(/^([-+]?[\d.eE]+)(.*)$/);l.push(m?parseFloat(m[1]):0),s.push(m?m[2]:"");}r.push({fn:t[1],nums:l,units:s});}return r}function en(e,r,n){let t=Pt(e),l=Pt(r);return t.length===0||t.length!==l.length?n<1?e:r:t.map((s,c)=>{let u=l[c];return s.fn!==u.fn||s.nums.length!==u.nums.length?n<1?`${s.fn}(${s.nums.map((m,d)=>`${m}${s.units[d]}`).join(", ")})`:`${u.fn}(${u.nums.map((m,d)=>`${m}${u.units[d]}`).join(", ")})`:`${s.fn}(${s.nums.map((m,d)=>`${m+(u.nums[d]-m)*n}${s.units[d]}`).join(", ")})`}).join(" ")}function Ot(e,r,n){if(typeof e=="number"&&typeof r=="number")return String(e+(r-e)*n);let t=String(e),l=String(r);if(Kt(t))return We(t,l,n);if(t.includes("("))return en(t,l,n);let s=t.match(/^([-+]?[\d.]+)(.*)$/),c=l.match(/^([-+]?[\d.]+)(.*)$/);if(s&&c){let u=parseFloat(s[1]),m=parseFloat(c[1]);return `${u+(m-u)*n}${s[2]||c[2]}`}return n<1?t:l}function tn(e){return e.replace(/([A-Z])/g,r=>`-${r.toLowerCase()}`)}var nn=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),rn=0,kt="--scroll-draw-progress";function on(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function ut(e,r){let n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return n;let{props:t,trigger:l={},easing:s="ease-out",speed:c=1,once:u=false,axis:m="y",scrollContainer:d,native:x=true,velocityScale:N=false,respectReducedMotion:L=true,triggerElement:te,onProgress:Me,onComplete:B,onEnter:Z,onLeave:X,onEnterBack:W,onLeaveBack:A}=r,C=L&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,M=typeof s=="function"?s:ee[s]??ee["ease-out"],w=pe(l.start??"top bottom"),O=pe(l.end??"bottom top"),k=te??e,$=typeof d=="string"?document.querySelector(d):d??null,E=Object.entries(t).map(([i,f])=>({prop:tn(i),from:Array.isArray(f)?f[0]:"",to:Array.isArray(f)?f[1]:f}));function ne(){let i=window.getComputedStyle(e);for(let f of E)f.from===""&&(f.from=i.getPropertyValue(f.prop).trim()||"0");}function F(){for(let i of E)e.style.setProperty(i.prop,String(i.to));}let re=new Map;for(let i of [...E.map(f=>f.prop),kt])re.set(i,e.style.getPropertyValue(i));function oe(){for(let[i,f]of re)f?e.style.setProperty(i,f):e.style.removeProperty(i);}if(C)return F(),B?.(),{...n,destroy:oe,getProgress:()=>1};ne();let J=typeof s=="string"?rt(s):null;function ue(){if(!x||!on()||!J||m!=="y"||$||k!==e||u||c!==1||Me||B||Z||X||W||A||N!==false||(l.start??"top bottom").trim()!=="top bottom"||(l.end??"bottom top").trim()!=="bottom top")return false;for(let i of E)if(!nn.has(i.prop))return false;return true}function y(){let i=`ssd-a-${++rn}`,f=E.map(j=>`${j.prop}:${j.from}`).join(";"),we=E.map(j=>`${j.prop}:${j.to}`).join(";"),D=document.createElement("style");D.setAttribute("data-ssd-animate",""),D.textContent=`@keyframes ${i}{from{${f}}to{${we}}}.${i}{animation-name:${i};animation-duration:auto;animation-timing-function:${J};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(D),e.classList.add(i);let z=()=>m==="x"?window.scrollX:window.scrollY,_=()=>m==="x"?window.innerWidth:window.innerHeight;return {destroy(){e.classList.remove(i),D.remove(),e.style.animationPlayState="",oe();},replay(){e.classList.remove(i),e.offsetWidth,e.classList.add(i);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(j){let ae=Math.min(1,Math.max(0,j));e.classList.remove(i);for(let $e of E)e.style.setProperty($e.prop,Ot($e.from,$e.to,ae));},getProgress(){let j=e.getBoundingClientRect(),ae=z(),$e=_(),{tStart:K,tEnd:Ee}=xe({top:j.top,height:j.height},ae,$e,w,O);return M(Q(ae,K,Ee,c))}}}if(ue())return y();let T=0,g=0,p=0,I=false,de=false,ve=-1,me=0,Se=false,Le=NaN,_e=-1,he=0,be=()=>$?m==="x"?$.scrollLeft:$.scrollTop:m==="x"?window.scrollX:window.scrollY,se=()=>$?m==="x"?$.clientWidth:$.clientHeight:m==="x"?window.innerWidth:window.innerHeight;function ie(){let i=tt(k,$,m),f=xe(i,i.scroll,se(),w,O);T=f.tStart,g=f.tEnd;}function G(i){e.style.setProperty(kt,String(i));for(let f of E)e.style.setProperty(f.prop,Ot(f.from,f.to,i));Me?.(i);}function fe(i){if(isNaN(Le)){Le=i;return}Le<=0&&i>0?Z?.():Le>0&&i<=0&&A?.(),Le<1&&i>=1?X?.():Le>=1&&i<1&&W?.(),Le=i;}function Y(){if(!I||de)return;let i=performance.now(),f=be(),we=c;if(N!==false){let _=i-he,j=_>0?Math.abs(f-(_e<0?f:_e))/_:0;we=c*Math.max(.2,1+j*(typeof N=="number"?N:1)*.04);}_e=f,he=i;let D=g===T?0:(f-T)/(g-T);fe(D);let z=M(Q(f,T,g,we));u&&(ve=Math.max(ve,z),z=ve),me=z,G(z),z>=1&&!Se?(Se=true,B?.()):z<1&&!u&&(Se=false),p=requestAnimationFrame(Y);}ie(),g===T&&ye("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 i=M(Q(be(),T,g,c));u&&i>0&&(ve=i),me=i,G(i);}let Ce=new IntersectionObserver(i=>{i.forEach(f=>{I=f.isIntersecting,I&&!de?p=requestAnimationFrame(Y):cancelAnimationFrame(p);});},{root:$??null}),V;function P(){clearTimeout(V),V=setTimeout(ie,150);}return window.addEventListener("resize",P),window.addEventListener("orientationchange",P),Ce.observe(e),Ve(e,{type:"animate",getProgress:()=>me,getTrigger:()=>({tStart:T,tEnd:g})}),{destroy(){cancelAnimationFrame(p),Ce.disconnect(),window.removeEventListener("resize",P),window.removeEventListener("orientationchange",P),clearTimeout(V),oe(),ze(e);},replay(){ve=-1,Se=false,me=0,de=false,G(0);},pause(){de=true,cancelAnimationFrame(p);},resume(){de&&(de=false,I&&(p=requestAnimationFrame(Y)));},seek(i){let f=Math.min(1,Math.max(0,i));me=f,ve=f,de=true,cancelAnimationFrame(p),G(f);},getProgress(){return me}}}var mt={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function ft(e,r){if(typeof window>"u")return mt;let n=typeof e=="string"?document.querySelector(e):e;if(!n)return ye("scrollCounter: element not found:",e),mt;let t=n,{from:l=0,to:s,format:c,easing:u="ease-out",trigger:m={},once:d=true,decimals:x,onComplete:N}=r,L=x!==void 0?y=>y.toFixed(x):c??(y=>String(Math.round(y))),te=typeof u=="function"?u:ee[u]??ee["ease-out"],Me=pe(m.start??"top 80%"),B=pe(m.end??"top 20%");if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return t.textContent=L(s),N?.(),mt;let X=0,W=0,A=0,C=false,M=false,w=-1,O=0,k=false,$=()=>window.scrollY,E=()=>window.innerHeight;function ne(){let y=t.getBoundingClientRect(),T=xe({top:y.top,height:y.height},$(),E(),Me,B);X=T.tStart,W=T.tEnd;}function F(y){t.textContent=L(l+(s-l)*y),t.style.setProperty("--scroll-draw-progress",String(y));}function re(){if(!C||M)return;let y=te(Q($(),X,W,1));d&&(w=Math.max(w,y),y=w),O=y,F(y),y>=1&&!k?(k=true,N?.()):y<1&&!d&&(k=false),A=requestAnimationFrame(re);}ne();{let y=te(Q($(),X,W,1));d&&y>0&&(w=y),O=y,F(y);}let oe=new IntersectionObserver(y=>{y.forEach(T=>{C=T.isIntersecting,C&&!M?A=requestAnimationFrame(re):cancelAnimationFrame(A);});}),J;function ue(){clearTimeout(J),J=setTimeout(ne,150);}return window.addEventListener("resize",ue),window.addEventListener("orientationchange",ue),oe.observe(t),Ve(t,{type:"counter",getProgress:()=>O,getTrigger:()=>({tStart:X,tEnd:W})}),{destroy(){cancelAnimationFrame(A),oe.disconnect(),window.removeEventListener("resize",ue),window.removeEventListener("orientationchange",ue),clearTimeout(J),ze(t);},replay(){w=-1,k=false,O=0,M=false,F(0);},pause(){M=true,cancelAnimationFrame(A);},resume(){M&&(M=false,C&&(A=requestAnimationFrame(re)));},seek(y){let T=Math.min(1,Math.max(0,y));O=T,w=T,M=true,cancelAnimationFrame(A),F(T);},getProgress(){return O}}}var Ft={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function pt(e,r={}){if(typeof window>"u")return Ft;let n=typeof e=="string"?document.querySelector(e):e;if(!n||n.tagName.toLowerCase()!=="video")return ye("scrollVideo: <video> element not found:",e),Ft;let t=n,{trigger:l={},easing:s="linear",once:c=false,axis:u="y",preload:m="auto",onReady:d,onComplete:x,onProgress:N}=r,L=window.matchMedia("(prefers-reduced-motion: reduce)").matches,te=typeof s=="function"?s:ee[s]??ee.linear,Me=pe(l.start??"top top"),B=pe(l.end??"bottom top");t.pause(),t.hasAttribute("preload")||(t.preload=m);let Z=r.from??0,X=r.to,W=0,A=0,C=0,M=false,w=false,O=-1,k=0,$=false,E=false,ne=()=>u==="x"?window.scrollX:window.scrollY,F=()=>u==="x"?window.innerWidth:window.innerHeight;function re(){let p=t.getBoundingClientRect(),I=u==="x"?p.left:p.top,de=u==="x"?p.width:p.height,ve=xe({top:I,height:de},ne(),F(),Me,B);W=ve.tStart,A=ve.tEnd;}function oe(p){if(!E)return;let I=X??t.duration??0;t.currentTime=Z+(I-Z)*p,t.style.setProperty("--scroll-draw-progress",String(p)),N?.(p);}function J(){if(!M||w||!E)return;let p=te(Q(ne(),W,A,1));c&&(O=Math.max(O,p),p=O),k=p,oe(p),p>=1&&!$?($=true,x?.()):p<1&&!c&&($=false),C=requestAnimationFrame(J);}function ue(){if(E=true,X===void 0&&(X=t.duration),L){oe(1),d?.();return}re(),d?.(),M&&!w&&(C=requestAnimationFrame(J));}t.readyState>=1?ue():t.addEventListener("loadedmetadata",ue,{once:true}),E||re();let y=new IntersectionObserver(p=>{p.forEach(I=>{M=I.isIntersecting,M&&!w&&E?C=requestAnimationFrame(J):cancelAnimationFrame(C);});}),T;function g(){clearTimeout(T),T=setTimeout(re,150);}return window.addEventListener("resize",g),window.addEventListener("orientationchange",g),y.observe(t),Ve(t,{type:"video",getProgress:()=>k,getTrigger:()=>({tStart:W,tEnd:A})}),{destroy(){cancelAnimationFrame(C),y.disconnect(),t.removeEventListener("loadedmetadata",ue),window.removeEventListener("resize",g),window.removeEventListener("orientationchange",g),clearTimeout(T),ze(t);},replay(){O=-1,$=false,k=0,w=false,oe(0);},pause(){w=true,cancelAnimationFrame(C);},resume(){w&&(w=false,M&&E&&(C=requestAnimationFrame(J)));},seek(p){let I=Math.min(1,Math.max(0,p));k=I,O=I,w=true,cancelAnimationFrame(C),oe(I);},getProgress(){return k}}}function Dt(e){let r=e.textContent??"";return e.textContent="",r.split(/(\s+)/).filter(Boolean).map(n=>{let t=document.createElement("span");return t.setAttribute("aria-hidden","true"),/^\s+$/.test(n)?(t.textContent=n,t.style.whiteSpace="pre"):(t.textContent=n,t.style.display="inline-block"),e.appendChild(t),/^\s+$/.test(n)?null:t}).filter(n=>n!==null)}function sn(e){let r=e.textContent??"";return e.textContent="",r.split("").map(n=>{let t=document.createElement("span");return t.setAttribute("aria-hidden","true"),t.textContent=n,n===" "?t.style.whiteSpace="pre":t.style.display="inline-block",e.appendChild(t),n===" "?null:t}).filter(n=>n!==null)}function Rt(e){let r=Dt(e),n=new Map;for(let s of r){let c=s.offsetTop;n.has(c)||n.set(c,[]),n.get(c).push(s);}let t=[],l=Array.from(n.keys()).sort((s,c)=>s-c);for(let s of l){let c=n.get(s),u=document.createElement("span");u.setAttribute("aria-hidden","true"),u.style.display="inline-block",c.forEach((m,d)=>{let x=m.nextElementSibling;u.appendChild(m),d<c.length-1&&x&&x.style.whiteSpace==="pre"&&u.appendChild(x);}),t.push(u);}return e.textContent="",t.forEach((s,c)=>{e.appendChild(s),c<t.length-1&&e.appendChild(document.createTextNode(" "));}),t}function an(e,r,n,t){if(n<=1||t===0)return e;let l=(n-1)*t,s=r*t,c=s+(1-l);return c<=s?e>=s?1:0:Math.min(1,Math.max(0,(e-s)/(c-s)))}function ln(e,r){let n=[];if(r?.y!==void 0&&n.push(`translateY(${r.y*(1-e)}px)`),r?.x!==void 0&&n.push(`translateX(${r.x*(1-e)}px)`),r?.rotate!==void 0&&n.push(`rotate(${r.rotate*(1-e)}deg)`),r?.scale!==void 0){let t=r.scale+(1-r.scale)*e;n.push(`scale(${t})`);}return n.join(" ")||""}var It={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function dt(e,r={}){if(typeof window>"u")return It;let n=typeof e=="string"?document.querySelector(e):e;if(!n)return ye("scrollText: element not found:",e),It;let t=n,{split:l="words",stagger:s=.04,easing:c="ease-out",from:u={opacity:0,y:24},trigger:m={},once:d=true,onComplete:x}=r,N=window.matchMedia("(prefers-reduced-motion: reduce)").matches,L=typeof c=="function"?c:ee[c]??ee["ease-out"],te=pe(m.start??"top 85%"),Me=pe(m.end??"top 40%"),B=t.innerHTML;t.setAttribute("aria-label",t.textContent??"");let Z;l==="chars"?Z=sn(t):l==="lines"?Z=Rt(t):Z=Dt(t);let X=Z.length;function W(g,p){u?.opacity!==void 0&&(g.style.opacity=String(u.opacity+(1-u.opacity)*p));let I=ln(p,u);I&&(g.style.transform=I);}function A(g){t.style.setProperty("--scroll-draw-progress",String(g)),Z.forEach((p,I)=>{let de=L(an(g,I,X,s));W(p,de);});}if(N)return A(1),x?.(),{destroy(){t.innerHTML=B,t.removeAttribute("aria-label");},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};A(0);let C=0,M=0,w=0,O=false,k=false,$=-1,E=0,ne=false,F=()=>window.scrollY,re=()=>window.innerHeight;function oe(){let g=t.getBoundingClientRect(),p=xe({top:g.top,height:g.height},F(),re(),te,Me);C=p.tStart,M=p.tEnd;}function J(){if(!O||k)return;let g=Q(F(),C,M,1);d&&($=Math.max($,g),g=$),E=g,A(g),g>=1&&!ne?(ne=true,x?.()):g<1&&!d&&(ne=false),w=requestAnimationFrame(J);}oe();let ue=new IntersectionObserver(g=>{g.forEach(p=>{O=p.isIntersecting,O&&!k?w=requestAnimationFrame(J):cancelAnimationFrame(w);});}),y;function T(){clearTimeout(y),y=setTimeout(()=>{if(l==="lines"){let g=E;t.innerHTML=B,t.setAttribute("aria-label",t.textContent??""),Z=Rt(t),A(g);}oe();},150);}return window.addEventListener("resize",T),window.addEventListener("orientationchange",T),ue.observe(t),Ve(t,{type:"text",getProgress:()=>E,getTrigger:()=>({tStart:C,tEnd:M})}),{destroy(){cancelAnimationFrame(w),ue.disconnect(),window.removeEventListener("resize",T),window.removeEventListener("orientationchange",T),clearTimeout(y),t.innerHTML=B,t.removeAttribute("aria-label"),ze(t);},replay(){$=-1,ne=false,E=0,k=false,A(0);},pause(){k=true,cancelAnimationFrame(w);},resume(){k&&(k=false,O&&(w=requestAnimationFrame(J)));},seek(g){let p=Math.min(1,Math.max(0,g));E=p,$=p,k=true,cancelAnimationFrame(w),A(p);},getProgress(){return E}}}function Bn(e={}){let r=vue.ref(null);return vue.onMounted(()=>{if(!r.value)return;let n=ct(r.value,e);vue.onUnmounted(()=>n.destroy());}),r}var Wn=vue.defineComponent({name:"ScrollDraw",props:{selector:{type:String},speed:{type:Number},fade:{type:Boolean},stagger:{type:Number},easing:{type:[String,Function]},direction:{type:String},trigger:{type:Object},onProgress:{type:Function},onStart:{type:Function},onComplete:{type:Function},once:{type:Boolean},debug:{type:Boolean}},setup(e,{slots:r}){let n=vue.ref(null);return vue.onMounted(()=>{if(!n.value)return;let t={};e.selector!=null&&(t.selector=e.selector),e.speed!=null&&(t.speed=e.speed),e.fade!=null&&(t.fade=e.fade),e.stagger!=null&&(t.stagger=e.stagger),e.easing!=null&&(t.easing=e.easing),e.direction!=null&&(t.direction=e.direction),e.trigger!=null&&(t.trigger=e.trigger),e.once!=null&&(t.once=e.once),e.debug!=null&&(t.debug=e.debug),e.onProgress!=null&&(t.onProgress=e.onProgress),e.onStart!=null&&(t.onStart=e.onStart),e.onComplete!=null&&(t.onComplete=e.onComplete);let l=ct(n.value,t);vue.onUnmounted(()=>l.destroy());}),()=>vue.h("div",{ref:n},r.default?.())}});function Gn(e){let r=vue.ref(null);return vue.onMounted(()=>{if(!r.value)return;let n=ut(r.value,e);vue.onUnmounted(()=>n.destroy());}),r}var jn=vue.defineComponent({name:"ScrollAnimate",props:{options:{type:Object,required:true}},setup(e,{slots:r}){let n=vue.ref(null);return vue.onMounted(()=>{if(!n.value)return;let t=ut(n.value,e.options);vue.onUnmounted(()=>t.destroy());}),()=>vue.h("div",{ref:n},r.default?.())}});function Un(e){let r=vue.ref(null);return vue.onMounted(()=>{if(!r.value)return;let n=ft(r.value,e);vue.onUnmounted(()=>n.destroy());}),r}var Xn=vue.defineComponent({name:"ScrollCounter",props:{to:{type:Number,required:true},from:{type:Number},format:{type:Function},easing:{type:[String,Function]},trigger:{type:Object},once:{type:Boolean},decimals:{type:Number},onComplete:{type:Function}},setup(e){let r=vue.ref(null);return vue.onMounted(()=>{if(!r.value)return;let n={to:e.to};e.from!=null&&(n.from=e.from),e.format!=null&&(n.format=e.format),e.easing!=null&&(n.easing=e.easing),e.trigger!=null&&(n.trigger=e.trigger),e.once!=null&&(n.once=e.once),e.decimals!=null&&(n.decimals=e.decimals),e.onComplete!=null&&(n.onComplete=e.onComplete);let t=ft(r.value,n);vue.onUnmounted(()=>t.destroy());}),()=>vue.h("span",{ref:r})}});function Yn(e={}){let r=vue.ref(null);return vue.onMounted(()=>{if(!r.value)return;let n=pt(r.value,e);vue.onUnmounted(()=>n.destroy());}),r}var Qn=vue.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 r=vue.ref(null);return vue.onMounted(()=>{if(!r.value)return;let n=pt(r.value,e.options??{});vue.onUnmounted(()=>n.destroy());}),()=>vue.h("video",{ref:r,src:e.src,muted:e.muted,playsinline:e.playsInline,preload:"auto",class:e.class})}});function Zn(e={}){let r=vue.ref(null);return vue.onMounted(()=>{if(!r.value)return;let n=dt(r.value,e);vue.onUnmounted(()=>n.destroy());}),r}var Jn=vue.defineComponent({name:"ScrollText",props:{options:{type:Object},tag:{type:String,default:"p"}},setup(e,{slots:r}){let n=vue.ref(null);return vue.onMounted(()=>{if(!n.value)return;let t=dt(n.value,e.options??{});vue.onUnmounted(()=>t.destroy());}),()=>vue.h(e.tag,{ref:n},r.default?.())}});exports.ScrollAnimate=jn;exports.ScrollCounter=Xn;exports.ScrollDraw=Wn;exports.ScrollText=Jn;exports.ScrollVideo=Qn;exports.useScrollAnimate=Gn;exports.useScrollCounter=Un;exports.useScrollDraw=Bn;exports.useScrollText=Zn;exports.useScrollVideo=Yn;
|