svg-scroll-draw 2.9.0 → 2.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +17 -10
- package/dist/angular/index.cjs +3 -3
- package/dist/angular/index.d.mts +42 -0
- package/dist/angular/index.d.ts +42 -0
- package/dist/angular/index.mjs +3 -3
- package/dist/astro/index.cjs +3 -3
- package/dist/astro/index.d.mts +20 -5
- package/dist/astro/index.d.ts +20 -5
- package/dist/astro/index.mjs +3 -3
- package/dist/cdn/svg-scroll-draw.dev.global.js +1903 -0
- package/dist/cdn/svg-scroll-draw.global.js +3 -3
- package/dist/cinematic/index.cjs +2 -2
- package/dist/cinematic/index.mjs +2 -2
- package/dist/cli/init.js +104 -101
- package/dist/devtools/index.cjs +1 -1
- package/dist/devtools/index.mjs +1 -1
- package/dist/group/index.cjs +3 -3
- package/dist/group/index.d.mts +42 -0
- package/dist/group/index.d.ts +42 -0
- package/dist/group/index.mjs +3 -3
- package/dist/horizontal/index.cjs +1 -1
- package/dist/horizontal/index.d.mts +48 -1
- package/dist/horizontal/index.d.ts +48 -1
- package/dist/horizontal/index.mjs +1 -1
- package/dist/index.cjs +4 -4
- package/dist/index.d.mts +42 -0
- package/dist/index.d.ts +42 -0
- package/dist/index.mjs +4 -4
- package/dist/nuxt/index.cjs +3 -3
- package/dist/nuxt/index.d.mts +27 -0
- package/dist/nuxt/index.d.ts +27 -0
- package/dist/nuxt/index.mjs +3 -3
- package/dist/pin/index.cjs +1 -1
- package/dist/pin/index.mjs +1 -1
- package/dist/progress/index.cjs +1 -1
- package/dist/progress/index.d.mts +15 -0
- package/dist/progress/index.d.ts +15 -0
- package/dist/progress/index.mjs +1 -1
- package/dist/react/index.cjs +3 -3
- package/dist/react/index.d.mts +27 -0
- package/dist/react/index.d.ts +27 -0
- package/dist/react/index.mjs +3 -3
- package/dist/reveal/index.cjs +1 -1
- package/dist/reveal/index.mjs +1 -1
- package/dist/snap/index.cjs +1 -1
- package/dist/snap/index.d.mts +8 -0
- package/dist/snap/index.d.ts +8 -0
- package/dist/snap/index.mjs +1 -1
- package/dist/solid/index.cjs +3 -3
- package/dist/solid/index.d.mts +42 -0
- package/dist/solid/index.d.ts +42 -0
- package/dist/solid/index.mjs +3 -3
- package/dist/svelte/index.cjs +3 -3
- package/dist/svelte/index.d.mts +42 -0
- package/dist/svelte/index.d.ts +42 -0
- package/dist/svelte/index.mjs +3 -3
- package/dist/text/index.cjs +1 -1
- package/dist/text/index.d.mts +15 -0
- package/dist/text/index.d.ts +15 -0
- package/dist/text/index.mjs +1 -1
- package/dist/timeline/index.cjs +9 -9
- package/dist/timeline/index.d.mts +31 -0
- package/dist/timeline/index.d.ts +31 -0
- package/dist/timeline/index.mjs +9 -9
- package/dist/video/index.cjs +1 -1
- package/dist/video/index.d.mts +15 -0
- package/dist/video/index.d.ts +15 -0
- package/dist/video/index.mjs +1 -1
- package/dist/vue/index.cjs +3 -3
- package/dist/vue/index.d.mts +27 -0
- package/dist/vue/index.d.ts +27 -0
- package/dist/vue/index.mjs +3 -3
- package/dist/web-component/index.cjs +3 -3
- package/dist/web-component/index.mjs +3 -3
- package/package.json +40 -6
package/README.md
CHANGED
|
@@ -7,10 +7,14 @@
|
|
|
7
7
|
[](./LICENSE)
|
|
8
8
|
[](https://github.com/DhruvilChauahan0210/ink-scroll/stargazers)
|
|
9
9
|
|
|
10
|
-
>
|
|
10
|
+
> Draw SVG paths on scroll — plus reveal, pin, snap, parallax, counters, video scrub and text splitting. **10.2 KB gzipped for every API, from 1.6 KB if you import one.** Zero dependencies, MIT, and a native CSS fast path that runs with no per-frame JavaScript. Works in React, Next.js, Vue, Svelte, Solid, Angular, Astro, Nuxt and vanilla JS.
|
|
11
11
|
|
|
12
12
|
**[Live Demo](https://svg-scroll-draw.vercel.app)** · [npm](https://www.npmjs.com/package/svg-scroll-draw) · [Docs](https://svg-scroll-draw.vercel.app/docs) · [Examples](https://svg-scroll-draw.vercel.app/examples) · [Report a bug](https://github.com/DhruvilChauahan0210/ink-scroll/issues)
|
|
13
13
|
|
|
14
|
+
**Try it in your browser, no install:** [Vanilla JS on StackBlitz](https://stackblitz.com/github/DhruvilChauahan0210/ink-scroll/tree/main/examples/vanilla) · [React on StackBlitz](https://stackblitz.com/github/DhruvilChauahan0210/ink-scroll/tree/main/examples/react)
|
|
15
|
+
|
|
16
|
+

|
|
17
|
+
|
|
14
18
|
---
|
|
15
19
|
|
|
16
20
|
## What's in v2
|
|
@@ -22,7 +26,7 @@
|
|
|
22
26
|
| `scrollParallax` | `svg-scroll-draw` | Move any element at a different rate than scroll. Speed multiplier, reverse direction. |
|
|
23
27
|
| `scrollDraw` | `svg-scroll-draw` | The original — scroll-driven SVG path drawing via `stroke-dashoffset`. |
|
|
24
28
|
| `scrollVideo` | `svg-scroll-draw/video` | Tie `<video>.currentTime` to scroll. The Apple/Stripe product-page pattern. |
|
|
25
|
-
| `scrollText` | `svg-scroll-draw/text` | Split text into chars/words/lines and stagger-animate each on scroll.
|
|
29
|
+
| `scrollText` | `svg-scroll-draw/text` | Split text into chars/words/lines and stagger-animate each on scroll. 2.5 KB, nothing else to load. |
|
|
26
30
|
| `devtools` | `svg-scroll-draw/devtools` | Visual overlay showing every active animation's triggers and progress. Dev-only. |
|
|
27
31
|
|
|
28
32
|
All APIs return the same instance object: `{ destroy, replay, pause, resume, seek, getProgress }`.
|
|
@@ -218,7 +222,7 @@ import { ScrollVideo } from 'svg-scroll-draw/react';
|
|
|
218
222
|
|
|
219
223
|
## scrollText — text reveal on scroll
|
|
220
224
|
|
|
221
|
-
|
|
225
|
+
A 2.5 KB alternative to GSAP SplitText. SplitText is free and 3.6 KB, but it only splits — animating the pieces needs GSAP core (27.7 KB) on top.
|
|
222
226
|
|
|
223
227
|
```js
|
|
224
228
|
import { scrollText } from 'svg-scroll-draw/text';
|
|
@@ -448,13 +452,16 @@ devtools.highlight('#my-element'); // outline for 2 seconds
|
|
|
448
452
|
|
|
449
453
|
| Entry | Gzipped |
|
|
450
454
|
|---|---|
|
|
451
|
-
| `svg-scroll-draw` (main) |
|
|
452
|
-
| `svg-scroll-draw/react` |
|
|
453
|
-
| `svg-scroll-draw/
|
|
454
|
-
| `svg-scroll-draw/text` |
|
|
455
|
-
| `svg-scroll-draw/
|
|
455
|
+
| `svg-scroll-draw` (main, every core API) | 10.2 KB |
|
|
456
|
+
| `svg-scroll-draw/react` (includes the engine) | 11.2 KB |
|
|
457
|
+
| `svg-scroll-draw/reveal` | 4.5 KB |
|
|
458
|
+
| `svg-scroll-draw/text` | 2.5 KB |
|
|
459
|
+
| `svg-scroll-draw/video` | 2.0 KB |
|
|
460
|
+
| `svg-scroll-draw/snap` | 1.7 KB |
|
|
461
|
+
| `svg-scroll-draw/devtools` | 1.7 KB (dev only) |
|
|
462
|
+
| `svg-scroll-draw/pin` | 1.6 KB |
|
|
456
463
|
|
|
457
|
-
GSAP core + ScrollTrigger
|
|
464
|
+
Measured with `npm run size` (minified, gzip level 9). For comparison, GSAP 3.15.0 core + ScrollTrigger is 45.3 KB gzipped, and 47.5 KB with DrawSVG. GSAP does far more than scroll animation; for the scroll effects this library covers, that is the size difference.
|
|
458
465
|
|
|
459
466
|
---
|
|
460
467
|
|
|
@@ -491,7 +498,7 @@ Scaffolds a ready-to-use starter file for React, Vue, Svelte, Solid, or Vanilla
|
|
|
491
498
|
|
|
492
499
|
Chrome 80+, Safari 14+, Firefox 75+, Edge 80+
|
|
493
500
|
|
|
494
|
-
Native CSS `animation-timeline: view()` fast path: Chrome 115+, Safari
|
|
501
|
+
Native CSS `animation-timeline: view()` fast path: Chrome and Edge 115+, Safari 26+, Firefox 159+ (on by default since October 2026). Older browsers fall back to the JS engine automatically.
|
|
495
502
|
|
|
496
503
|
---
|
|
497
504
|
|
package/dist/angular/index.cjs
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
'use strict';function
|
|
2
|
-
<div style="position:absolute;${
|
|
3
|
-
<div style="position:absolute;${c?`left:${l}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${l}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",u,{passive:true}),u(),t}function Ye(e,r,n){let t=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),u=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,o=>{let f=parseFloat(o),l=t[u++]??f;return String(+(f+(l-f)*n).toFixed(4))})}function st(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:n,...t}=r,u=n?{...tt[n],...t}:t,o=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:f="path, polyline, line, polygon, rect, circle",speed:l=1,fade:c=false,easing:y="linear",trigger:C={},stagger:R=0,direction:E="forward",once:j=false,debug:ye=false,axis:z="y",scrollContainer:ee,autoReverse:U=false,delay:Z=0,strokeColor:S,strokeWidth:M,fillOpacity:P,waypoints:g,velocityScale:x=false,threshold:I=0,rootMargin:G="0px",repeat:k=0,repeatDelay:oe=0,morphTo:$,clip:_,autoplay:B=false,duration:X=1e3,native:V=true,onProgress:p,onStart:T,onComplete:b,onEnter:h,onLeave:q,onEnterBack:Se,onLeaveBack:xe}=u,be=_===true?"left":typeof _=="string"?_:false,we=typeof y=="function"?y:ae[y]??ae.linear,Le=le(C.start??"top bottom"),De=le(C.end??"bottom top"),te=typeof ee=="string"?document.querySelector(ee):ee??null,pe=Array.isArray(S)?S[0]:null,J=Array.isArray(S)?S[1]:typeof S=="string"?S:null,K=Array.isArray(M)?M[0]:null,i=Array.isArray(M)?M[1]:typeof M=="number"?M:null,d=Array.isArray(P)?P[0]:null,O=Array.isArray(P)?P[1]:typeof P=="number"?P:null;function re(s){let a=s*100;switch(be){case "right":return `inset(0 0 0 ${100-a}%)`;case "top":return `inset(0 0 ${100-a}% 0)`;case "bottom":return `inset(${100-a}% 0 0 0)`;case "center":return `circle(${s*150}% at 50% 50%)`;default:return `inset(0 ${100-a}% 0 0)`}}let L=be?[]:Array.from(e.querySelectorAll(f)),H=[],F=[],ie=0,ce=0,ne=false,de=false,se=0,He=false,ve=-1,Re=-1,ue=false,Ce=0,Te=0,Ae,Be=null,Me=new Set,ze=-1,Ue=performance.now(),Ie=NaN;function Ne(){return te?z==="x"?te.scrollLeft:te.scrollTop:z==="x"?window.scrollX:window.scrollY}function Ze(){return te?z==="x"?te.clientWidth:te.clientHeight:z==="x"?window.innerWidth:window.innerHeight}function Je(){let s=e.getBoundingClientRect(),a,v,Y;if(te){let fe=te.getBoundingClientRect();a=z==="x"?s.left-fe.left+te.scrollLeft:s.top-fe.top+te.scrollTop,v=z==="x"?s.width:s.height,Y=Ne();}else a=z==="x"?s.left:s.top,v=z==="x"?s.width:s.height,Y=Ne();let me=he({top:a,height:v},Y,Ze(),Le,De);ie=me.tStart,ce=me.tEnd,ye&&process.env.NODE_ENV!=="production"&&(Be?.remove(),Be=It(ie,ce,z));}function St(s,a){if(e.style.setProperty("--scroll-draw-progress",String(s)),be){let v=a==="reverse"?1-s:s;e.style.clipPath=re(v);return}L.forEach((v,Y)=>{v.style.strokeDashoffset=a==="reverse"?`${H[Y]*s}`:`${H[Y]*(1-s)}`,c&&(v.style.opacity=a==="reverse"?`${1-s}`:`${s}`),pe&&J?v.style.stroke=Fe(pe,J,s):J&&(v.style.stroke=J),K!==null&&i!==null?v.style.strokeWidth=`${K+(i-K)*s}`:i!==null&&(v.style.strokeWidth=`${i}`),d!==null&&O!==null?v.style.fillOpacity=`${d+(O-d)*s}`:O!==null&&(v.style.fillOpacity=`${O}`),$&&v.tagName.toLowerCase()==="path"&&F[Y]&&v.setAttribute("d",Ye(F[Y],$,s));});}function Ve(){if(e.style.setProperty("--scroll-draw-progress","0"),be){e.style.clipPath=re(0);return}L.forEach((s,a)=>{s.style.strokeDasharray=`${H[a]}`,s.style.strokeDashoffset=E==="reverse"?"0":`${H[a]}`,c?s.style.opacity=E==="reverse"?"1":"0":s.style.opacity="",pe&&(s.style.stroke=pe),K!==null&&(s.style.strokeWidth=`${K}`),d!==null&&(s.style.fillOpacity=`${d}`),$&&s.tagName.toLowerCase()==="path"&&F[a]&&s.setAttribute("d",F[a]);});}if(L.forEach(s=>{kt(s);let a=_e(s);H.push(a),s.tagName.toLowerCase()==="path"?F.push(s.getAttribute("d")??""):F.push(""),o?(s.style.strokeDasharray=`${a}`,s.style.strokeDashoffset=E==="reverse"?`${a}`:"0",c&&(s.style.opacity="1"),J&&(s.style.stroke=J),i!==null&&(s.style.strokeWidth=`${i}`),O!==null&&(s.style.fillOpacity=`${O}`),$&&s.tagName.toLowerCase()==="path"&&s.setAttribute("d",$)):(s.style.strokeDasharray=`${a}`,s.style.strokeDashoffset=E==="reverse"?"0":`${a}`,c?s.style.opacity=E==="reverse"?"1":"0":s.style.opacity="",pe&&(s.style.stroke=pe),K!==null&&(s.style.strokeWidth=`${K}`),d!==null&&(s.style.fillOpacity=`${d}`));}),be){if(o)return e.style.clipPath=re(1),b?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=re(0);}else if(o)return b?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function xt(){return !(V===false||!Ct()||!L.length||typeof y!="string"||!(y in nt)||be||z!=="y"||te||l!==1||R!==0||j||U||x!==false||$||g||k||Z>0||p||T||b||h||q||Se||xe||S!=null||M!=null||P!=null||(C.start??"top bottom").trim()!=="top bottom"||(C.end??"bottom top").trim()!=="bottom top")}function Tt(){let s=`svg-scroll-draw-${++Lt}`,a=E==="reverse"?"0":"var(--ssd-len)",v=E==="reverse"?"var(--ssd-len)":"0",Y=`stroke-dashoffset:${a};`,me=`stroke-dashoffset:${v};`;c&&(Y+=`opacity:${E==="reverse"?1:0};`,me+=`opacity:${E==="reverse"?0:1};`);let fe=document.createElement("style");fe.setAttribute("data-svg-scroll-draw",""),fe.textContent=`@keyframes ${s}{from{${Y}}to{${me}}}.${s}{animation-name:${s};animation-duration:auto;animation-timing-function:${nt[y]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(fe);function ge(m,A){m.style.setProperty("--ssd-len",String(H[A])),m.style.strokeDasharray=`${H[A]}`,m.style.strokeDashoffset="",m.style.opacity="",m.style.animationPlayState="",m.classList.add(s);}L.forEach(ge);let w=false,N=-1;function D(){if(N>=0)return N;let m=e.getBoundingClientRect(),{tStart:A,tEnd:W}=he({top:m.top,height:m.height},Ne(),Ze(),Le,De);return we(Q(Ne(),A,W,l))}return {destroy(){L.forEach(m=>{m.classList.remove(s),m.style.removeProperty("--ssd-len"),m.style.animationPlayState="";}),fe.remove();},replay(){w=false,N=-1,L.forEach(ge);},pause(){w=true,L.forEach(m=>{m.style.animationPlayState="paused";});},resume(){w&&(w=false,L.forEach(m=>{m.style.animationPlayState="running";}));},seek(m){let A=Math.min(1,Math.max(0,m));N=A,w=true,L.forEach((W,ke)=>{W.classList.remove(s),W.style.strokeDashoffset=E==="reverse"?`${H[ke]*A}`:`${H[ke]*(1-A)}`,c&&(W.style.opacity=E==="reverse"?`${1-A}`:`${A}`);});},getProgress(){return D()}}}if(xt())return Tt();function At(){let s=Math.max(1,X),a=0,v=0;function Y(D){let m=true;if(be){let A=Math.min(1,Math.max(0,D/s)),W=we(A);Ce=W,e.style.setProperty("--scroll-draw-progress",String(W)),e.style.clipPath=re(E==="reverse"?1-W:W),p?.(W),A<1&&(m=false);}else L.forEach((A,W)=>{let ke=W*R*s,Oe=Math.min(1,Math.max(0,(D-ke)/s)),Ee=we(Oe);A.style.strokeDashoffset=E==="reverse"?`${H[W]*Ee}`:`${H[W]*(1-Ee)}`,c&&(A.style.opacity=E==="reverse"?`${1-Ee}`:`${Ee}`),pe&&J?A.style.stroke=Fe(pe,J,Ee):J&&(A.style.stroke=J),K!==null&&i!==null?A.style.strokeWidth=`${K+(i-K)*Ee}`:i!==null&&(A.style.strokeWidth=`${i}`),d!==null&&O!==null?A.style.fillOpacity=`${d+(O-d)*Ee}`:O!==null&&(A.style.fillOpacity=`${O}`),$&&A.tagName.toLowerCase()==="path"&&F[W]&&A.setAttribute("d",Ye(F[W],$,Ee)),W===0&&(p?.(Ee),e.style.setProperty("--scroll-draw-progress",String(Ee))),Oe<1&&(m=false);});if(g){let A=Math.min(1,Math.max(0,D/s)),W=we(A);for(let ke in g){let Oe=parseFloat(ke);W>=Oe&&!Me.has(Oe)&&(Me.add(Oe),g[ke]?.());}}return m}function me(D){if(ue)return;let m=D-a;de||(de=true,T?.());let A=Y(m);if(A&&!ne){ne=true,Y(s*(1+Math.max(0,L.length-1)*R)),b?.(),Te<(k==="infinite"?1/0:k??0)&&(Te++,Ae=setTimeout(()=>{a=performance.now(),de=false,ne=false,Me.clear(),Ve(),se=requestAnimationFrame(me);},oe));return}A||(se=requestAnimationFrame(me));}function fe(){cancelAnimationFrame(se),clearTimeout(Ae),a=performance.now(),v=0,ue=false,de=false,ne=false,Te=0,Me.clear(),Ve(),se=requestAnimationFrame(me);}let ge=new IntersectionObserver(D=>{D.forEach(m=>{m.isIntersecting&&!(j&&ne)?fe():!m.isIntersecting&&!j&&!ne&&(cancelAnimationFrame(se),clearTimeout(Ae),a=null);});},{root:te??null,threshold:I,rootMargin:G}),w;function N(){clearTimeout(w),w=setTimeout(()=>{L.forEach((D,m)=>{H[m]=_e(D),D.style.strokeDasharray=`${H[m]}`;});},150);}return window.addEventListener("resize",N),window.addEventListener("orientationchange",N),Z>0?setTimeout(()=>ge.observe(e),Z):ge.observe(e),{destroy(){cancelAnimationFrame(se),clearTimeout(Ae),ge.disconnect(),window.removeEventListener("resize",N),window.removeEventListener("orientationchange",N),clearTimeout(w);},replay(){Te=0,fe();},pause(){ue||(ue=true,v=performance.now()-a,cancelAnimationFrame(se));},resume(){ue&&(ue=false,a=performance.now()-v,se=requestAnimationFrame(me));},seek(D){let m=Math.min(1,Math.max(0,D));Ce=m,ue=true,v=m*s,a=performance.now()-v,cancelAnimationFrame(se),Y(v);},getProgress(){return Ce}}}if(B)return At();Je();function qe(){if(!He||ue)return;let s=performance.now(),a=Ne(),v=l;if(x!==false){let w=s-Ue,N=w>0?Math.abs(a-(ze<0?a:ze))/w:0;v=l*Math.max(.2,1+N*(typeof x=="number"?x:1)*.04);}ze=a,Ue=s;let Y=U?Re===-1||a>=Re?"forward":"reverse":E;Re=a;let me=ce-ie,fe=true,ge=me===0?0:(a-ie)/me;if(isNaN(Ie)||(Ie<=0&&ge>0?h?.():Ie>0&&ge<=0&&xe?.(),Ie<1&&ge>=1?q?.():Ie>=1&&ge<1&&Se?.()),Ie=ge,be){let w=we(Q(a,ie,ce,v));j&&!U&&(ve=Math.max(ve,w),w=ve),Ce=w,e.style.setProperty("--scroll-draw-progress",String(w));let N=Y==="reverse"?1-w:w;e.style.clipPath=re(N),p?.(w),!de&&Q(a,ie,ce,v)>0&&(de=true,T?.()),w>=1&&!ne?(ne=true,b?.(),Te<(k==="infinite"?1/0:k??0)&&(Te++,Ae=setTimeout(()=>{ve=-1,de=false,ne=false,e.style.clipPath=re(0);},oe))):w<1&&!j&&(ne=false),se=requestAnimationFrame(qe);return}if(L.forEach((w,N)=>{let D=N*R*me,m=we(Q(a,ie+D,ce+D,v));j&&!U&&(ve=Math.max(ve,m),m=ve),Ce=m,w.style.strokeDashoffset=Y==="reverse"?`${H[N]*m}`:`${H[N]*(1-m)}`,c&&(w.style.opacity=Y==="reverse"?`${1-m}`:`${m}`),pe&&J?w.style.stroke=Fe(pe,J,m):J&&(w.style.stroke=J),K!==null&&i!==null?w.style.strokeWidth=`${K+(i-K)*m}`:i!==null&&(w.style.strokeWidth=`${i}`),d!==null&&O!==null?w.style.fillOpacity=`${d+(O-d)*m}`:O!==null&&(w.style.fillOpacity=`${O}`),$&&w.tagName.toLowerCase()==="path"&&F[N]&&w.setAttribute("d",Ye(F[N],$,m)),N===0&&(p?.(m),e.style.setProperty("--scroll-draw-progress",String(m))),m<1&&(fe=false);}),g){let w=we(Q(a,ie,ce,v));for(let N in g){let D=parseFloat(N);w>=D&&!Me.has(D)&&(Me.add(D),g[N]?.());}}!de&&Q(a,ie,ce,v)>0&&(de=true,T?.()),fe&&!ne?(ne=true,b?.(),Te<(k==="infinite"?1/0:k??0)&&(Te++,Ae=setTimeout(()=>{ve=-1,de=false,ne=false,Me.clear(),Ve();},oe))):!fe&&!j&&(ne=false),se=requestAnimationFrame(qe);}let Ge=new IntersectionObserver(s=>{s.forEach(a=>{He=a.isIntersecting,He&&!ue?se=requestAnimationFrame(qe):cancelAnimationFrame(se);});},{root:te??null,threshold:I,rootMargin:G}),Xe;function We(){clearTimeout(Xe),Xe=setTimeout(()=>{L.forEach((s,a)=>{H[a]=_e(s),s.style.strokeDasharray=`${H[a]}`;}),Je();},150);}return window.addEventListener("resize",We),window.addEventListener("orientationchange",We),Z>0?setTimeout(()=>Ge.observe(e),Z):Ge.observe(e),{destroy(){cancelAnimationFrame(se),clearTimeout(Ae),Ge.disconnect(),window.removeEventListener("resize",We),window.removeEventListener("orientationchange",We),clearTimeout(Xe),Be?.remove();},replay(){ve=-1,Re=-1,ze=-1,de=false,ne=false,Te=0,ue=false,Me.clear(),clearTimeout(Ae),Ve();},pause(){ue=true,cancelAnimationFrame(se);},resume(){ue&&(ue=false,He&&(se=requestAnimationFrame(qe)));},seek(s){let a=Math.min(1,Math.max(0,s));Ce=a,ve=a,ue=true,cancelAnimationFrame(se),St(a,E);},getProgress(){return Ce}}}var ot=new Map;function Pe(e,r){ot.set(e,r);}function $e(e){ot.delete(e);}function Ot(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function it(e){let r=[],n=/([\w]+)\(([^)]*)\)/g,t;for(;(t=n.exec(e))!==null;){let u=[],o=[],f=t[2].trim();if(f)for(let l of f.split(/[\s,]+/)){let c=l.match(/^([-+]?[\d.eE]+)(.*)$/);u.push(c?parseFloat(c[1]):0),o.push(c?c[2]:"");}r.push({fn:t[1],nums:u,units:o});}return r}function Ft(e,r,n){let t=it(e),u=it(r);return t.length===0||t.length!==u.length?n<1?e:r:t.map((o,f)=>{let l=u[f];return o.fn!==l.fn||o.nums.length!==l.nums.length?n<1?`${o.fn}(${o.nums.map((c,y)=>`${c}${o.units[y]}`).join(", ")})`:`${l.fn}(${l.nums.map((c,y)=>`${c}${l.units[y]}`).join(", ")})`:`${o.fn}(${o.nums.map((c,y)=>`${c+(l.nums[y]-c)*n}${o.units[y]}`).join(", ")})`}).join(" ")}function at(e,r,n){if(typeof e=="number"&&typeof r=="number")return String(e+(r-e)*n);let t=String(e),u=String(r);if(Ot(t))return Fe(t,u,n);if(t.includes("("))return Ft(t,u,n);let o=t.match(/^([-+]?[\d.]+)(.*)$/),f=u.match(/^([-+]?[\d.]+)(.*)$/);if(o&&f){let l=parseFloat(o[1]),c=parseFloat(f[1]);return `${l+(c-l)*n}${o[2]||f[2]}`}return n<1?t:u}function Nt(e){return e.replace(/([A-Z])/g,r=>`-${r.toLowerCase()}`)}var lt={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"]),Ht=0;function Rt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function ct(e,r){let n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return n;let{props:t,trigger:u={},easing:o="ease-out",speed:f=1,once:l=false,axis:c="y",scrollContainer:y,native:C=true,velocityScale:R=false,onProgress:E,onComplete:j,onEnter:ye,onLeave:z,onEnterBack:ee,onLeaveBack:U}=r,Z=window.matchMedia("(prefers-reduced-motion: reduce)").matches,S=typeof o=="function"?o:ae[o]??ae["ease-out"],M=le(u.start??"top bottom"),P=le(u.end??"bottom top"),g=typeof y=="string"?document.querySelector(y):y??null,x=Object.entries(t).map(([i,d])=>({prop:Nt(i),from:Array.isArray(d)?d[0]:"",to:Array.isArray(d)?d[1]:d}));function I(){let i=window.getComputedStyle(e);for(let d of x)d.from===""&&(d.from=i.getPropertyValue(d.prop).trim()||"0");}function G(){for(let i of x)e.style.setProperty(i.prop,String(i.to));}if(Z)return G(),j?.(),n;I();function k(){if(!C||!Rt()||typeof o!="string"||!(o in lt)||c!=="y"||g||l||f!==1||E||j||ye||z||ee||U||R!==false||(u.start??"top bottom").trim()!=="top bottom"||(u.end??"bottom top").trim()!=="bottom top")return false;for(let i of x)if(!Dt.has(i.prop))return false;return true}function oe(){let i=`ssd-a-${++Ht}`,d=x.map(F=>`${F.prop}:${F.from}`).join(";"),O=x.map(F=>`${F.prop}:${F.to}`).join(";"),re=document.createElement("style");re.setAttribute("data-ssd-animate",""),re.textContent=`@keyframes ${i}{from{${d}}to{${O}}}.${i}{animation-name:${i};animation-duration:auto;animation-timing-function:${lt[o]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(re),e.classList.add(i);let L=()=>c==="x"?window.scrollX:window.scrollY,H=()=>c==="x"?window.innerWidth:window.innerHeight;return {destroy(){e.classList.remove(i),re.remove();},replay(){e.classList.remove(i),e.offsetWidth,e.classList.add(i);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(F){let ie=Math.min(1,Math.max(0,F));e.classList.remove(i);for(let ce of x)e.style.setProperty(ce.prop,at(ce.from,ce.to,ie));},getProgress(){let F=e.getBoundingClientRect(),ie=L(),ce=H(),{tStart:ne,tEnd:de}=he({top:F.top,height:F.height},ie,ce,M,P);return S(Q(ie,ne,de,f))}}}if(k())return oe();let $=0,_=0,B=0,X=false,V=false,p=-1,T=0,b=false,h=NaN,q=-1,Se=0,xe=()=>g?c==="x"?g.scrollLeft:g.scrollTop:c==="x"?window.scrollX:window.scrollY,be=()=>g?c==="x"?g.clientWidth:g.clientHeight:c==="x"?window.innerWidth:window.innerHeight;function we(){let i=e.getBoundingClientRect(),d,O;if(g){let L=g.getBoundingClientRect();d=c==="x"?i.left-L.left+g.scrollLeft:i.top-L.top+g.scrollTop,O=c==="x"?i.width:i.height;}else d=c==="x"?i.left:i.top,O=c==="x"?i.width:i.height;let re=he({top:d,height:O},xe(),be(),M,P);$=re.tStart,_=re.tEnd;}function Le(i){e.style.setProperty("--scroll-draw-progress",String(i));for(let d of x)e.style.setProperty(d.prop,at(d.from,d.to,i));E?.(i);}function De(i){if(isNaN(h)){h=i;return}h<=0&&i>0?ye?.():h>0&&i<=0&&U?.(),h<1&&i>=1?z?.():h>=1&&i<1&&ee?.(),h=i;}function te(){if(!X||V)return;let i=performance.now(),d=xe(),O=f;if(R!==false){let H=i-Se,F=H>0?Math.abs(d-(q<0?d:q))/H:0;O=f*Math.max(.2,1+F*(typeof R=="number"?R:1)*.04);}q=d,Se=i;let re=_===$?0:(d-$)/(_-$);De(re);let L=S(Q(d,$,_,O));l&&(p=Math.max(p,L),L=p),T=L,Le(L),L>=1&&!b?(b=true,j?.()):L<1&&!l&&(b=false),B=requestAnimationFrame(te);}we();{let i=S(Q(xe(),$,_,f));l&&i>0&&(p=i),T=i,Le(i);}let pe=new IntersectionObserver(i=>{i.forEach(d=>{X=d.isIntersecting,X&&!V?B=requestAnimationFrame(te):cancelAnimationFrame(B);});},{root:g??null}),J;function K(){clearTimeout(J),J=setTimeout(we,150);}return window.addEventListener("resize",K),window.addEventListener("orientationchange",K),pe.observe(e),Pe(e,{type:"animate",getProgress:()=>T,getTrigger:()=>({tStart:$,tEnd:_})}),{destroy(){cancelAnimationFrame(B),pe.disconnect(),window.removeEventListener("resize",K),window.removeEventListener("orientationchange",K),clearTimeout(J),$e(e);},replay(){p=-1,b=false,T=0,V=false,Le(0);},pause(){V=true,cancelAnimationFrame(B);},resume(){V&&(V=false,X&&(B=requestAnimationFrame(te)));},seek(i){let d=Math.min(1,Math.max(0,i));T=d,p=d,V=true,cancelAnimationFrame(B),Le(d);},getProgress(){return T}}}var je={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function ut(e,r){if(typeof window>"u")return je;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),je;let t=n,{from:u=0,to:o,format:f,easing:l="ease-out",trigger:c={},once:y=true,decimals:C,onComplete:R}=r,E=C!==void 0?p=>p.toFixed(C):f??(p=>String(Math.round(p))),j=typeof l=="function"?l:ae[l]??ae["ease-out"],ye=le(c.start??"top 80%"),z=le(c.end??"top 20%");if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return t.textContent=E(o),R?.(),je;t.textContent=E(u);let U=0,Z=0,S=0,M=false,P=false,g=-1,x=0,I=false,G=()=>window.scrollY,k=()=>window.innerHeight;function oe(){let p=t.getBoundingClientRect(),T=he({top:p.top,height:p.height},G(),k(),ye,z);U=T.tStart,Z=T.tEnd;}function $(p){t.textContent=E(u+(o-u)*p),t.style.setProperty("--scroll-draw-progress",String(p));}function _(){if(!M||P)return;let p=j(Q(G(),U,Z,1));y&&(g=Math.max(g,p),p=g),x=p,$(p),p>=1&&!I?(I=true,R?.()):p<1&&!y&&(I=false),S=requestAnimationFrame(_);}oe();{let p=j(Q(G(),U,Z,1));y&&p>0&&(g=p),x=p,$(p);}let B=new IntersectionObserver(p=>{p.forEach(T=>{M=T.isIntersecting,M&&!P?S=requestAnimationFrame(_):cancelAnimationFrame(S);});}),X;function V(){clearTimeout(X),X=setTimeout(oe,150);}return window.addEventListener("resize",V),window.addEventListener("orientationchange",V),B.observe(t),Pe(t,{type:"counter",getProgress:()=>x,getTrigger:()=>({tStart:U,tEnd:Z})}),{destroy(){cancelAnimationFrame(S),B.disconnect(),window.removeEventListener("resize",V),window.removeEventListener("orientationchange",V),clearTimeout(X),$e(t);},replay(){g=-1,I=false,x=0,P=false,$(0);},pause(){P=true,cancelAnimationFrame(S);},resume(){P&&(P=false,M&&(S=requestAnimationFrame(_)));},seek(p){let T=Math.min(1,Math.max(0,p));x=T,g=T,P=true,cancelAnimationFrame(S),$(T);},getProgress(){return x}}}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||n.tagName.toLowerCase()!=="video")return process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] scrollVideo: <video> element not found:",e),mt;let t=n,{trigger:u={},easing:o="linear",once:f=false,axis:l="y",preload:c="auto",onReady:y,onComplete:C,onProgress:R}=r,E=window.matchMedia("(prefers-reduced-motion: reduce)").matches,j=typeof o=="function"?o:ae[o]??ae.linear,ye=le(u.start??"top top"),z=le(u.end??"bottom top");t.pause(),t.hasAttribute("preload")||(t.preload=c);let ee=r.from??0,U=r.to,Z=0,S=0,M=0,P=false,g=false,x=-1,I=0,G=false,k=false,oe=()=>l==="x"?window.scrollX:window.scrollY,$=()=>l==="x"?window.innerWidth:window.innerHeight;function _(){let h=t.getBoundingClientRect(),q=l==="x"?h.left:h.top,Se=l==="x"?h.width:h.height,xe=he({top:q,height:Se},oe(),$(),ye,z);Z=xe.tStart,S=xe.tEnd;}function B(h){if(!k)return;let q=U??t.duration??0;t.currentTime=ee+(q-ee)*h,t.style.setProperty("--scroll-draw-progress",String(h)),R?.(h);}function X(){if(!P||g||!k)return;let h=j(Q(oe(),Z,S,1));f&&(x=Math.max(x,h),h=x),I=h,B(h),h>=1&&!G?(G=true,C?.()):h<1&&!f&&(G=false),M=requestAnimationFrame(X);}function V(){if(k=true,U===void 0&&(U=t.duration),E){B(1),y?.();return}_(),y?.(),P&&!g&&(M=requestAnimationFrame(X));}t.readyState>=1?V():t.addEventListener("loadedmetadata",V,{once:true}),k||_();let p=new IntersectionObserver(h=>{h.forEach(q=>{P=q.isIntersecting,P&&!g&&k?M=requestAnimationFrame(X):cancelAnimationFrame(M);});}),T;function b(){clearTimeout(T),T=setTimeout(_,150);}return window.addEventListener("resize",b),window.addEventListener("orientationchange",b),p.observe(t),Pe(t,{type:"video",getProgress:()=>I,getTrigger:()=>({tStart:Z,tEnd:S})}),{destroy(){cancelAnimationFrame(M),p.disconnect(),t.removeEventListener("loadedmetadata",V),window.removeEventListener("resize",b),window.removeEventListener("orientationchange",b),clearTimeout(T),$e(t);},replay(){x=-1,G=false,I=0,g=false,B(0);},pause(){g=true,cancelAnimationFrame(M);},resume(){g&&(g=false,P&&k&&(M=requestAnimationFrame(X)));},seek(h){let q=Math.min(1,Math.max(0,h));I=q,x=q,g=true,cancelAnimationFrame(M),B(q);},getProgress(){return I}}}function gt(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 pt(e){let r=gt(e),n=new Map;for(let o of r){let f=o.offsetTop;n.has(f)||n.set(f,[]),n.get(f).push(o);}let t=[],u=Array.from(n.keys()).sort((o,f)=>o-f);for(let o of u){let f=n.get(o),l=document.createElement("span");l.setAttribute("aria-hidden","true"),l.style.display="inline-block";for(let c of f)l.appendChild(c);t.push(l);}e.textContent="";for(let o of t)e.appendChild(o),e.appendChild(document.createTextNode(" "));return t}function Vt(e,r,n,t){if(n<=1||t===0)return e;let u=(n-1)*t,o=r*t,f=o+(1-u);return f<=o?e>=o?1:0:Math.min(1,Math.max(0,(e-o)/(f-o)))}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 dt={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function ht(e,r={}){if(typeof window>"u")return dt;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),dt;let t=n,{split:u="words",stagger:o=.04,easing:f="ease-out",from:l={opacity:0,y:24},trigger:c={},once:y=true,onComplete:C}=r,R=window.matchMedia("(prefers-reduced-motion: reduce)").matches,E=typeof f=="function"?f:ae[f]??ae["ease-out"],j=le(c.start??"top 85%"),ye=le(c.end??"top 40%"),z=t.innerHTML;t.setAttribute("aria-label",t.textContent??"");let ee;u==="chars"?ee=zt(t):u==="lines"?ee=pt(t):ee=gt(t);let U=ee.length;function Z(b,h){l?.opacity!==void 0&&(b.style.opacity=String(l.opacity+(1-l.opacity)*h));let q=qt(h,l);q&&(b.style.transform=q);}function S(b){t.style.setProperty("--scroll-draw-progress",String(b)),ee.forEach((h,q)=>{let Se=E(Vt(b,q,U,o));Z(h,Se);});}if(R)return S(1),C?.(),{destroy(){t.innerHTML=z,t.removeAttribute("aria-label");},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};S(0);let M=0,P=0,g=0,x=false,I=false,G=-1,k=0,oe=false,$=()=>window.scrollY,_=()=>window.innerHeight;function B(){let b=t.getBoundingClientRect(),h=he({top:b.top,height:b.height},$(),_(),j,ye);M=h.tStart,P=h.tEnd;}function X(){if(!x||I)return;let b=Q($(),M,P,1);y&&(G=Math.max(G,b),b=G),k=b,S(b),b>=1&&!oe?(oe=true,C?.()):b<1&&!y&&(oe=false),g=requestAnimationFrame(X);}B();let V=new IntersectionObserver(b=>{b.forEach(h=>{x=h.isIntersecting,x&&!I?g=requestAnimationFrame(X):cancelAnimationFrame(g);});}),p;function T(){clearTimeout(p),p=setTimeout(()=>{if(u==="lines"){let b=k;t.innerHTML=z,t.setAttribute("aria-label",t.textContent??""),ee=pt(t),S(b);}B();},150);}return window.addEventListener("resize",T),window.addEventListener("orientationchange",T),V.observe(t),Pe(t,{type:"text",getProgress:()=>k,getTrigger:()=>({tStart:M,tEnd:P})}),{destroy(){cancelAnimationFrame(g),V.disconnect(),window.removeEventListener("resize",T),window.removeEventListener("orientationchange",T),clearTimeout(p),t.innerHTML=z,t.removeAttribute("aria-label"),$e(t);},replay(){G=-1,oe=false,k=0,I=false,S(0);},pause(){I=true,cancelAnimationFrame(g);},resume(){I&&(I=false,x&&(g=requestAnimationFrame(X)));},seek(b){let h=Math.min(1,Math.max(0,b));k=h,G=h,I=true,cancelAnimationFrame(g),S(h);},getProgress(){return k}}}var yt=class{constructor(){this.instance=null;}init(r,n={}){return this.destroy(),this.instance=st(r,n),this}replay(){return this.instance?.replay(),this}pause(){return this.instance?.pause(),this}resume(){return this.instance?.resume(),this}seek(r){return this.instance?.seek(r),this}getProgress(){return this.instance?.getProgress()??0}destroy(){return this.instance?.destroy(),this.instance=null,this}},bt=class{constructor(){this.instance=null;}init(r,n){return this.destroy(),this.instance=ct(r,n),this}replay(){return this.instance?.replay(),this}pause(){return this.instance?.pause(),this}resume(){return this.instance?.resume(),this}seek(r){return this.instance?.seek(r),this}getProgress(){return this.instance?.getProgress()??0}destroy(){return this.instance?.destroy(),this.instance=null,this}},wt=class{constructor(){this.instance=null;}init(r,n){return this.destroy(),this.instance=ut(r,n),this}replay(){return this.instance?.replay(),this}pause(){return this.instance?.pause(),this}resume(){return this.instance?.resume(),this}seek(r){return this.instance?.seek(r),this}getProgress(){return this.instance?.getProgress()??0}destroy(){return this.instance?.destroy(),this.instance=null,this}},vt=class{constructor(){this.instance=null;}init(r,n={}){return this.destroy(),this.instance=ft(r,n),this}replay(){return this.instance?.replay(),this}pause(){return this.instance?.pause(),this}resume(){return this.instance?.resume(),this}seek(r){return this.instance?.seek(r),this}getProgress(){return this.instance?.getProgress()??0}destroy(){return this.instance?.destroy(),this.instance=null,this}},Et=class{constructor(){this.instance=null;}init(r,n={}){return this.destroy(),this.instance=ht(r,n),this}replay(){return this.instance?.replay(),this}pause(){return this.instance?.pause(),this}resume(){return this.instance?.resume(),this}seek(r){return this.instance?.seek(r),this}getProgress(){return this.instance?.getProgress()??0}destroy(){return this.instance?.destroy(),this.instance=null,this}};exports.ScrollAnimateRef=bt;exports.ScrollCounterRef=wt;exports.ScrollDrawRef=yt;exports.ScrollTextRef=Et;exports.ScrollVideoRef=vt;
|
|
1
|
+
'use strict';function Bt({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,c=[];for(let d=0;d<n;d++){let x=Math.pow(l,d);c.push(x),o+=x;}let u=[0],m=0;for(let d=0;d<n;d++)m+=c[d]/o,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 Gt({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 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:Bt(),elastic:Gt()};function fe(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 dt(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 gt(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 _e(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 jt(e,r,n){return Math.min(n,Math.max(r,e))}function Q(e,r,n,t){return n===r?0:jt((e-r)/(n-r)*t,0,1)}function Qe(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 o=dt(e.top,e.height,r,t.element)-gt(t.viewport,n),c=dt(e.top,e.height,r,l.element)-gt(l.viewport,n);return {tStart:o,tEnd:c}}function ht(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 Ve(e,r,n){let t=ht(e),l=ht(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 yt={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 Ze=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function be(e,...r){Ze&&console.warn(`[svg-scroll-draw] ${e}`,...r);}var Yt="cubic-bezier(0.333333, 0, 0.666667, 0.333333)",Ut="cubic-bezier(0.333333, 0.666667, 0.666667, 1)",bt=33;function Xt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timing-function: linear(0, 1)")}function Qt(e){let r=[];for(let n=0;n<bt;n++){let t=n/(bt-1);r.push(String(Math.round(e(t)*1e5)/1e5));}return `linear(${r.join(",")})`}function Ke(e){switch(e){case "linear":return "linear";case "ease-in":return Yt;case "ease-out":return Ut;case "ease-in-out":return Xt()?Qt(ee["ease-in-out"]):null;default:return null}}var wt=Symbol.for("svg-scroll-draw.registry");function vt(){let e=globalThis;return e[wt]||(e[wt]=new Map)}function Le(e,r){vt().set(e,r);}function Pe(e){vt().delete(e);}var Zt=0;function Kt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")&&CSS.supports("view-timeline-name: --x")}function Jt(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?be("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&be("Element has a fill \u2014 it may obscure the stroke animation.",e);}function er(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 o=n==="x"?window.scrollX:window.scrollY,c=e-o,u=r-o,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 Et=/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,St=/[MmLlHhVvCcSsQqTtAaZz]/g;function tr(e,r,n){if(!Ze)return;let t=(e.match(St)??[]).join("").toUpperCase(),l=(r.match(St)??[]).join("").toUpperCase(),o=(e.match(Et)??[]).length,c=(r.match(Et)??[]).length;if(t!==l){be(`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}o!==c&&be(`morphTo: coordinate count differs (${o} \u2192 ${c}). Extra coordinates are ignored and missing ones hold their start value, so the result will not reach the target shape.`,n);}function st(e,r,n){let t=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),l=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,o=>{let c=parseFloat(o),u=t[l++]??c;return String(+(c+(u-c)*n).toFixed(4))})}function Tt(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:n,...t}=r,l=n?{...yt[n],...t}:t,o=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:$e=false,axis:W="y",scrollContainer:Z,autoReverse:U=false,delay:B=0,strokeColor:A,strokeWidth:P,fillOpacity:M,waypoints:v,velocityScale:k=false,threshold:I=0,rootMargin:$="0px",repeat:S=0,repeatDelay:re=0,morphTo:O,clip:ne,autoplay:se=false,duration:K=1e3,native:ce=true,onProgress:h,onStart:T,onComplete:g,onEnter:p,onLeave:F,onEnterBack:pe,onLeaveBack:Ee}=l,ue=ne===true?"left":typeof ne=="string"?ne:false,Se=typeof d=="function"?d:ee[d]??ee.linear,Ce=fe(x.start??"top bottom"),Ne=fe(x.end??"bottom top"),we=typeof Z=="string"?document.querySelector(Z):Z??null,ve=Array.isArray(A)?A[0]:null,oe=Array.isArray(A)?A[1]:typeof A=="string"?A:null,ie=Array.isArray(P)?P[0]:null,G=Array.isArray(P)?P[1]:typeof P=="number"?P:null,me=Array.isArray(M)?M[0]:null,X=Array.isArray(M)?M[1]:typeof M=="number"?M:null;function ke(s){let a=s*100;switch(ue){case "right":return `inset(0 0 0 ${100-a}%)`;case "top":return `inset(0 0 ${100-a}% 0)`;case "bottom":return `inset(${100-a}% 0 0 0)`;case "center":return `circle(${s*150}% at 50% 50%)`;default:return `inset(0 ${100-a}% 0 0)`}}let z=ue?[]:Array.from(e.querySelectorAll(c)),C=[],i=[],f=0,de=0,R=false,_=false,V=0,Ae=false,ge=-1,J=-1,j=false,he=0,Oe=0,Fe,Je=null;function it(){Je?.destroy(),Je=null;}let Re=new Set,at=NaN,He=true,Be=-1,lt=performance.now(),ze=NaN;function et(){return we?W==="x"?we.scrollLeft:we.scrollTop:W==="x"?window.scrollX:window.scrollY}function ct(){return we?W==="x"?we.clientWidth:we.clientHeight:W==="x"?window.innerWidth:window.innerHeight}function ut(){let s=Qe(e,we,W);return xe(s,s.scroll,ct(),Ce,Ne)}function mt(){(({tStart:f,tEnd:de}=ut())),$e&&Ze&&(it(),Je=er(f,de,W));}function tt(s,a=ut){Le(e,{type:"draw",getProgress:()=>s.getProgress(),getTrigger:a});let w=s.destroy;return s.destroy=()=>{w.call(s),Pe(e);},s}function _t(s,a){if(e.style.setProperty("--scroll-draw-progress",String(s)),ue){let w=a==="reverse"?1-s:s;e.style.clipPath=ke(w);return}z.forEach((w,ae)=>{w.style.strokeDashoffset=a==="reverse"?`${C[ae]*s}`:`${C[ae]*(1-s)}`,m&&(w.style.opacity=a==="reverse"?`${1-s}`:`${s}`),ve&&oe?w.style.stroke=Ve(ve,oe,s):oe&&(w.style.stroke=oe),ie!==null&&G!==null?w.style.strokeWidth=`${ie+(G-ie)*s}`:G!==null&&(w.style.strokeWidth=`${G}`),me!==null&&X!==null?w.style.fillOpacity=`${me+(X-me)*s}`:X!==null&&(w.style.fillOpacity=`${X}`),O&&w.tagName.toLowerCase()==="path"&&i[ae]&&w.setAttribute("d",st(i[ae],O,s));});}function Ge(){if(e.style.setProperty("--scroll-draw-progress","0"),ue){e.style.clipPath=ke(0);return}z.forEach((s,a)=>{s.style.strokeDasharray=`${C[a]}`,s.style.strokeDashoffset=L==="reverse"?"0":`${C[a]}`,m?s.style.opacity=L==="reverse"?"1":"0":s.style.opacity="",ve&&(s.style.stroke=ve),ie!==null&&(s.style.strokeWidth=`${ie}`),me!==null&&(s.style.fillOpacity=`${me}`),O&&s.tagName.toLowerCase()==="path"&&i[a]&&s.setAttribute("d",i[a]);});}if(z.forEach(s=>{Jt(s);let a=_e(s);C.push(a);let w=s.tagName.toLowerCase()==="path";w?i.push(s.getAttribute("d")??""):i.push(""),O&&(w?tr(i[i.length-1],O,s):be(`morphTo only applies to <path> elements \u2014 ignored on <${s.tagName}>.`,s)),o?(s.style.strokeDasharray=`${a}`,s.style.strokeDashoffset=L==="reverse"?`${a}`:"0",m&&(s.style.opacity="1"),oe&&(s.style.stroke=oe),G!==null&&(s.style.strokeWidth=`${G}`),X!==null&&(s.style.fillOpacity=`${X}`),O&&s.tagName.toLowerCase()==="path"&&s.setAttribute("d",O)):(s.style.strokeDasharray=`${a}`,s.style.strokeDashoffset=L==="reverse"?"0":`${a}`,m?s.style.opacity=L==="reverse"?"1":"0":s.style.opacity="",ve&&(s.style.stroke=ve),ie!==null&&(s.style.strokeWidth=`${ie}`),me!==null&&(s.style.fillOpacity=`${me}`));}),ue){if(o)return e.style.clipPath=ke(1),g?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=ke(0);}else if(o)return g?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};let ft=typeof d=="string"?Ke(d):null;function Vt(){return !(ce===false||!Kt()||!z.length||!ft||ue||W!=="y"||we||u!==1||N!==0||te||U||k!==false||O||v||S||B>0||h||T||g||p||F||pe||Ee||A!=null||P!=null||M!=null||(x.start??"top bottom").trim()!=="top bottom"||(x.end??"bottom top").trim()!=="bottom top")}function qt(){let s=++Zt,a=`svg-scroll-draw-${s}`,w=`svg-scroll-draw-host-${s}`,ae=`--svg-scroll-draw-${s}`,De=L==="reverse"?"0":"var(--ssd-len)",Ie=L==="reverse"?"var(--ssd-len)":"0",Me=`stroke-dashoffset:${De};`,E=`stroke-dashoffset:${Ie};`;m&&(Me+=`opacity:${L==="reverse"?1:0};`,E+=`opacity:${L==="reverse"?0:1};`);let D=document.createElement("style");D.setAttribute("data-svg-scroll-draw",""),D.textContent=`@keyframes ${a}{from{${Me}}to{${E}}}.${w}{view-timeline-name:${ae};view-timeline-axis:block;}.${a}{animation-name:${a};animation-duration:auto;animation-timing-function:${ft};animation-fill-mode:both;animation-timeline:${ae};animation-range:cover 0% cover 100%;}`,document.head.appendChild(D),e.classList.add(w);function le(y,Y){y.style.setProperty("--ssd-len",String(C[Y])),y.style.strokeDasharray=`${C[Y]}`,y.style.strokeDashoffset="",y.style.opacity="",y.style.animationPlayState="",y.classList.add(a);}z.forEach(le);let b=false,H=-1;function q(){if(H>=0)return H;let y=e.getBoundingClientRect(),{tStart:Y,tEnd:Te}=xe({top:y.top,height:y.height},et(),ct(),Ce,Ne);return Se(Q(et(),Y,Te,u))}return {destroy(){e.classList.remove(w),z.forEach(y=>{y.classList.remove(a),y.style.removeProperty("--ssd-len"),y.style.animationPlayState="";}),D.remove();},replay(){b=false,H=-1,z.forEach(le);},pause(){b=true,z.forEach(y=>{y.style.animationPlayState="paused";});},resume(){b&&(b=false,z.forEach(y=>{y.style.animationPlayState="running";}));},seek(y){let Y=Math.min(1,Math.max(0,y));H=Y,b=true,z.forEach((Te,ye)=>{Te.classList.remove(a),Te.style.strokeDashoffset=L==="reverse"?`${C[ye]*Y}`:`${C[ye]*(1-Y)}`,m&&(Te.style.opacity=L==="reverse"?`${1-Y}`:`${Y}`);});},getProgress(){return q()},refresh(){z.forEach((y,Y)=>{C[Y]=_e(y),y.style.setProperty("--ssd-len",String(C[Y])),y.style.strokeDasharray=`${C[Y]}`;});}}}if(Vt())return tt(qt());function Wt(){let s=Math.max(1,K),a=0,w=0,ae=false;function De(b){let H=true;if(ue){let q=Math.min(1,Math.max(0,b/s)),y=Se(q);he=y,e.style.setProperty("--scroll-draw-progress",String(y)),e.style.clipPath=ke(L==="reverse"?1-y:y),h?.(y),q<1&&(H=false);}else z.forEach((q,y)=>{let Y=y*N*s,Te=Math.min(1,Math.max(0,(b-Y)/s)),ye=Se(Te);q.style.strokeDashoffset=L==="reverse"?`${C[y]*ye}`:`${C[y]*(1-ye)}`,m&&(q.style.opacity=L==="reverse"?`${1-ye}`:`${ye}`),ve&&oe?q.style.stroke=Ve(ve,oe,ye):oe&&(q.style.stroke=oe),ie!==null&&G!==null?q.style.strokeWidth=`${ie+(G-ie)*ye}`:G!==null&&(q.style.strokeWidth=`${G}`),me!==null&&X!==null?q.style.fillOpacity=`${me+(X-me)*ye}`:X!==null&&(q.style.fillOpacity=`${X}`),O&&q.tagName.toLowerCase()==="path"&&i[y]&&q.setAttribute("d",st(i[y],O,ye)),y===0&&(he=ye,h?.(ye),e.style.setProperty("--scroll-draw-progress",String(ye))),Te<1&&(H=false);});if(v){let q=Math.min(1,Math.max(0,b/s)),y=Se(q);for(let Y in v){let Te=parseFloat(Y);y>=Te&&!Re.has(Te)&&(Re.add(Te),v[Y]?.());}}return H}function Ie(b){if(j)return;let H=b-a;_||(_=true,T?.());let q=De(H);if(q&&!R){R=true,De(s*(1+Math.max(0,z.length-1)*N)),g?.(),Oe<(S==="infinite"?1/0:S??0)&&(Oe++,Fe=setTimeout(()=>{a=performance.now(),_=false,R=false,Re.clear(),Ge(),V=requestAnimationFrame(Ie);},re));return}q||(V=requestAnimationFrame(Ie));}function Me(){cancelAnimationFrame(V),clearTimeout(Fe),a=performance.now(),w=0,j=false,_=false,R=false,Oe=0,ae=true,he=0,Re.clear(),Ge(),V=requestAnimationFrame(Ie);}let E=new IntersectionObserver(b=>{b.forEach(H=>{H.isIntersecting&&!(te&&R)?Me():!H.isIntersecting&&!te&&!R&&(cancelAnimationFrame(V),clearTimeout(Fe),ae=false);});},{root:we??null,threshold:I,rootMargin:$}),D;function le(){clearTimeout(D),D=setTimeout(()=>{z.forEach((b,H)=>{C[H]=_e(b),b.style.strokeDasharray=`${C[H]}`;});},150);}return window.addEventListener("resize",le),window.addEventListener("orientationchange",le),B>0?setTimeout(()=>E.observe(e),B):E.observe(e),{destroy(){cancelAnimationFrame(V),clearTimeout(Fe),E.disconnect(),window.removeEventListener("resize",le),window.removeEventListener("orientationchange",le),clearTimeout(D);},replay(){Oe=0,Me();},pause(){j||!ae||(j=true,w=performance.now()-a,cancelAnimationFrame(V));},resume(){j&&(j=false,ae=true,a=performance.now()-w,V=requestAnimationFrame(Ie));},seek(b){let H=Math.min(1,Math.max(0,b));he=H,j=true,w=H*s,a=performance.now()-w,cancelAnimationFrame(V),De(w);},getProgress(){return he},refresh(){clearTimeout(D),z.forEach((b,H)=>{C[H]=_e(b),b.style.strokeDasharray=`${C[H]}`;});}}}if(se)return tt(Wt());mt();function je(){if(!Ae||j)return;let s=performance.now(),a=et();if(!He&&k===false&&a===at){V=requestAnimationFrame(je);return}He=false,at=a;let w=u;if(k!==false){let E=s-lt,D=E>0?Math.abs(a-(Be<0?a:Be))/E:0;w=u*Math.max(.2,1+D*(typeof k=="number"?k:1)*.04);}Be=a,lt=s;let ae=U?J===-1||a>=J?"forward":"reverse":L;J=a;let De=de-f,Ie=true,Me=De===0?0:(a-f)/De;if(isNaN(ze)||(ze<=0&&Me>0?p?.():ze>0&&Me<=0&&Ee?.(),ze<1&&Me>=1?F?.():ze>=1&&Me<1&&pe?.()),ze=Me,ue){let E=Se(Q(a,f,de,w));te&&!U&&(ge=Math.max(ge,E),E=ge),he=E,e.style.setProperty("--scroll-draw-progress",String(E));let D=ae==="reverse"?1-E:E;e.style.clipPath=ke(D),h?.(E),!_&&Q(a,f,de,w)>0&&(_=true,T?.()),E>=1&&!R?(R=true,g?.(),Oe<(S==="infinite"?1/0:S??0)&&(Oe++,Fe=setTimeout(()=>{ge=-1,_=false,R=false,e.style.clipPath=ke(0);},re))):E<1&&!te&&(R=false),V=requestAnimationFrame(je);return}if(z.forEach((E,D)=>{let le=D*N*De,b=Se(Q(a,f+le,de+le,w));te&&!U&&(ge=Math.max(ge,b),b=ge),he=b,E.style.strokeDashoffset=ae==="reverse"?`${C[D]*b}`:`${C[D]*(1-b)}`,m&&(E.style.opacity=ae==="reverse"?`${1-b}`:`${b}`),ve&&oe?E.style.stroke=Ve(ve,oe,b):oe&&(E.style.stroke=oe),ie!==null&&G!==null?E.style.strokeWidth=`${ie+(G-ie)*b}`:G!==null&&(E.style.strokeWidth=`${G}`),me!==null&&X!==null?E.style.fillOpacity=`${me+(X-me)*b}`:X!==null&&(E.style.fillOpacity=`${X}`),O&&E.tagName.toLowerCase()==="path"&&i[D]&&E.setAttribute("d",st(i[D],O,b)),D===0&&(h?.(b),e.style.setProperty("--scroll-draw-progress",String(b))),b<1&&(Ie=false);}),v){let E=Se(Q(a,f,de,w));for(let D in v){let le=parseFloat(D);E>=le&&!Re.has(le)&&(Re.add(le),v[D]?.());}}!_&&Q(a,f,de,w)>0&&(_=true,T?.()),Ie&&!R?(R=true,g?.(),Oe<(S==="infinite"?1/0:S??0)&&(Oe++,Fe=setTimeout(()=>{ge=-1,_=false,R=false,Re.clear(),Ge(),He=true;},re))):!Ie&&!te&&(R=false),V=requestAnimationFrame(je);}let rt=false;function Ye(){rt||(rt=true,V=requestAnimationFrame(function(){je();}));}function Ue(){rt=false,cancelAnimationFrame(V);}let nt=new IntersectionObserver(s=>{s.forEach(a=>{Ae=a.isIntersecting,Ae&&!j?(He=true,Ye()):Ue();});},{root:we??null,threshold:I,rootMargin:$});function pt(){z.forEach((s,a)=>{C[a]=_e(s),s.style.strokeDasharray=`${C[a]}`;}),mt(),He=true;}let Xe;function qe(){clearTimeout(Xe),Xe=setTimeout(pt,150);}window.addEventListener("resize",qe),window.addEventListener("orientationchange",qe);let We;return typeof ResizeObserver<"u"&&(We=new ResizeObserver(()=>qe()),We.observe(document.body),We.observe(document.documentElement),We.observe(e)),B>0?setTimeout(()=>nt.observe(e),B):nt.observe(e),tt({destroy(){cancelAnimationFrame(V),clearTimeout(Fe),Ue(),nt.disconnect(),We?.disconnect(),window.removeEventListener("resize",qe),window.removeEventListener("orientationchange",qe),clearTimeout(Xe),it();},replay(){ge=-1,J=-1,Be=-1,_=false,R=false,Oe=0,j=false,he=0,Re.clear(),clearTimeout(Fe),Ge(),He=true,Ae&&Ye();},pause(){j=true,Ue();},resume(){j&&(j=false,He=true,Ae&&Ye());},seek(s){let a=Math.min(1,Math.max(0,s));he=a,ge=a,j=true,Ue(),_t(a,L),He=true;},getProgress(){return he},refresh(){clearTimeout(Xe),pt(),Ae&&!j&&Ye();}},()=>({tStart:f,tEnd:de}))}function rr(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function xt(e){let r=[],n=/([\w]+)\(([^)]*)\)/g,t;for(;(t=n.exec(e))!==null;){let l=[],o=[],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),o.push(m?m[2]:"");}r.push({fn:t[1],nums:l,units:o});}return r}function nr(e,r,n){let t=xt(e),l=xt(r);return t.length===0||t.length!==l.length?n<1?e:r:t.map((o,c)=>{let u=l[c];return o.fn!==u.fn||o.nums.length!==u.nums.length?n<1?`${o.fn}(${o.nums.map((m,d)=>`${m}${o.units[d]}`).join(", ")})`:`${u.fn}(${u.nums.map((m,d)=>`${m}${u.units[d]}`).join(", ")})`:`${o.fn}(${o.nums.map((m,d)=>`${m+(u.nums[d]-m)*n}${o.units[d]}`).join(", ")})`}).join(" ")}function At(e,r,n){if(typeof e=="number"&&typeof r=="number")return String(e+(r-e)*n);let t=String(e),l=String(r);if(rr(t))return Ve(t,l,n);if(t.includes("("))return nr(t,l,n);let o=t.match(/^([-+]?[\d.]+)(.*)$/),c=l.match(/^([-+]?[\d.]+)(.*)$/);if(o&&c){let u=parseFloat(o[1]),m=parseFloat(c[1]);return `${u+(m-u)*n}${o[2]||c[2]}`}return n<1?t:l}function sr(e){return e.replace(/([A-Z])/g,r=>`-${r.toLowerCase()}`)}var or=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),ir=0,Mt="--scroll-draw-progress";function ar(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function Lt(e,r){let n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return n;let{props:t,trigger:l={},easing:o="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:$e,onComplete:W,onEnter:Z,onLeave:U,onEnterBack:B,onLeaveBack:A}=r,P=L&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,M=typeof o=="function"?o:ee[o]??ee["ease-out"],v=fe(l.start??"top bottom"),k=fe(l.end??"bottom top"),I=te??e,$=typeof d=="string"?document.querySelector(d):d??null,S=Object.entries(t).map(([i,f])=>({prop:sr(i),from:Array.isArray(f)?f[0]:"",to:Array.isArray(f)?f[1]:f}));function re(){let i=window.getComputedStyle(e);for(let f of S)f.from===""&&(f.from=i.getPropertyValue(f.prop).trim()||"0");}function O(){for(let i of S)e.style.setProperty(i.prop,String(i.to));}let ne=new Map;for(let i of [...S.map(f=>f.prop),Mt])ne.set(i,e.style.getPropertyValue(i));function se(){for(let[i,f]of ne)f?e.style.setProperty(i,f):e.style.removeProperty(i);}if(P)return O(),W?.(),{...n,destroy:se,getProgress:()=>1};re();let K=typeof o=="string"?Ke(o):null;function ce(){if(!x||!ar()||!K||m!=="y"||$||I!==e||u||c!==1||$e||W||Z||U||B||A||N!==false||(l.start??"top bottom").trim()!=="top bottom"||(l.end??"bottom top").trim()!=="bottom top")return false;for(let i of S)if(!or.has(i.prop))return false;return true}function h(){let i=`ssd-a-${++ir}`,f=S.map(J=>`${J.prop}:${J.from}`).join(";"),de=S.map(J=>`${J.prop}:${J.to}`).join(";"),R=document.createElement("style");R.setAttribute("data-ssd-animate",""),R.textContent=`@keyframes ${i}{from{${f}}to{${de}}}.${i}{animation-name:${i};animation-duration:auto;animation-timing-function:${K};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(R),e.classList.add(i);let _=()=>m==="x"?window.scrollX:window.scrollY,V=()=>m==="x"?window.innerWidth:window.innerHeight,Ae=()=>{let J=e.getBoundingClientRect();return xe({top:J.top,height:J.height},_(),V(),v,k)};Le(e,{type:"animate",getProgress:()=>ge.getProgress(),getTrigger:Ae});let ge={destroy(){e.classList.remove(i),R.remove(),e.style.animationPlayState="",se(),Pe(e);},replay(){e.classList.remove(i),e.offsetWidth,e.classList.add(i);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(J){let j=Math.min(1,Math.max(0,J));e.classList.remove(i);for(let he of S)e.style.setProperty(he.prop,At(he.from,he.to,j));},getProgress(){let{tStart:J,tEnd:j}=Ae();return M(Q(_(),J,j,c))}};return ge}if(ce())return h();let T=0,g=0,p=0,F=false,pe=false,Ee=-1,ue=0,Se=false,Ce=NaN,Ne=-1,we=0,ve=()=>$?m==="x"?$.scrollLeft:$.scrollTop:m==="x"?window.scrollX:window.scrollY,oe=()=>$?m==="x"?$.clientWidth:$.clientHeight:m==="x"?window.innerWidth:window.innerHeight;function ie(){let i=Qe(I,$,m),f=xe(i,i.scroll,oe(),v,k);T=f.tStart,g=f.tEnd;}function G(i){e.style.setProperty(Mt,String(i));for(let f of S)e.style.setProperty(f.prop,At(f.from,f.to,i));$e?.(i);}function me(i){if(isNaN(Ce)){Ce=i;return}Ce<=0&&i>0?Z?.():Ce>0&&i<=0&&A?.(),Ce<1&&i>=1?U?.():Ce>=1&&i<1&&B?.(),Ce=i;}function X(){if(!F||pe)return;let i=performance.now(),f=ve(),de=c;if(N!==false){let V=i-we,Ae=V>0?Math.abs(f-(Ne<0?f:Ne))/V:0;de=c*Math.max(.2,1+Ae*(typeof N=="number"?N:1)*.04);}Ne=f,we=i;let R=g===T?0:(f-T)/(g-T);me(R);let _=M(Q(f,T,g,de));u&&(Ee=Math.max(Ee,_),_=Ee),ue=_,G(_),_>=1&&!Se?(Se=true,W?.()):_<1&&!u&&(Se=false),p=requestAnimationFrame(X);}ie(),g===T&&be("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(ve(),T,g,c));u&&i>0&&(Ee=i),ue=i,G(i);}let ke=new IntersectionObserver(i=>{i.forEach(f=>{F=f.isIntersecting,F&&!pe?p=requestAnimationFrame(X):cancelAnimationFrame(p);});},{root:$??null}),z;function C(){clearTimeout(z),z=setTimeout(ie,150);}return window.addEventListener("resize",C),window.addEventListener("orientationchange",C),ke.observe(e),Le(e,{type:"animate",getProgress:()=>ue,getTrigger:()=>({tStart:T,tEnd:g})}),{destroy(){cancelAnimationFrame(p),ke.disconnect(),window.removeEventListener("resize",C),window.removeEventListener("orientationchange",C),clearTimeout(z),se(),Pe(e);},replay(){Ee=-1,Se=false,ue=0,pe=false,G(0);},pause(){pe=true,cancelAnimationFrame(p);},resume(){pe&&(pe=false,F&&(p=requestAnimationFrame(X)));},seek(i){let f=Math.min(1,Math.max(0,i));ue=f,Ee=f,pe=true,cancelAnimationFrame(p),G(f);},getProgress(){return ue}}}var ot={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Pt(e,r){if(typeof window>"u")return ot;let n=typeof e=="string"?document.querySelector(e):e;if(!n)return be("scrollCounter: element not found:",e),ot;let t=n,{from:l=0,to:o,format:c,easing:u="ease-out",trigger:m={},once:d=true,decimals:x,onComplete:N}=r,L=x!==void 0?h=>h.toFixed(x):c??(h=>String(Math.round(h))),te=typeof u=="function"?u:ee[u]??ee["ease-out"],$e=fe(m.start??"top 80%"),W=fe(m.end??"top 20%");if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return t.textContent=L(o),N?.(),ot;let U=0,B=0,A=0,P=false,M=false,v=-1,k=0,I=false,$=()=>window.scrollY,S=()=>window.innerHeight;function re(){let h=t.getBoundingClientRect(),T=xe({top:h.top,height:h.height},$(),S(),$e,W);U=T.tStart,B=T.tEnd;}function O(h){t.textContent=L(l+(o-l)*h),t.style.setProperty("--scroll-draw-progress",String(h));}function ne(){if(!P||M)return;let h=te(Q($(),U,B,1));d&&(v=Math.max(v,h),h=v),k=h,O(h),h>=1&&!I?(I=true,N?.()):h<1&&!d&&(I=false),A=requestAnimationFrame(ne);}re();{let h=te(Q($(),U,B,1));d&&h>0&&(v=h),k=h,O(h);}let se=new IntersectionObserver(h=>{h.forEach(T=>{P=T.isIntersecting,P&&!M?A=requestAnimationFrame(ne):cancelAnimationFrame(A);});}),K;function ce(){clearTimeout(K),K=setTimeout(re,150);}return window.addEventListener("resize",ce),window.addEventListener("orientationchange",ce),se.observe(t),Le(t,{type:"counter",getProgress:()=>k,getTrigger:()=>({tStart:U,tEnd:B})}),{destroy(){cancelAnimationFrame(A),se.disconnect(),window.removeEventListener("resize",ce),window.removeEventListener("orientationchange",ce),clearTimeout(K),Pe(t);},replay(){v=-1,I=false,k=0,M=false,O(0);},pause(){M=true,cancelAnimationFrame(A);},resume(){M&&(M=false,P&&(A=requestAnimationFrame(ne)));},seek(h){let T=Math.min(1,Math.max(0,h));k=T,v=T,M=true,cancelAnimationFrame(A),O(T);},getProgress(){return k}}}var $t={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Ct(e,r={}){if(typeof window>"u")return $t;let n=typeof e=="string"?document.querySelector(e):e;if(!n||n.tagName.toLowerCase()!=="video")return be("scrollVideo: <video> element not found:",e),$t;let t=n,{trigger:l={},easing:o="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 o=="function"?o:ee[o]??ee.linear,$e=fe(l.start??"top top"),W=fe(l.end??"bottom top");t.pause(),t.hasAttribute("preload")||(t.preload=m);let Z=r.from??0,U=r.to,B=0,A=0,P=0,M=false,v=false,k=-1,I=0,$=false,S=false,re=()=>u==="x"?window.scrollX:window.scrollY,O=()=>u==="x"?window.innerWidth:window.innerHeight;function ne(){let p=t.getBoundingClientRect(),F=u==="x"?p.left:p.top,pe=u==="x"?p.width:p.height,Ee=xe({top:F,height:pe},re(),O(),$e,W);B=Ee.tStart,A=Ee.tEnd;}function se(p){if(!S)return;let F=U??t.duration??0;t.currentTime=Z+(F-Z)*p,t.style.setProperty("--scroll-draw-progress",String(p)),N?.(p);}function K(){if(!M||v||!S)return;let p=te(Q(re(),B,A,1));c&&(k=Math.max(k,p),p=k),I=p,se(p),p>=1&&!$?($=true,x?.()):p<1&&!c&&($=false),P=requestAnimationFrame(K);}function ce(){if(S=true,U===void 0&&(U=t.duration),L){se(1),d?.();return}ne(),d?.(),M&&!v&&(P=requestAnimationFrame(K));}t.readyState>=1?ce():t.addEventListener("loadedmetadata",ce,{once:true}),S||ne();let h=new IntersectionObserver(p=>{p.forEach(F=>{M=F.isIntersecting,M&&!v&&S?P=requestAnimationFrame(K):cancelAnimationFrame(P);});}),T;function g(){clearTimeout(T),T=setTimeout(ne,150);}return window.addEventListener("resize",g),window.addEventListener("orientationchange",g),h.observe(t),Le(t,{type:"video",getProgress:()=>I,getTrigger:()=>({tStart:B,tEnd:A})}),{destroy(){cancelAnimationFrame(P),h.disconnect(),t.removeEventListener("loadedmetadata",ce),window.removeEventListener("resize",g),window.removeEventListener("orientationchange",g),clearTimeout(T),Pe(t);},replay(){k=-1,$=false,I=0,v=false,se(0);},pause(){v=true,cancelAnimationFrame(P);},resume(){v&&(v=false,M&&S&&(P=requestAnimationFrame(K)));},seek(p){let F=Math.min(1,Math.max(0,p));I=F,k=F,v=true,cancelAnimationFrame(P),se(F);},getProgress(){return I}}}function Ot(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 lr(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 kt(e){let r=Ot(e),n=new Map;for(let o of r){let c=o.offsetTop;n.has(c)||n.set(c,[]),n.get(c).push(o);}let t=[],l=Array.from(n.keys()).sort((o,c)=>o-c);for(let o of l){let c=n.get(o),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((o,c)=>{e.appendChild(o),c<t.length-1&&e.appendChild(document.createTextNode(" "));}),t}function cr(e,r,n,t){if(n<=1||t===0)return e;let l=(n-1)*t,o=r*t,c=o+(1-l);return c<=o?e>=o?1:0:Math.min(1,Math.max(0,(e-o)/(c-o)))}function ur(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 be("scrollText: element not found:",e),It;let t=n,{split:l="words",stagger:o=.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=fe(m.start??"top 85%"),$e=fe(m.end??"top 40%"),W=t.innerHTML;t.setAttribute("aria-label",t.textContent??"");let Z;l==="chars"?Z=lr(t):l==="lines"?Z=kt(t):Z=Ot(t);let U=Z.length;function B(g,p){u?.opacity!==void 0&&(g.style.opacity=String(u.opacity+(1-u.opacity)*p));let F=ur(p,u);F&&(g.style.transform=F);}function A(g){t.style.setProperty("--scroll-draw-progress",String(g)),Z.forEach((p,F)=>{let pe=L(cr(g,F,U,o));B(p,pe);});}if(N)return A(1),x?.(),{destroy(){t.innerHTML=W,t.removeAttribute("aria-label");},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};A(0);let P=0,M=0,v=0,k=false,I=false,$=-1,S=0,re=false,O=()=>window.scrollY,ne=()=>window.innerHeight;function se(){let g=t.getBoundingClientRect(),p=xe({top:g.top,height:g.height},O(),ne(),te,$e);P=p.tStart,M=p.tEnd;}function K(){if(!k||I)return;let g=Q(O(),P,M,1);d&&($=Math.max($,g),g=$),S=g,A(g),g>=1&&!re?(re=true,x?.()):g<1&&!d&&(re=false),v=requestAnimationFrame(K);}se();let ce=new IntersectionObserver(g=>{g.forEach(p=>{k=p.isIntersecting,k&&!I?v=requestAnimationFrame(K):cancelAnimationFrame(v);});}),h;function T(){clearTimeout(h),h=setTimeout(()=>{if(l==="lines"){let g=S;t.innerHTML=W,t.setAttribute("aria-label",t.textContent??""),Z=kt(t),A(g);}se();},150);}return window.addEventListener("resize",T),window.addEventListener("orientationchange",T),ce.observe(t),Le(t,{type:"text",getProgress:()=>S,getTrigger:()=>({tStart:P,tEnd:M})}),{destroy(){cancelAnimationFrame(v),ce.disconnect(),window.removeEventListener("resize",T),window.removeEventListener("orientationchange",T),clearTimeout(h),t.innerHTML=W,t.removeAttribute("aria-label"),Pe(t);},replay(){$=-1,re=false,S=0,I=false,A(0);},pause(){I=true,cancelAnimationFrame(v);},resume(){I&&(I=false,k&&(v=requestAnimationFrame(K)));},seek(g){let p=Math.min(1,Math.max(0,g));S=p,$=p,I=true,cancelAnimationFrame(v),A(p);},getProgress(){return S}}}var Ft=class{constructor(){this.instance=null;}init(r,n={}){return this.destroy(),this.instance=Tt(r,n),this}replay(){return this.instance?.replay(),this}pause(){return this.instance?.pause(),this}resume(){return this.instance?.resume(),this}seek(r){return this.instance?.seek(r),this}getProgress(){return this.instance?.getProgress()??0}destroy(){return this.instance?.destroy(),this.instance=null,this}},Rt=class{constructor(){this.instance=null;}init(r,n){return this.destroy(),this.instance=Lt(r,n),this}replay(){return this.instance?.replay(),this}pause(){return this.instance?.pause(),this}resume(){return this.instance?.resume(),this}seek(r){return this.instance?.seek(r),this}getProgress(){return this.instance?.getProgress()??0}destroy(){return this.instance?.destroy(),this.instance=null,this}},Ht=class{constructor(){this.instance=null;}init(r,n){return this.destroy(),this.instance=Pt(r,n),this}replay(){return this.instance?.replay(),this}pause(){return this.instance?.pause(),this}resume(){return this.instance?.resume(),this}seek(r){return this.instance?.seek(r),this}getProgress(){return this.instance?.getProgress()??0}destroy(){return this.instance?.destroy(),this.instance=null,this}},Nt=class{constructor(){this.instance=null;}init(r,n={}){return this.destroy(),this.instance=Ct(r,n),this}replay(){return this.instance?.replay(),this}pause(){return this.instance?.pause(),this}resume(){return this.instance?.resume(),this}seek(r){return this.instance?.seek(r),this}getProgress(){return this.instance?.getProgress()??0}destroy(){return this.instance?.destroy(),this.instance=null,this}},zt=class{constructor(){this.instance=null;}init(r,n={}){return this.destroy(),this.instance=Dt(r,n),this}replay(){return this.instance?.replay(),this}pause(){return this.instance?.pause(),this}resume(){return this.instance?.resume(),this}seek(r){return this.instance?.seek(r),this}getProgress(){return this.instance?.getProgress()??0}destroy(){return this.instance?.destroy(),this.instance=null,this}};exports.ScrollAnimateRef=Rt;exports.ScrollCounterRef=Ht;exports.ScrollDrawRef=Ft;exports.ScrollTextRef=zt;exports.ScrollVideoRef=Nt;
|
package/dist/angular/index.d.mts
CHANGED
|
@@ -125,6 +125,21 @@ interface ScrollDrawInstance {
|
|
|
125
125
|
seek: (progress: number) => void;
|
|
126
126
|
/** Returns current draw progress (0–1). */
|
|
127
127
|
getProgress: () => number;
|
|
128
|
+
/**
|
|
129
|
+
* Re-measure after a layout change: path lengths, and the scroll trigger window.
|
|
130
|
+
*
|
|
131
|
+
* The engine already re-measures on `resize`, on `orientationchange`, and via a
|
|
132
|
+
* `ResizeObserver` on the document element — but none of those fire for a layout
|
|
133
|
+
* change that leaves the document height alone, such as a tab switching, a
|
|
134
|
+
* sibling collapsing, or a font swapping inside a fixed-height box. Call this
|
|
135
|
+
* after one of those.
|
|
136
|
+
*
|
|
137
|
+
* Optional on this shared type because several instances here are fan-outs over
|
|
138
|
+
* other instances or SSR no-op stubs. `scrollDraw`, `scrollPin`,
|
|
139
|
+
* `scrollHorizontal`, `scrollDrawTimeline` and the group APIs all provide it;
|
|
140
|
+
* use `instance.refresh?.()` if you hold an instance of unknown origin.
|
|
141
|
+
*/
|
|
142
|
+
refresh?: () => void;
|
|
128
143
|
}
|
|
129
144
|
|
|
130
145
|
interface ScrollAnimateOptions {
|
|
@@ -142,6 +157,33 @@ interface ScrollAnimateOptions {
|
|
|
142
157
|
* Higher values = more dramatic speed-up. Default sensitivity: 1.
|
|
143
158
|
*/
|
|
144
159
|
velocityScale?: boolean | number;
|
|
160
|
+
/**
|
|
161
|
+
* Honour `prefers-reduced-motion: reduce` by applying the final state and not
|
|
162
|
+
* animating. Default: `true`.
|
|
163
|
+
*
|
|
164
|
+
* Set to `false` only when the movement is *scroll-linked scrubbing* rather
|
|
165
|
+
* than autonomous motion — it advances solely as the user scrolls, 1:1 with
|
|
166
|
+
* their input, so it is direct manipulation rather than something that plays at
|
|
167
|
+
* them. `scrollHorizontal` sets this, because jumping to the final state there
|
|
168
|
+
* would leave every panel but the last unreachable inside the sticky
|
|
169
|
+
* `overflow: hidden` container.
|
|
170
|
+
*/
|
|
171
|
+
respectReducedMotion?: boolean;
|
|
172
|
+
/**
|
|
173
|
+
* Element whose geometry defines the trigger window, when that is not the
|
|
174
|
+
* element being animated. Defaults to the animated element.
|
|
175
|
+
*
|
|
176
|
+
* Needed whenever the animated element cannot supply the scroll length itself —
|
|
177
|
+
* the case that matters is a `position: sticky` stage, where the pinned element
|
|
178
|
+
* is exactly one viewport tall and all of the scroll room belongs to its
|
|
179
|
+
* container. Resolving `top top` → `bottom bottom` against the pinned element
|
|
180
|
+
* there yields tStart === tEnd, a zero-length window, and no movement at all.
|
|
181
|
+
*
|
|
182
|
+
* Setting this disables the native CSS fast path: `animation-timeline: view()`
|
|
183
|
+
* always measures the element the animation is attached to, so it cannot express
|
|
184
|
+
* a separate subject.
|
|
185
|
+
*/
|
|
186
|
+
triggerElement?: Element;
|
|
145
187
|
onProgress?: (alpha: number) => void;
|
|
146
188
|
onComplete?: () => void;
|
|
147
189
|
/** Fires when scroll enters the trigger zone (scrolling forward). */
|
package/dist/angular/index.d.ts
CHANGED
|
@@ -125,6 +125,21 @@ interface ScrollDrawInstance {
|
|
|
125
125
|
seek: (progress: number) => void;
|
|
126
126
|
/** Returns current draw progress (0–1). */
|
|
127
127
|
getProgress: () => number;
|
|
128
|
+
/**
|
|
129
|
+
* Re-measure after a layout change: path lengths, and the scroll trigger window.
|
|
130
|
+
*
|
|
131
|
+
* The engine already re-measures on `resize`, on `orientationchange`, and via a
|
|
132
|
+
* `ResizeObserver` on the document element — but none of those fire for a layout
|
|
133
|
+
* change that leaves the document height alone, such as a tab switching, a
|
|
134
|
+
* sibling collapsing, or a font swapping inside a fixed-height box. Call this
|
|
135
|
+
* after one of those.
|
|
136
|
+
*
|
|
137
|
+
* Optional on this shared type because several instances here are fan-outs over
|
|
138
|
+
* other instances or SSR no-op stubs. `scrollDraw`, `scrollPin`,
|
|
139
|
+
* `scrollHorizontal`, `scrollDrawTimeline` and the group APIs all provide it;
|
|
140
|
+
* use `instance.refresh?.()` if you hold an instance of unknown origin.
|
|
141
|
+
*/
|
|
142
|
+
refresh?: () => void;
|
|
128
143
|
}
|
|
129
144
|
|
|
130
145
|
interface ScrollAnimateOptions {
|
|
@@ -142,6 +157,33 @@ interface ScrollAnimateOptions {
|
|
|
142
157
|
* Higher values = more dramatic speed-up. Default sensitivity: 1.
|
|
143
158
|
*/
|
|
144
159
|
velocityScale?: boolean | number;
|
|
160
|
+
/**
|
|
161
|
+
* Honour `prefers-reduced-motion: reduce` by applying the final state and not
|
|
162
|
+
* animating. Default: `true`.
|
|
163
|
+
*
|
|
164
|
+
* Set to `false` only when the movement is *scroll-linked scrubbing* rather
|
|
165
|
+
* than autonomous motion — it advances solely as the user scrolls, 1:1 with
|
|
166
|
+
* their input, so it is direct manipulation rather than something that plays at
|
|
167
|
+
* them. `scrollHorizontal` sets this, because jumping to the final state there
|
|
168
|
+
* would leave every panel but the last unreachable inside the sticky
|
|
169
|
+
* `overflow: hidden` container.
|
|
170
|
+
*/
|
|
171
|
+
respectReducedMotion?: boolean;
|
|
172
|
+
/**
|
|
173
|
+
* Element whose geometry defines the trigger window, when that is not the
|
|
174
|
+
* element being animated. Defaults to the animated element.
|
|
175
|
+
*
|
|
176
|
+
* Needed whenever the animated element cannot supply the scroll length itself —
|
|
177
|
+
* the case that matters is a `position: sticky` stage, where the pinned element
|
|
178
|
+
* is exactly one viewport tall and all of the scroll room belongs to its
|
|
179
|
+
* container. Resolving `top top` → `bottom bottom` against the pinned element
|
|
180
|
+
* there yields tStart === tEnd, a zero-length window, and no movement at all.
|
|
181
|
+
*
|
|
182
|
+
* Setting this disables the native CSS fast path: `animation-timeline: view()`
|
|
183
|
+
* always measures the element the animation is attached to, so it cannot express
|
|
184
|
+
* a separate subject.
|
|
185
|
+
*/
|
|
186
|
+
triggerElement?: Element;
|
|
145
187
|
onProgress?: (alpha: number) => void;
|
|
146
188
|
onComplete?: () => void;
|
|
147
189
|
/** Fires when scroll enters the trigger zone (scrolling forward). */
|
package/dist/angular/index.mjs
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
function
|
|
2
|
-
<div style="position:absolute;${
|
|
3
|
-
<div style="position:absolute;${c?`left:${l}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${l}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",u,{passive:true}),u(),t}function Ye(e,r,n){let t=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),u=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,o=>{let f=parseFloat(o),l=t[u++]??f;return String(+(f+(l-f)*n).toFixed(4))})}function st(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:n,...t}=r,u=n?{...tt[n],...t}:t,o=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:f="path, polyline, line, polygon, rect, circle",speed:l=1,fade:c=false,easing:y="linear",trigger:C={},stagger:R=0,direction:E="forward",once:j=false,debug:ye=false,axis:z="y",scrollContainer:ee,autoReverse:U=false,delay:Z=0,strokeColor:S,strokeWidth:M,fillOpacity:P,waypoints:g,velocityScale:x=false,threshold:I=0,rootMargin:G="0px",repeat:k=0,repeatDelay:oe=0,morphTo:$,clip:_,autoplay:B=false,duration:X=1e3,native:V=true,onProgress:p,onStart:T,onComplete:b,onEnter:h,onLeave:q,onEnterBack:Se,onLeaveBack:xe}=u,be=_===true?"left":typeof _=="string"?_:false,we=typeof y=="function"?y:ae[y]??ae.linear,Le=le(C.start??"top bottom"),De=le(C.end??"bottom top"),te=typeof ee=="string"?document.querySelector(ee):ee??null,pe=Array.isArray(S)?S[0]:null,J=Array.isArray(S)?S[1]:typeof S=="string"?S:null,K=Array.isArray(M)?M[0]:null,i=Array.isArray(M)?M[1]:typeof M=="number"?M:null,d=Array.isArray(P)?P[0]:null,O=Array.isArray(P)?P[1]:typeof P=="number"?P:null;function re(s){let a=s*100;switch(be){case "right":return `inset(0 0 0 ${100-a}%)`;case "top":return `inset(0 0 ${100-a}% 0)`;case "bottom":return `inset(${100-a}% 0 0 0)`;case "center":return `circle(${s*150}% at 50% 50%)`;default:return `inset(0 ${100-a}% 0 0)`}}let L=be?[]:Array.from(e.querySelectorAll(f)),H=[],F=[],ie=0,ce=0,ne=false,de=false,se=0,He=false,ve=-1,Re=-1,ue=false,Ce=0,Te=0,Ae,Be=null,Me=new Set,ze=-1,Ue=performance.now(),Ie=NaN;function Ne(){return te?z==="x"?te.scrollLeft:te.scrollTop:z==="x"?window.scrollX:window.scrollY}function Ze(){return te?z==="x"?te.clientWidth:te.clientHeight:z==="x"?window.innerWidth:window.innerHeight}function Je(){let s=e.getBoundingClientRect(),a,v,Y;if(te){let fe=te.getBoundingClientRect();a=z==="x"?s.left-fe.left+te.scrollLeft:s.top-fe.top+te.scrollTop,v=z==="x"?s.width:s.height,Y=Ne();}else a=z==="x"?s.left:s.top,v=z==="x"?s.width:s.height,Y=Ne();let me=he({top:a,height:v},Y,Ze(),Le,De);ie=me.tStart,ce=me.tEnd,ye&&process.env.NODE_ENV!=="production"&&(Be?.remove(),Be=It(ie,ce,z));}function St(s,a){if(e.style.setProperty("--scroll-draw-progress",String(s)),be){let v=a==="reverse"?1-s:s;e.style.clipPath=re(v);return}L.forEach((v,Y)=>{v.style.strokeDashoffset=a==="reverse"?`${H[Y]*s}`:`${H[Y]*(1-s)}`,c&&(v.style.opacity=a==="reverse"?`${1-s}`:`${s}`),pe&&J?v.style.stroke=Fe(pe,J,s):J&&(v.style.stroke=J),K!==null&&i!==null?v.style.strokeWidth=`${K+(i-K)*s}`:i!==null&&(v.style.strokeWidth=`${i}`),d!==null&&O!==null?v.style.fillOpacity=`${d+(O-d)*s}`:O!==null&&(v.style.fillOpacity=`${O}`),$&&v.tagName.toLowerCase()==="path"&&F[Y]&&v.setAttribute("d",Ye(F[Y],$,s));});}function Ve(){if(e.style.setProperty("--scroll-draw-progress","0"),be){e.style.clipPath=re(0);return}L.forEach((s,a)=>{s.style.strokeDasharray=`${H[a]}`,s.style.strokeDashoffset=E==="reverse"?"0":`${H[a]}`,c?s.style.opacity=E==="reverse"?"1":"0":s.style.opacity="",pe&&(s.style.stroke=pe),K!==null&&(s.style.strokeWidth=`${K}`),d!==null&&(s.style.fillOpacity=`${d}`),$&&s.tagName.toLowerCase()==="path"&&F[a]&&s.setAttribute("d",F[a]);});}if(L.forEach(s=>{kt(s);let a=_e(s);H.push(a),s.tagName.toLowerCase()==="path"?F.push(s.getAttribute("d")??""):F.push(""),o?(s.style.strokeDasharray=`${a}`,s.style.strokeDashoffset=E==="reverse"?`${a}`:"0",c&&(s.style.opacity="1"),J&&(s.style.stroke=J),i!==null&&(s.style.strokeWidth=`${i}`),O!==null&&(s.style.fillOpacity=`${O}`),$&&s.tagName.toLowerCase()==="path"&&s.setAttribute("d",$)):(s.style.strokeDasharray=`${a}`,s.style.strokeDashoffset=E==="reverse"?"0":`${a}`,c?s.style.opacity=E==="reverse"?"1":"0":s.style.opacity="",pe&&(s.style.stroke=pe),K!==null&&(s.style.strokeWidth=`${K}`),d!==null&&(s.style.fillOpacity=`${d}`));}),be){if(o)return e.style.clipPath=re(1),b?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=re(0);}else if(o)return b?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function xt(){return !(V===false||!Ct()||!L.length||typeof y!="string"||!(y in nt)||be||z!=="y"||te||l!==1||R!==0||j||U||x!==false||$||g||k||Z>0||p||T||b||h||q||Se||xe||S!=null||M!=null||P!=null||(C.start??"top bottom").trim()!=="top bottom"||(C.end??"bottom top").trim()!=="bottom top")}function Tt(){let s=`svg-scroll-draw-${++Lt}`,a=E==="reverse"?"0":"var(--ssd-len)",v=E==="reverse"?"var(--ssd-len)":"0",Y=`stroke-dashoffset:${a};`,me=`stroke-dashoffset:${v};`;c&&(Y+=`opacity:${E==="reverse"?1:0};`,me+=`opacity:${E==="reverse"?0:1};`);let fe=document.createElement("style");fe.setAttribute("data-svg-scroll-draw",""),fe.textContent=`@keyframes ${s}{from{${Y}}to{${me}}}.${s}{animation-name:${s};animation-duration:auto;animation-timing-function:${nt[y]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(fe);function ge(m,A){m.style.setProperty("--ssd-len",String(H[A])),m.style.strokeDasharray=`${H[A]}`,m.style.strokeDashoffset="",m.style.opacity="",m.style.animationPlayState="",m.classList.add(s);}L.forEach(ge);let w=false,N=-1;function D(){if(N>=0)return N;let m=e.getBoundingClientRect(),{tStart:A,tEnd:W}=he({top:m.top,height:m.height},Ne(),Ze(),Le,De);return we(Q(Ne(),A,W,l))}return {destroy(){L.forEach(m=>{m.classList.remove(s),m.style.removeProperty("--ssd-len"),m.style.animationPlayState="";}),fe.remove();},replay(){w=false,N=-1,L.forEach(ge);},pause(){w=true,L.forEach(m=>{m.style.animationPlayState="paused";});},resume(){w&&(w=false,L.forEach(m=>{m.style.animationPlayState="running";}));},seek(m){let A=Math.min(1,Math.max(0,m));N=A,w=true,L.forEach((W,ke)=>{W.classList.remove(s),W.style.strokeDashoffset=E==="reverse"?`${H[ke]*A}`:`${H[ke]*(1-A)}`,c&&(W.style.opacity=E==="reverse"?`${1-A}`:`${A}`);});},getProgress(){return D()}}}if(xt())return Tt();function At(){let s=Math.max(1,X),a=0,v=0;function Y(D){let m=true;if(be){let A=Math.min(1,Math.max(0,D/s)),W=we(A);Ce=W,e.style.setProperty("--scroll-draw-progress",String(W)),e.style.clipPath=re(E==="reverse"?1-W:W),p?.(W),A<1&&(m=false);}else L.forEach((A,W)=>{let ke=W*R*s,Oe=Math.min(1,Math.max(0,(D-ke)/s)),Ee=we(Oe);A.style.strokeDashoffset=E==="reverse"?`${H[W]*Ee}`:`${H[W]*(1-Ee)}`,c&&(A.style.opacity=E==="reverse"?`${1-Ee}`:`${Ee}`),pe&&J?A.style.stroke=Fe(pe,J,Ee):J&&(A.style.stroke=J),K!==null&&i!==null?A.style.strokeWidth=`${K+(i-K)*Ee}`:i!==null&&(A.style.strokeWidth=`${i}`),d!==null&&O!==null?A.style.fillOpacity=`${d+(O-d)*Ee}`:O!==null&&(A.style.fillOpacity=`${O}`),$&&A.tagName.toLowerCase()==="path"&&F[W]&&A.setAttribute("d",Ye(F[W],$,Ee)),W===0&&(p?.(Ee),e.style.setProperty("--scroll-draw-progress",String(Ee))),Oe<1&&(m=false);});if(g){let A=Math.min(1,Math.max(0,D/s)),W=we(A);for(let ke in g){let Oe=parseFloat(ke);W>=Oe&&!Me.has(Oe)&&(Me.add(Oe),g[ke]?.());}}return m}function me(D){if(ue)return;let m=D-a;de||(de=true,T?.());let A=Y(m);if(A&&!ne){ne=true,Y(s*(1+Math.max(0,L.length-1)*R)),b?.(),Te<(k==="infinite"?1/0:k??0)&&(Te++,Ae=setTimeout(()=>{a=performance.now(),de=false,ne=false,Me.clear(),Ve(),se=requestAnimationFrame(me);},oe));return}A||(se=requestAnimationFrame(me));}function fe(){cancelAnimationFrame(se),clearTimeout(Ae),a=performance.now(),v=0,ue=false,de=false,ne=false,Te=0,Me.clear(),Ve(),se=requestAnimationFrame(me);}let ge=new IntersectionObserver(D=>{D.forEach(m=>{m.isIntersecting&&!(j&&ne)?fe():!m.isIntersecting&&!j&&!ne&&(cancelAnimationFrame(se),clearTimeout(Ae),a=null);});},{root:te??null,threshold:I,rootMargin:G}),w;function N(){clearTimeout(w),w=setTimeout(()=>{L.forEach((D,m)=>{H[m]=_e(D),D.style.strokeDasharray=`${H[m]}`;});},150);}return window.addEventListener("resize",N),window.addEventListener("orientationchange",N),Z>0?setTimeout(()=>ge.observe(e),Z):ge.observe(e),{destroy(){cancelAnimationFrame(se),clearTimeout(Ae),ge.disconnect(),window.removeEventListener("resize",N),window.removeEventListener("orientationchange",N),clearTimeout(w);},replay(){Te=0,fe();},pause(){ue||(ue=true,v=performance.now()-a,cancelAnimationFrame(se));},resume(){ue&&(ue=false,a=performance.now()-v,se=requestAnimationFrame(me));},seek(D){let m=Math.min(1,Math.max(0,D));Ce=m,ue=true,v=m*s,a=performance.now()-v,cancelAnimationFrame(se),Y(v);},getProgress(){return Ce}}}if(B)return At();Je();function qe(){if(!He||ue)return;let s=performance.now(),a=Ne(),v=l;if(x!==false){let w=s-Ue,N=w>0?Math.abs(a-(ze<0?a:ze))/w:0;v=l*Math.max(.2,1+N*(typeof x=="number"?x:1)*.04);}ze=a,Ue=s;let Y=U?Re===-1||a>=Re?"forward":"reverse":E;Re=a;let me=ce-ie,fe=true,ge=me===0?0:(a-ie)/me;if(isNaN(Ie)||(Ie<=0&&ge>0?h?.():Ie>0&&ge<=0&&xe?.(),Ie<1&&ge>=1?q?.():Ie>=1&&ge<1&&Se?.()),Ie=ge,be){let w=we(Q(a,ie,ce,v));j&&!U&&(ve=Math.max(ve,w),w=ve),Ce=w,e.style.setProperty("--scroll-draw-progress",String(w));let N=Y==="reverse"?1-w:w;e.style.clipPath=re(N),p?.(w),!de&&Q(a,ie,ce,v)>0&&(de=true,T?.()),w>=1&&!ne?(ne=true,b?.(),Te<(k==="infinite"?1/0:k??0)&&(Te++,Ae=setTimeout(()=>{ve=-1,de=false,ne=false,e.style.clipPath=re(0);},oe))):w<1&&!j&&(ne=false),se=requestAnimationFrame(qe);return}if(L.forEach((w,N)=>{let D=N*R*me,m=we(Q(a,ie+D,ce+D,v));j&&!U&&(ve=Math.max(ve,m),m=ve),Ce=m,w.style.strokeDashoffset=Y==="reverse"?`${H[N]*m}`:`${H[N]*(1-m)}`,c&&(w.style.opacity=Y==="reverse"?`${1-m}`:`${m}`),pe&&J?w.style.stroke=Fe(pe,J,m):J&&(w.style.stroke=J),K!==null&&i!==null?w.style.strokeWidth=`${K+(i-K)*m}`:i!==null&&(w.style.strokeWidth=`${i}`),d!==null&&O!==null?w.style.fillOpacity=`${d+(O-d)*m}`:O!==null&&(w.style.fillOpacity=`${O}`),$&&w.tagName.toLowerCase()==="path"&&F[N]&&w.setAttribute("d",Ye(F[N],$,m)),N===0&&(p?.(m),e.style.setProperty("--scroll-draw-progress",String(m))),m<1&&(fe=false);}),g){let w=we(Q(a,ie,ce,v));for(let N in g){let D=parseFloat(N);w>=D&&!Me.has(D)&&(Me.add(D),g[N]?.());}}!de&&Q(a,ie,ce,v)>0&&(de=true,T?.()),fe&&!ne?(ne=true,b?.(),Te<(k==="infinite"?1/0:k??0)&&(Te++,Ae=setTimeout(()=>{ve=-1,de=false,ne=false,Me.clear(),Ve();},oe))):!fe&&!j&&(ne=false),se=requestAnimationFrame(qe);}let Ge=new IntersectionObserver(s=>{s.forEach(a=>{He=a.isIntersecting,He&&!ue?se=requestAnimationFrame(qe):cancelAnimationFrame(se);});},{root:te??null,threshold:I,rootMargin:G}),Xe;function We(){clearTimeout(Xe),Xe=setTimeout(()=>{L.forEach((s,a)=>{H[a]=_e(s),s.style.strokeDasharray=`${H[a]}`;}),Je();},150);}return window.addEventListener("resize",We),window.addEventListener("orientationchange",We),Z>0?setTimeout(()=>Ge.observe(e),Z):Ge.observe(e),{destroy(){cancelAnimationFrame(se),clearTimeout(Ae),Ge.disconnect(),window.removeEventListener("resize",We),window.removeEventListener("orientationchange",We),clearTimeout(Xe),Be?.remove();},replay(){ve=-1,Re=-1,ze=-1,de=false,ne=false,Te=0,ue=false,Me.clear(),clearTimeout(Ae),Ve();},pause(){ue=true,cancelAnimationFrame(se);},resume(){ue&&(ue=false,He&&(se=requestAnimationFrame(qe)));},seek(s){let a=Math.min(1,Math.max(0,s));Ce=a,ve=a,ue=true,cancelAnimationFrame(se),St(a,E);},getProgress(){return Ce}}}var ot=new Map;function Pe(e,r){ot.set(e,r);}function $e(e){ot.delete(e);}function Ot(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function it(e){let r=[],n=/([\w]+)\(([^)]*)\)/g,t;for(;(t=n.exec(e))!==null;){let u=[],o=[],f=t[2].trim();if(f)for(let l of f.split(/[\s,]+/)){let c=l.match(/^([-+]?[\d.eE]+)(.*)$/);u.push(c?parseFloat(c[1]):0),o.push(c?c[2]:"");}r.push({fn:t[1],nums:u,units:o});}return r}function Ft(e,r,n){let t=it(e),u=it(r);return t.length===0||t.length!==u.length?n<1?e:r:t.map((o,f)=>{let l=u[f];return o.fn!==l.fn||o.nums.length!==l.nums.length?n<1?`${o.fn}(${o.nums.map((c,y)=>`${c}${o.units[y]}`).join(", ")})`:`${l.fn}(${l.nums.map((c,y)=>`${c}${l.units[y]}`).join(", ")})`:`${o.fn}(${o.nums.map((c,y)=>`${c+(l.nums[y]-c)*n}${o.units[y]}`).join(", ")})`}).join(" ")}function at(e,r,n){if(typeof e=="number"&&typeof r=="number")return String(e+(r-e)*n);let t=String(e),u=String(r);if(Ot(t))return Fe(t,u,n);if(t.includes("("))return Ft(t,u,n);let o=t.match(/^([-+]?[\d.]+)(.*)$/),f=u.match(/^([-+]?[\d.]+)(.*)$/);if(o&&f){let l=parseFloat(o[1]),c=parseFloat(f[1]);return `${l+(c-l)*n}${o[2]||f[2]}`}return n<1?t:u}function Nt(e){return e.replace(/([A-Z])/g,r=>`-${r.toLowerCase()}`)}var lt={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"]),Ht=0;function Rt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function ct(e,r){let n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return n;let{props:t,trigger:u={},easing:o="ease-out",speed:f=1,once:l=false,axis:c="y",scrollContainer:y,native:C=true,velocityScale:R=false,onProgress:E,onComplete:j,onEnter:ye,onLeave:z,onEnterBack:ee,onLeaveBack:U}=r,Z=window.matchMedia("(prefers-reduced-motion: reduce)").matches,S=typeof o=="function"?o:ae[o]??ae["ease-out"],M=le(u.start??"top bottom"),P=le(u.end??"bottom top"),g=typeof y=="string"?document.querySelector(y):y??null,x=Object.entries(t).map(([i,d])=>({prop:Nt(i),from:Array.isArray(d)?d[0]:"",to:Array.isArray(d)?d[1]:d}));function I(){let i=window.getComputedStyle(e);for(let d of x)d.from===""&&(d.from=i.getPropertyValue(d.prop).trim()||"0");}function G(){for(let i of x)e.style.setProperty(i.prop,String(i.to));}if(Z)return G(),j?.(),n;I();function k(){if(!C||!Rt()||typeof o!="string"||!(o in lt)||c!=="y"||g||l||f!==1||E||j||ye||z||ee||U||R!==false||(u.start??"top bottom").trim()!=="top bottom"||(u.end??"bottom top").trim()!=="bottom top")return false;for(let i of x)if(!Dt.has(i.prop))return false;return true}function oe(){let i=`ssd-a-${++Ht}`,d=x.map(F=>`${F.prop}:${F.from}`).join(";"),O=x.map(F=>`${F.prop}:${F.to}`).join(";"),re=document.createElement("style");re.setAttribute("data-ssd-animate",""),re.textContent=`@keyframes ${i}{from{${d}}to{${O}}}.${i}{animation-name:${i};animation-duration:auto;animation-timing-function:${lt[o]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(re),e.classList.add(i);let L=()=>c==="x"?window.scrollX:window.scrollY,H=()=>c==="x"?window.innerWidth:window.innerHeight;return {destroy(){e.classList.remove(i),re.remove();},replay(){e.classList.remove(i),e.offsetWidth,e.classList.add(i);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(F){let ie=Math.min(1,Math.max(0,F));e.classList.remove(i);for(let ce of x)e.style.setProperty(ce.prop,at(ce.from,ce.to,ie));},getProgress(){let F=e.getBoundingClientRect(),ie=L(),ce=H(),{tStart:ne,tEnd:de}=he({top:F.top,height:F.height},ie,ce,M,P);return S(Q(ie,ne,de,f))}}}if(k())return oe();let $=0,_=0,B=0,X=false,V=false,p=-1,T=0,b=false,h=NaN,q=-1,Se=0,xe=()=>g?c==="x"?g.scrollLeft:g.scrollTop:c==="x"?window.scrollX:window.scrollY,be=()=>g?c==="x"?g.clientWidth:g.clientHeight:c==="x"?window.innerWidth:window.innerHeight;function we(){let i=e.getBoundingClientRect(),d,O;if(g){let L=g.getBoundingClientRect();d=c==="x"?i.left-L.left+g.scrollLeft:i.top-L.top+g.scrollTop,O=c==="x"?i.width:i.height;}else d=c==="x"?i.left:i.top,O=c==="x"?i.width:i.height;let re=he({top:d,height:O},xe(),be(),M,P);$=re.tStart,_=re.tEnd;}function Le(i){e.style.setProperty("--scroll-draw-progress",String(i));for(let d of x)e.style.setProperty(d.prop,at(d.from,d.to,i));E?.(i);}function De(i){if(isNaN(h)){h=i;return}h<=0&&i>0?ye?.():h>0&&i<=0&&U?.(),h<1&&i>=1?z?.():h>=1&&i<1&&ee?.(),h=i;}function te(){if(!X||V)return;let i=performance.now(),d=xe(),O=f;if(R!==false){let H=i-Se,F=H>0?Math.abs(d-(q<0?d:q))/H:0;O=f*Math.max(.2,1+F*(typeof R=="number"?R:1)*.04);}q=d,Se=i;let re=_===$?0:(d-$)/(_-$);De(re);let L=S(Q(d,$,_,O));l&&(p=Math.max(p,L),L=p),T=L,Le(L),L>=1&&!b?(b=true,j?.()):L<1&&!l&&(b=false),B=requestAnimationFrame(te);}we();{let i=S(Q(xe(),$,_,f));l&&i>0&&(p=i),T=i,Le(i);}let pe=new IntersectionObserver(i=>{i.forEach(d=>{X=d.isIntersecting,X&&!V?B=requestAnimationFrame(te):cancelAnimationFrame(B);});},{root:g??null}),J;function K(){clearTimeout(J),J=setTimeout(we,150);}return window.addEventListener("resize",K),window.addEventListener("orientationchange",K),pe.observe(e),Pe(e,{type:"animate",getProgress:()=>T,getTrigger:()=>({tStart:$,tEnd:_})}),{destroy(){cancelAnimationFrame(B),pe.disconnect(),window.removeEventListener("resize",K),window.removeEventListener("orientationchange",K),clearTimeout(J),$e(e);},replay(){p=-1,b=false,T=0,V=false,Le(0);},pause(){V=true,cancelAnimationFrame(B);},resume(){V&&(V=false,X&&(B=requestAnimationFrame(te)));},seek(i){let d=Math.min(1,Math.max(0,i));T=d,p=d,V=true,cancelAnimationFrame(B),Le(d);},getProgress(){return T}}}var je={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function ut(e,r){if(typeof window>"u")return je;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),je;let t=n,{from:u=0,to:o,format:f,easing:l="ease-out",trigger:c={},once:y=true,decimals:C,onComplete:R}=r,E=C!==void 0?p=>p.toFixed(C):f??(p=>String(Math.round(p))),j=typeof l=="function"?l:ae[l]??ae["ease-out"],ye=le(c.start??"top 80%"),z=le(c.end??"top 20%");if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return t.textContent=E(o),R?.(),je;t.textContent=E(u);let U=0,Z=0,S=0,M=false,P=false,g=-1,x=0,I=false,G=()=>window.scrollY,k=()=>window.innerHeight;function oe(){let p=t.getBoundingClientRect(),T=he({top:p.top,height:p.height},G(),k(),ye,z);U=T.tStart,Z=T.tEnd;}function $(p){t.textContent=E(u+(o-u)*p),t.style.setProperty("--scroll-draw-progress",String(p));}function _(){if(!M||P)return;let p=j(Q(G(),U,Z,1));y&&(g=Math.max(g,p),p=g),x=p,$(p),p>=1&&!I?(I=true,R?.()):p<1&&!y&&(I=false),S=requestAnimationFrame(_);}oe();{let p=j(Q(G(),U,Z,1));y&&p>0&&(g=p),x=p,$(p);}let B=new IntersectionObserver(p=>{p.forEach(T=>{M=T.isIntersecting,M&&!P?S=requestAnimationFrame(_):cancelAnimationFrame(S);});}),X;function V(){clearTimeout(X),X=setTimeout(oe,150);}return window.addEventListener("resize",V),window.addEventListener("orientationchange",V),B.observe(t),Pe(t,{type:"counter",getProgress:()=>x,getTrigger:()=>({tStart:U,tEnd:Z})}),{destroy(){cancelAnimationFrame(S),B.disconnect(),window.removeEventListener("resize",V),window.removeEventListener("orientationchange",V),clearTimeout(X),$e(t);},replay(){g=-1,I=false,x=0,P=false,$(0);},pause(){P=true,cancelAnimationFrame(S);},resume(){P&&(P=false,M&&(S=requestAnimationFrame(_)));},seek(p){let T=Math.min(1,Math.max(0,p));x=T,g=T,P=true,cancelAnimationFrame(S),$(T);},getProgress(){return x}}}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||n.tagName.toLowerCase()!=="video")return process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] scrollVideo: <video> element not found:",e),mt;let t=n,{trigger:u={},easing:o="linear",once:f=false,axis:l="y",preload:c="auto",onReady:y,onComplete:C,onProgress:R}=r,E=window.matchMedia("(prefers-reduced-motion: reduce)").matches,j=typeof o=="function"?o:ae[o]??ae.linear,ye=le(u.start??"top top"),z=le(u.end??"bottom top");t.pause(),t.hasAttribute("preload")||(t.preload=c);let ee=r.from??0,U=r.to,Z=0,S=0,M=0,P=false,g=false,x=-1,I=0,G=false,k=false,oe=()=>l==="x"?window.scrollX:window.scrollY,$=()=>l==="x"?window.innerWidth:window.innerHeight;function _(){let h=t.getBoundingClientRect(),q=l==="x"?h.left:h.top,Se=l==="x"?h.width:h.height,xe=he({top:q,height:Se},oe(),$(),ye,z);Z=xe.tStart,S=xe.tEnd;}function B(h){if(!k)return;let q=U??t.duration??0;t.currentTime=ee+(q-ee)*h,t.style.setProperty("--scroll-draw-progress",String(h)),R?.(h);}function X(){if(!P||g||!k)return;let h=j(Q(oe(),Z,S,1));f&&(x=Math.max(x,h),h=x),I=h,B(h),h>=1&&!G?(G=true,C?.()):h<1&&!f&&(G=false),M=requestAnimationFrame(X);}function V(){if(k=true,U===void 0&&(U=t.duration),E){B(1),y?.();return}_(),y?.(),P&&!g&&(M=requestAnimationFrame(X));}t.readyState>=1?V():t.addEventListener("loadedmetadata",V,{once:true}),k||_();let p=new IntersectionObserver(h=>{h.forEach(q=>{P=q.isIntersecting,P&&!g&&k?M=requestAnimationFrame(X):cancelAnimationFrame(M);});}),T;function b(){clearTimeout(T),T=setTimeout(_,150);}return window.addEventListener("resize",b),window.addEventListener("orientationchange",b),p.observe(t),Pe(t,{type:"video",getProgress:()=>I,getTrigger:()=>({tStart:Z,tEnd:S})}),{destroy(){cancelAnimationFrame(M),p.disconnect(),t.removeEventListener("loadedmetadata",V),window.removeEventListener("resize",b),window.removeEventListener("orientationchange",b),clearTimeout(T),$e(t);},replay(){x=-1,G=false,I=0,g=false,B(0);},pause(){g=true,cancelAnimationFrame(M);},resume(){g&&(g=false,P&&k&&(M=requestAnimationFrame(X)));},seek(h){let q=Math.min(1,Math.max(0,h));I=q,x=q,g=true,cancelAnimationFrame(M),B(q);},getProgress(){return I}}}function gt(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 pt(e){let r=gt(e),n=new Map;for(let o of r){let f=o.offsetTop;n.has(f)||n.set(f,[]),n.get(f).push(o);}let t=[],u=Array.from(n.keys()).sort((o,f)=>o-f);for(let o of u){let f=n.get(o),l=document.createElement("span");l.setAttribute("aria-hidden","true"),l.style.display="inline-block";for(let c of f)l.appendChild(c);t.push(l);}e.textContent="";for(let o of t)e.appendChild(o),e.appendChild(document.createTextNode(" "));return t}function Vt(e,r,n,t){if(n<=1||t===0)return e;let u=(n-1)*t,o=r*t,f=o+(1-u);return f<=o?e>=o?1:0:Math.min(1,Math.max(0,(e-o)/(f-o)))}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 dt={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function ht(e,r={}){if(typeof window>"u")return dt;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),dt;let t=n,{split:u="words",stagger:o=.04,easing:f="ease-out",from:l={opacity:0,y:24},trigger:c={},once:y=true,onComplete:C}=r,R=window.matchMedia("(prefers-reduced-motion: reduce)").matches,E=typeof f=="function"?f:ae[f]??ae["ease-out"],j=le(c.start??"top 85%"),ye=le(c.end??"top 40%"),z=t.innerHTML;t.setAttribute("aria-label",t.textContent??"");let ee;u==="chars"?ee=zt(t):u==="lines"?ee=pt(t):ee=gt(t);let U=ee.length;function Z(b,h){l?.opacity!==void 0&&(b.style.opacity=String(l.opacity+(1-l.opacity)*h));let q=qt(h,l);q&&(b.style.transform=q);}function S(b){t.style.setProperty("--scroll-draw-progress",String(b)),ee.forEach((h,q)=>{let Se=E(Vt(b,q,U,o));Z(h,Se);});}if(R)return S(1),C?.(),{destroy(){t.innerHTML=z,t.removeAttribute("aria-label");},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};S(0);let M=0,P=0,g=0,x=false,I=false,G=-1,k=0,oe=false,$=()=>window.scrollY,_=()=>window.innerHeight;function B(){let b=t.getBoundingClientRect(),h=he({top:b.top,height:b.height},$(),_(),j,ye);M=h.tStart,P=h.tEnd;}function X(){if(!x||I)return;let b=Q($(),M,P,1);y&&(G=Math.max(G,b),b=G),k=b,S(b),b>=1&&!oe?(oe=true,C?.()):b<1&&!y&&(oe=false),g=requestAnimationFrame(X);}B();let V=new IntersectionObserver(b=>{b.forEach(h=>{x=h.isIntersecting,x&&!I?g=requestAnimationFrame(X):cancelAnimationFrame(g);});}),p;function T(){clearTimeout(p),p=setTimeout(()=>{if(u==="lines"){let b=k;t.innerHTML=z,t.setAttribute("aria-label",t.textContent??""),ee=pt(t),S(b);}B();},150);}return window.addEventListener("resize",T),window.addEventListener("orientationchange",T),V.observe(t),Pe(t,{type:"text",getProgress:()=>k,getTrigger:()=>({tStart:M,tEnd:P})}),{destroy(){cancelAnimationFrame(g),V.disconnect(),window.removeEventListener("resize",T),window.removeEventListener("orientationchange",T),clearTimeout(p),t.innerHTML=z,t.removeAttribute("aria-label"),$e(t);},replay(){G=-1,oe=false,k=0,I=false,S(0);},pause(){I=true,cancelAnimationFrame(g);},resume(){I&&(I=false,x&&(g=requestAnimationFrame(X)));},seek(b){let h=Math.min(1,Math.max(0,b));k=h,G=h,I=true,cancelAnimationFrame(g),S(h);},getProgress(){return k}}}var yt=class{constructor(){this.instance=null;}init(r,n={}){return this.destroy(),this.instance=st(r,n),this}replay(){return this.instance?.replay(),this}pause(){return this.instance?.pause(),this}resume(){return this.instance?.resume(),this}seek(r){return this.instance?.seek(r),this}getProgress(){return this.instance?.getProgress()??0}destroy(){return this.instance?.destroy(),this.instance=null,this}},bt=class{constructor(){this.instance=null;}init(r,n){return this.destroy(),this.instance=ct(r,n),this}replay(){return this.instance?.replay(),this}pause(){return this.instance?.pause(),this}resume(){return this.instance?.resume(),this}seek(r){return this.instance?.seek(r),this}getProgress(){return this.instance?.getProgress()??0}destroy(){return this.instance?.destroy(),this.instance=null,this}},wt=class{constructor(){this.instance=null;}init(r,n){return this.destroy(),this.instance=ut(r,n),this}replay(){return this.instance?.replay(),this}pause(){return this.instance?.pause(),this}resume(){return this.instance?.resume(),this}seek(r){return this.instance?.seek(r),this}getProgress(){return this.instance?.getProgress()??0}destroy(){return this.instance?.destroy(),this.instance=null,this}},vt=class{constructor(){this.instance=null;}init(r,n={}){return this.destroy(),this.instance=ft(r,n),this}replay(){return this.instance?.replay(),this}pause(){return this.instance?.pause(),this}resume(){return this.instance?.resume(),this}seek(r){return this.instance?.seek(r),this}getProgress(){return this.instance?.getProgress()??0}destroy(){return this.instance?.destroy(),this.instance=null,this}},Et=class{constructor(){this.instance=null;}init(r,n={}){return this.destroy(),this.instance=ht(r,n),this}replay(){return this.instance?.replay(),this}pause(){return this.instance?.pause(),this}resume(){return this.instance?.resume(),this}seek(r){return this.instance?.seek(r),this}getProgress(){return this.instance?.getProgress()??0}destroy(){return this.instance?.destroy(),this.instance=null,this}};export{bt as ScrollAnimateRef,wt as ScrollCounterRef,yt as ScrollDrawRef,Et as ScrollTextRef,vt as ScrollVideoRef};
|
|
1
|
+
function Bt({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,c=[];for(let d=0;d<n;d++){let x=Math.pow(l,d);c.push(x),o+=x;}let u=[0],m=0;for(let d=0;d<n;d++)m+=c[d]/o,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 Gt({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 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:Bt(),elastic:Gt()};function fe(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 dt(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 gt(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 _e(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 jt(e,r,n){return Math.min(n,Math.max(r,e))}function Q(e,r,n,t){return n===r?0:jt((e-r)/(n-r)*t,0,1)}function Qe(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 o=dt(e.top,e.height,r,t.element)-gt(t.viewport,n),c=dt(e.top,e.height,r,l.element)-gt(l.viewport,n);return {tStart:o,tEnd:c}}function ht(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 Ve(e,r,n){let t=ht(e),l=ht(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 yt={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 Ze=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function be(e,...r){Ze&&console.warn(`[svg-scroll-draw] ${e}`,...r);}var Yt="cubic-bezier(0.333333, 0, 0.666667, 0.333333)",Ut="cubic-bezier(0.333333, 0.666667, 0.666667, 1)",bt=33;function Xt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timing-function: linear(0, 1)")}function Qt(e){let r=[];for(let n=0;n<bt;n++){let t=n/(bt-1);r.push(String(Math.round(e(t)*1e5)/1e5));}return `linear(${r.join(",")})`}function Ke(e){switch(e){case "linear":return "linear";case "ease-in":return Yt;case "ease-out":return Ut;case "ease-in-out":return Xt()?Qt(ee["ease-in-out"]):null;default:return null}}var wt=Symbol.for("svg-scroll-draw.registry");function vt(){let e=globalThis;return e[wt]||(e[wt]=new Map)}function Le(e,r){vt().set(e,r);}function Pe(e){vt().delete(e);}var Zt=0;function Kt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")&&CSS.supports("view-timeline-name: --x")}function Jt(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?be("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&be("Element has a fill \u2014 it may obscure the stroke animation.",e);}function er(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 o=n==="x"?window.scrollX:window.scrollY,c=e-o,u=r-o,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 Et=/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,St=/[MmLlHhVvCcSsQqTtAaZz]/g;function tr(e,r,n){if(!Ze)return;let t=(e.match(St)??[]).join("").toUpperCase(),l=(r.match(St)??[]).join("").toUpperCase(),o=(e.match(Et)??[]).length,c=(r.match(Et)??[]).length;if(t!==l){be(`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}o!==c&&be(`morphTo: coordinate count differs (${o} \u2192 ${c}). Extra coordinates are ignored and missing ones hold their start value, so the result will not reach the target shape.`,n);}function st(e,r,n){let t=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),l=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,o=>{let c=parseFloat(o),u=t[l++]??c;return String(+(c+(u-c)*n).toFixed(4))})}function Tt(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:n,...t}=r,l=n?{...yt[n],...t}:t,o=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:$e=false,axis:W="y",scrollContainer:Z,autoReverse:U=false,delay:B=0,strokeColor:A,strokeWidth:P,fillOpacity:M,waypoints:v,velocityScale:k=false,threshold:I=0,rootMargin:$="0px",repeat:S=0,repeatDelay:re=0,morphTo:O,clip:ne,autoplay:se=false,duration:K=1e3,native:ce=true,onProgress:h,onStart:T,onComplete:g,onEnter:p,onLeave:F,onEnterBack:pe,onLeaveBack:Ee}=l,ue=ne===true?"left":typeof ne=="string"?ne:false,Se=typeof d=="function"?d:ee[d]??ee.linear,Ce=fe(x.start??"top bottom"),Ne=fe(x.end??"bottom top"),we=typeof Z=="string"?document.querySelector(Z):Z??null,ve=Array.isArray(A)?A[0]:null,oe=Array.isArray(A)?A[1]:typeof A=="string"?A:null,ie=Array.isArray(P)?P[0]:null,G=Array.isArray(P)?P[1]:typeof P=="number"?P:null,me=Array.isArray(M)?M[0]:null,X=Array.isArray(M)?M[1]:typeof M=="number"?M:null;function ke(s){let a=s*100;switch(ue){case "right":return `inset(0 0 0 ${100-a}%)`;case "top":return `inset(0 0 ${100-a}% 0)`;case "bottom":return `inset(${100-a}% 0 0 0)`;case "center":return `circle(${s*150}% at 50% 50%)`;default:return `inset(0 ${100-a}% 0 0)`}}let z=ue?[]:Array.from(e.querySelectorAll(c)),C=[],i=[],f=0,de=0,R=false,_=false,V=0,Ae=false,ge=-1,J=-1,j=false,he=0,Oe=0,Fe,Je=null;function it(){Je?.destroy(),Je=null;}let Re=new Set,at=NaN,He=true,Be=-1,lt=performance.now(),ze=NaN;function et(){return we?W==="x"?we.scrollLeft:we.scrollTop:W==="x"?window.scrollX:window.scrollY}function ct(){return we?W==="x"?we.clientWidth:we.clientHeight:W==="x"?window.innerWidth:window.innerHeight}function ut(){let s=Qe(e,we,W);return xe(s,s.scroll,ct(),Ce,Ne)}function mt(){(({tStart:f,tEnd:de}=ut())),$e&&Ze&&(it(),Je=er(f,de,W));}function tt(s,a=ut){Le(e,{type:"draw",getProgress:()=>s.getProgress(),getTrigger:a});let w=s.destroy;return s.destroy=()=>{w.call(s),Pe(e);},s}function _t(s,a){if(e.style.setProperty("--scroll-draw-progress",String(s)),ue){let w=a==="reverse"?1-s:s;e.style.clipPath=ke(w);return}z.forEach((w,ae)=>{w.style.strokeDashoffset=a==="reverse"?`${C[ae]*s}`:`${C[ae]*(1-s)}`,m&&(w.style.opacity=a==="reverse"?`${1-s}`:`${s}`),ve&&oe?w.style.stroke=Ve(ve,oe,s):oe&&(w.style.stroke=oe),ie!==null&&G!==null?w.style.strokeWidth=`${ie+(G-ie)*s}`:G!==null&&(w.style.strokeWidth=`${G}`),me!==null&&X!==null?w.style.fillOpacity=`${me+(X-me)*s}`:X!==null&&(w.style.fillOpacity=`${X}`),O&&w.tagName.toLowerCase()==="path"&&i[ae]&&w.setAttribute("d",st(i[ae],O,s));});}function Ge(){if(e.style.setProperty("--scroll-draw-progress","0"),ue){e.style.clipPath=ke(0);return}z.forEach((s,a)=>{s.style.strokeDasharray=`${C[a]}`,s.style.strokeDashoffset=L==="reverse"?"0":`${C[a]}`,m?s.style.opacity=L==="reverse"?"1":"0":s.style.opacity="",ve&&(s.style.stroke=ve),ie!==null&&(s.style.strokeWidth=`${ie}`),me!==null&&(s.style.fillOpacity=`${me}`),O&&s.tagName.toLowerCase()==="path"&&i[a]&&s.setAttribute("d",i[a]);});}if(z.forEach(s=>{Jt(s);let a=_e(s);C.push(a);let w=s.tagName.toLowerCase()==="path";w?i.push(s.getAttribute("d")??""):i.push(""),O&&(w?tr(i[i.length-1],O,s):be(`morphTo only applies to <path> elements \u2014 ignored on <${s.tagName}>.`,s)),o?(s.style.strokeDasharray=`${a}`,s.style.strokeDashoffset=L==="reverse"?`${a}`:"0",m&&(s.style.opacity="1"),oe&&(s.style.stroke=oe),G!==null&&(s.style.strokeWidth=`${G}`),X!==null&&(s.style.fillOpacity=`${X}`),O&&s.tagName.toLowerCase()==="path"&&s.setAttribute("d",O)):(s.style.strokeDasharray=`${a}`,s.style.strokeDashoffset=L==="reverse"?"0":`${a}`,m?s.style.opacity=L==="reverse"?"1":"0":s.style.opacity="",ve&&(s.style.stroke=ve),ie!==null&&(s.style.strokeWidth=`${ie}`),me!==null&&(s.style.fillOpacity=`${me}`));}),ue){if(o)return e.style.clipPath=ke(1),g?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=ke(0);}else if(o)return g?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};let ft=typeof d=="string"?Ke(d):null;function Vt(){return !(ce===false||!Kt()||!z.length||!ft||ue||W!=="y"||we||u!==1||N!==0||te||U||k!==false||O||v||S||B>0||h||T||g||p||F||pe||Ee||A!=null||P!=null||M!=null||(x.start??"top bottom").trim()!=="top bottom"||(x.end??"bottom top").trim()!=="bottom top")}function qt(){let s=++Zt,a=`svg-scroll-draw-${s}`,w=`svg-scroll-draw-host-${s}`,ae=`--svg-scroll-draw-${s}`,De=L==="reverse"?"0":"var(--ssd-len)",Ie=L==="reverse"?"var(--ssd-len)":"0",Me=`stroke-dashoffset:${De};`,E=`stroke-dashoffset:${Ie};`;m&&(Me+=`opacity:${L==="reverse"?1:0};`,E+=`opacity:${L==="reverse"?0:1};`);let D=document.createElement("style");D.setAttribute("data-svg-scroll-draw",""),D.textContent=`@keyframes ${a}{from{${Me}}to{${E}}}.${w}{view-timeline-name:${ae};view-timeline-axis:block;}.${a}{animation-name:${a};animation-duration:auto;animation-timing-function:${ft};animation-fill-mode:both;animation-timeline:${ae};animation-range:cover 0% cover 100%;}`,document.head.appendChild(D),e.classList.add(w);function le(y,Y){y.style.setProperty("--ssd-len",String(C[Y])),y.style.strokeDasharray=`${C[Y]}`,y.style.strokeDashoffset="",y.style.opacity="",y.style.animationPlayState="",y.classList.add(a);}z.forEach(le);let b=false,H=-1;function q(){if(H>=0)return H;let y=e.getBoundingClientRect(),{tStart:Y,tEnd:Te}=xe({top:y.top,height:y.height},et(),ct(),Ce,Ne);return Se(Q(et(),Y,Te,u))}return {destroy(){e.classList.remove(w),z.forEach(y=>{y.classList.remove(a),y.style.removeProperty("--ssd-len"),y.style.animationPlayState="";}),D.remove();},replay(){b=false,H=-1,z.forEach(le);},pause(){b=true,z.forEach(y=>{y.style.animationPlayState="paused";});},resume(){b&&(b=false,z.forEach(y=>{y.style.animationPlayState="running";}));},seek(y){let Y=Math.min(1,Math.max(0,y));H=Y,b=true,z.forEach((Te,ye)=>{Te.classList.remove(a),Te.style.strokeDashoffset=L==="reverse"?`${C[ye]*Y}`:`${C[ye]*(1-Y)}`,m&&(Te.style.opacity=L==="reverse"?`${1-Y}`:`${Y}`);});},getProgress(){return q()},refresh(){z.forEach((y,Y)=>{C[Y]=_e(y),y.style.setProperty("--ssd-len",String(C[Y])),y.style.strokeDasharray=`${C[Y]}`;});}}}if(Vt())return tt(qt());function Wt(){let s=Math.max(1,K),a=0,w=0,ae=false;function De(b){let H=true;if(ue){let q=Math.min(1,Math.max(0,b/s)),y=Se(q);he=y,e.style.setProperty("--scroll-draw-progress",String(y)),e.style.clipPath=ke(L==="reverse"?1-y:y),h?.(y),q<1&&(H=false);}else z.forEach((q,y)=>{let Y=y*N*s,Te=Math.min(1,Math.max(0,(b-Y)/s)),ye=Se(Te);q.style.strokeDashoffset=L==="reverse"?`${C[y]*ye}`:`${C[y]*(1-ye)}`,m&&(q.style.opacity=L==="reverse"?`${1-ye}`:`${ye}`),ve&&oe?q.style.stroke=Ve(ve,oe,ye):oe&&(q.style.stroke=oe),ie!==null&&G!==null?q.style.strokeWidth=`${ie+(G-ie)*ye}`:G!==null&&(q.style.strokeWidth=`${G}`),me!==null&&X!==null?q.style.fillOpacity=`${me+(X-me)*ye}`:X!==null&&(q.style.fillOpacity=`${X}`),O&&q.tagName.toLowerCase()==="path"&&i[y]&&q.setAttribute("d",st(i[y],O,ye)),y===0&&(he=ye,h?.(ye),e.style.setProperty("--scroll-draw-progress",String(ye))),Te<1&&(H=false);});if(v){let q=Math.min(1,Math.max(0,b/s)),y=Se(q);for(let Y in v){let Te=parseFloat(Y);y>=Te&&!Re.has(Te)&&(Re.add(Te),v[Y]?.());}}return H}function Ie(b){if(j)return;let H=b-a;_||(_=true,T?.());let q=De(H);if(q&&!R){R=true,De(s*(1+Math.max(0,z.length-1)*N)),g?.(),Oe<(S==="infinite"?1/0:S??0)&&(Oe++,Fe=setTimeout(()=>{a=performance.now(),_=false,R=false,Re.clear(),Ge(),V=requestAnimationFrame(Ie);},re));return}q||(V=requestAnimationFrame(Ie));}function Me(){cancelAnimationFrame(V),clearTimeout(Fe),a=performance.now(),w=0,j=false,_=false,R=false,Oe=0,ae=true,he=0,Re.clear(),Ge(),V=requestAnimationFrame(Ie);}let E=new IntersectionObserver(b=>{b.forEach(H=>{H.isIntersecting&&!(te&&R)?Me():!H.isIntersecting&&!te&&!R&&(cancelAnimationFrame(V),clearTimeout(Fe),ae=false);});},{root:we??null,threshold:I,rootMargin:$}),D;function le(){clearTimeout(D),D=setTimeout(()=>{z.forEach((b,H)=>{C[H]=_e(b),b.style.strokeDasharray=`${C[H]}`;});},150);}return window.addEventListener("resize",le),window.addEventListener("orientationchange",le),B>0?setTimeout(()=>E.observe(e),B):E.observe(e),{destroy(){cancelAnimationFrame(V),clearTimeout(Fe),E.disconnect(),window.removeEventListener("resize",le),window.removeEventListener("orientationchange",le),clearTimeout(D);},replay(){Oe=0,Me();},pause(){j||!ae||(j=true,w=performance.now()-a,cancelAnimationFrame(V));},resume(){j&&(j=false,ae=true,a=performance.now()-w,V=requestAnimationFrame(Ie));},seek(b){let H=Math.min(1,Math.max(0,b));he=H,j=true,w=H*s,a=performance.now()-w,cancelAnimationFrame(V),De(w);},getProgress(){return he},refresh(){clearTimeout(D),z.forEach((b,H)=>{C[H]=_e(b),b.style.strokeDasharray=`${C[H]}`;});}}}if(se)return tt(Wt());mt();function je(){if(!Ae||j)return;let s=performance.now(),a=et();if(!He&&k===false&&a===at){V=requestAnimationFrame(je);return}He=false,at=a;let w=u;if(k!==false){let E=s-lt,D=E>0?Math.abs(a-(Be<0?a:Be))/E:0;w=u*Math.max(.2,1+D*(typeof k=="number"?k:1)*.04);}Be=a,lt=s;let ae=U?J===-1||a>=J?"forward":"reverse":L;J=a;let De=de-f,Ie=true,Me=De===0?0:(a-f)/De;if(isNaN(ze)||(ze<=0&&Me>0?p?.():ze>0&&Me<=0&&Ee?.(),ze<1&&Me>=1?F?.():ze>=1&&Me<1&&pe?.()),ze=Me,ue){let E=Se(Q(a,f,de,w));te&&!U&&(ge=Math.max(ge,E),E=ge),he=E,e.style.setProperty("--scroll-draw-progress",String(E));let D=ae==="reverse"?1-E:E;e.style.clipPath=ke(D),h?.(E),!_&&Q(a,f,de,w)>0&&(_=true,T?.()),E>=1&&!R?(R=true,g?.(),Oe<(S==="infinite"?1/0:S??0)&&(Oe++,Fe=setTimeout(()=>{ge=-1,_=false,R=false,e.style.clipPath=ke(0);},re))):E<1&&!te&&(R=false),V=requestAnimationFrame(je);return}if(z.forEach((E,D)=>{let le=D*N*De,b=Se(Q(a,f+le,de+le,w));te&&!U&&(ge=Math.max(ge,b),b=ge),he=b,E.style.strokeDashoffset=ae==="reverse"?`${C[D]*b}`:`${C[D]*(1-b)}`,m&&(E.style.opacity=ae==="reverse"?`${1-b}`:`${b}`),ve&&oe?E.style.stroke=Ve(ve,oe,b):oe&&(E.style.stroke=oe),ie!==null&&G!==null?E.style.strokeWidth=`${ie+(G-ie)*b}`:G!==null&&(E.style.strokeWidth=`${G}`),me!==null&&X!==null?E.style.fillOpacity=`${me+(X-me)*b}`:X!==null&&(E.style.fillOpacity=`${X}`),O&&E.tagName.toLowerCase()==="path"&&i[D]&&E.setAttribute("d",st(i[D],O,b)),D===0&&(h?.(b),e.style.setProperty("--scroll-draw-progress",String(b))),b<1&&(Ie=false);}),v){let E=Se(Q(a,f,de,w));for(let D in v){let le=parseFloat(D);E>=le&&!Re.has(le)&&(Re.add(le),v[D]?.());}}!_&&Q(a,f,de,w)>0&&(_=true,T?.()),Ie&&!R?(R=true,g?.(),Oe<(S==="infinite"?1/0:S??0)&&(Oe++,Fe=setTimeout(()=>{ge=-1,_=false,R=false,Re.clear(),Ge(),He=true;},re))):!Ie&&!te&&(R=false),V=requestAnimationFrame(je);}let rt=false;function Ye(){rt||(rt=true,V=requestAnimationFrame(function(){je();}));}function Ue(){rt=false,cancelAnimationFrame(V);}let nt=new IntersectionObserver(s=>{s.forEach(a=>{Ae=a.isIntersecting,Ae&&!j?(He=true,Ye()):Ue();});},{root:we??null,threshold:I,rootMargin:$});function pt(){z.forEach((s,a)=>{C[a]=_e(s),s.style.strokeDasharray=`${C[a]}`;}),mt(),He=true;}let Xe;function qe(){clearTimeout(Xe),Xe=setTimeout(pt,150);}window.addEventListener("resize",qe),window.addEventListener("orientationchange",qe);let We;return typeof ResizeObserver<"u"&&(We=new ResizeObserver(()=>qe()),We.observe(document.body),We.observe(document.documentElement),We.observe(e)),B>0?setTimeout(()=>nt.observe(e),B):nt.observe(e),tt({destroy(){cancelAnimationFrame(V),clearTimeout(Fe),Ue(),nt.disconnect(),We?.disconnect(),window.removeEventListener("resize",qe),window.removeEventListener("orientationchange",qe),clearTimeout(Xe),it();},replay(){ge=-1,J=-1,Be=-1,_=false,R=false,Oe=0,j=false,he=0,Re.clear(),clearTimeout(Fe),Ge(),He=true,Ae&&Ye();},pause(){j=true,Ue();},resume(){j&&(j=false,He=true,Ae&&Ye());},seek(s){let a=Math.min(1,Math.max(0,s));he=a,ge=a,j=true,Ue(),_t(a,L),He=true;},getProgress(){return he},refresh(){clearTimeout(Xe),pt(),Ae&&!j&&Ye();}},()=>({tStart:f,tEnd:de}))}function rr(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function xt(e){let r=[],n=/([\w]+)\(([^)]*)\)/g,t;for(;(t=n.exec(e))!==null;){let l=[],o=[],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),o.push(m?m[2]:"");}r.push({fn:t[1],nums:l,units:o});}return r}function nr(e,r,n){let t=xt(e),l=xt(r);return t.length===0||t.length!==l.length?n<1?e:r:t.map((o,c)=>{let u=l[c];return o.fn!==u.fn||o.nums.length!==u.nums.length?n<1?`${o.fn}(${o.nums.map((m,d)=>`${m}${o.units[d]}`).join(", ")})`:`${u.fn}(${u.nums.map((m,d)=>`${m}${u.units[d]}`).join(", ")})`:`${o.fn}(${o.nums.map((m,d)=>`${m+(u.nums[d]-m)*n}${o.units[d]}`).join(", ")})`}).join(" ")}function At(e,r,n){if(typeof e=="number"&&typeof r=="number")return String(e+(r-e)*n);let t=String(e),l=String(r);if(rr(t))return Ve(t,l,n);if(t.includes("("))return nr(t,l,n);let o=t.match(/^([-+]?[\d.]+)(.*)$/),c=l.match(/^([-+]?[\d.]+)(.*)$/);if(o&&c){let u=parseFloat(o[1]),m=parseFloat(c[1]);return `${u+(m-u)*n}${o[2]||c[2]}`}return n<1?t:l}function sr(e){return e.replace(/([A-Z])/g,r=>`-${r.toLowerCase()}`)}var or=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),ir=0,Mt="--scroll-draw-progress";function ar(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function Lt(e,r){let n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return n;let{props:t,trigger:l={},easing:o="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:$e,onComplete:W,onEnter:Z,onLeave:U,onEnterBack:B,onLeaveBack:A}=r,P=L&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,M=typeof o=="function"?o:ee[o]??ee["ease-out"],v=fe(l.start??"top bottom"),k=fe(l.end??"bottom top"),I=te??e,$=typeof d=="string"?document.querySelector(d):d??null,S=Object.entries(t).map(([i,f])=>({prop:sr(i),from:Array.isArray(f)?f[0]:"",to:Array.isArray(f)?f[1]:f}));function re(){let i=window.getComputedStyle(e);for(let f of S)f.from===""&&(f.from=i.getPropertyValue(f.prop).trim()||"0");}function O(){for(let i of S)e.style.setProperty(i.prop,String(i.to));}let ne=new Map;for(let i of [...S.map(f=>f.prop),Mt])ne.set(i,e.style.getPropertyValue(i));function se(){for(let[i,f]of ne)f?e.style.setProperty(i,f):e.style.removeProperty(i);}if(P)return O(),W?.(),{...n,destroy:se,getProgress:()=>1};re();let K=typeof o=="string"?Ke(o):null;function ce(){if(!x||!ar()||!K||m!=="y"||$||I!==e||u||c!==1||$e||W||Z||U||B||A||N!==false||(l.start??"top bottom").trim()!=="top bottom"||(l.end??"bottom top").trim()!=="bottom top")return false;for(let i of S)if(!or.has(i.prop))return false;return true}function h(){let i=`ssd-a-${++ir}`,f=S.map(J=>`${J.prop}:${J.from}`).join(";"),de=S.map(J=>`${J.prop}:${J.to}`).join(";"),R=document.createElement("style");R.setAttribute("data-ssd-animate",""),R.textContent=`@keyframes ${i}{from{${f}}to{${de}}}.${i}{animation-name:${i};animation-duration:auto;animation-timing-function:${K};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(R),e.classList.add(i);let _=()=>m==="x"?window.scrollX:window.scrollY,V=()=>m==="x"?window.innerWidth:window.innerHeight,Ae=()=>{let J=e.getBoundingClientRect();return xe({top:J.top,height:J.height},_(),V(),v,k)};Le(e,{type:"animate",getProgress:()=>ge.getProgress(),getTrigger:Ae});let ge={destroy(){e.classList.remove(i),R.remove(),e.style.animationPlayState="",se(),Pe(e);},replay(){e.classList.remove(i),e.offsetWidth,e.classList.add(i);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(J){let j=Math.min(1,Math.max(0,J));e.classList.remove(i);for(let he of S)e.style.setProperty(he.prop,At(he.from,he.to,j));},getProgress(){let{tStart:J,tEnd:j}=Ae();return M(Q(_(),J,j,c))}};return ge}if(ce())return h();let T=0,g=0,p=0,F=false,pe=false,Ee=-1,ue=0,Se=false,Ce=NaN,Ne=-1,we=0,ve=()=>$?m==="x"?$.scrollLeft:$.scrollTop:m==="x"?window.scrollX:window.scrollY,oe=()=>$?m==="x"?$.clientWidth:$.clientHeight:m==="x"?window.innerWidth:window.innerHeight;function ie(){let i=Qe(I,$,m),f=xe(i,i.scroll,oe(),v,k);T=f.tStart,g=f.tEnd;}function G(i){e.style.setProperty(Mt,String(i));for(let f of S)e.style.setProperty(f.prop,At(f.from,f.to,i));$e?.(i);}function me(i){if(isNaN(Ce)){Ce=i;return}Ce<=0&&i>0?Z?.():Ce>0&&i<=0&&A?.(),Ce<1&&i>=1?U?.():Ce>=1&&i<1&&B?.(),Ce=i;}function X(){if(!F||pe)return;let i=performance.now(),f=ve(),de=c;if(N!==false){let V=i-we,Ae=V>0?Math.abs(f-(Ne<0?f:Ne))/V:0;de=c*Math.max(.2,1+Ae*(typeof N=="number"?N:1)*.04);}Ne=f,we=i;let R=g===T?0:(f-T)/(g-T);me(R);let _=M(Q(f,T,g,de));u&&(Ee=Math.max(Ee,_),_=Ee),ue=_,G(_),_>=1&&!Se?(Se=true,W?.()):_<1&&!u&&(Se=false),p=requestAnimationFrame(X);}ie(),g===T&&be("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(ve(),T,g,c));u&&i>0&&(Ee=i),ue=i,G(i);}let ke=new IntersectionObserver(i=>{i.forEach(f=>{F=f.isIntersecting,F&&!pe?p=requestAnimationFrame(X):cancelAnimationFrame(p);});},{root:$??null}),z;function C(){clearTimeout(z),z=setTimeout(ie,150);}return window.addEventListener("resize",C),window.addEventListener("orientationchange",C),ke.observe(e),Le(e,{type:"animate",getProgress:()=>ue,getTrigger:()=>({tStart:T,tEnd:g})}),{destroy(){cancelAnimationFrame(p),ke.disconnect(),window.removeEventListener("resize",C),window.removeEventListener("orientationchange",C),clearTimeout(z),se(),Pe(e);},replay(){Ee=-1,Se=false,ue=0,pe=false,G(0);},pause(){pe=true,cancelAnimationFrame(p);},resume(){pe&&(pe=false,F&&(p=requestAnimationFrame(X)));},seek(i){let f=Math.min(1,Math.max(0,i));ue=f,Ee=f,pe=true,cancelAnimationFrame(p),G(f);},getProgress(){return ue}}}var ot={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Pt(e,r){if(typeof window>"u")return ot;let n=typeof e=="string"?document.querySelector(e):e;if(!n)return be("scrollCounter: element not found:",e),ot;let t=n,{from:l=0,to:o,format:c,easing:u="ease-out",trigger:m={},once:d=true,decimals:x,onComplete:N}=r,L=x!==void 0?h=>h.toFixed(x):c??(h=>String(Math.round(h))),te=typeof u=="function"?u:ee[u]??ee["ease-out"],$e=fe(m.start??"top 80%"),W=fe(m.end??"top 20%");if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return t.textContent=L(o),N?.(),ot;let U=0,B=0,A=0,P=false,M=false,v=-1,k=0,I=false,$=()=>window.scrollY,S=()=>window.innerHeight;function re(){let h=t.getBoundingClientRect(),T=xe({top:h.top,height:h.height},$(),S(),$e,W);U=T.tStart,B=T.tEnd;}function O(h){t.textContent=L(l+(o-l)*h),t.style.setProperty("--scroll-draw-progress",String(h));}function ne(){if(!P||M)return;let h=te(Q($(),U,B,1));d&&(v=Math.max(v,h),h=v),k=h,O(h),h>=1&&!I?(I=true,N?.()):h<1&&!d&&(I=false),A=requestAnimationFrame(ne);}re();{let h=te(Q($(),U,B,1));d&&h>0&&(v=h),k=h,O(h);}let se=new IntersectionObserver(h=>{h.forEach(T=>{P=T.isIntersecting,P&&!M?A=requestAnimationFrame(ne):cancelAnimationFrame(A);});}),K;function ce(){clearTimeout(K),K=setTimeout(re,150);}return window.addEventListener("resize",ce),window.addEventListener("orientationchange",ce),se.observe(t),Le(t,{type:"counter",getProgress:()=>k,getTrigger:()=>({tStart:U,tEnd:B})}),{destroy(){cancelAnimationFrame(A),se.disconnect(),window.removeEventListener("resize",ce),window.removeEventListener("orientationchange",ce),clearTimeout(K),Pe(t);},replay(){v=-1,I=false,k=0,M=false,O(0);},pause(){M=true,cancelAnimationFrame(A);},resume(){M&&(M=false,P&&(A=requestAnimationFrame(ne)));},seek(h){let T=Math.min(1,Math.max(0,h));k=T,v=T,M=true,cancelAnimationFrame(A),O(T);},getProgress(){return k}}}var $t={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Ct(e,r={}){if(typeof window>"u")return $t;let n=typeof e=="string"?document.querySelector(e):e;if(!n||n.tagName.toLowerCase()!=="video")return be("scrollVideo: <video> element not found:",e),$t;let t=n,{trigger:l={},easing:o="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 o=="function"?o:ee[o]??ee.linear,$e=fe(l.start??"top top"),W=fe(l.end??"bottom top");t.pause(),t.hasAttribute("preload")||(t.preload=m);let Z=r.from??0,U=r.to,B=0,A=0,P=0,M=false,v=false,k=-1,I=0,$=false,S=false,re=()=>u==="x"?window.scrollX:window.scrollY,O=()=>u==="x"?window.innerWidth:window.innerHeight;function ne(){let p=t.getBoundingClientRect(),F=u==="x"?p.left:p.top,pe=u==="x"?p.width:p.height,Ee=xe({top:F,height:pe},re(),O(),$e,W);B=Ee.tStart,A=Ee.tEnd;}function se(p){if(!S)return;let F=U??t.duration??0;t.currentTime=Z+(F-Z)*p,t.style.setProperty("--scroll-draw-progress",String(p)),N?.(p);}function K(){if(!M||v||!S)return;let p=te(Q(re(),B,A,1));c&&(k=Math.max(k,p),p=k),I=p,se(p),p>=1&&!$?($=true,x?.()):p<1&&!c&&($=false),P=requestAnimationFrame(K);}function ce(){if(S=true,U===void 0&&(U=t.duration),L){se(1),d?.();return}ne(),d?.(),M&&!v&&(P=requestAnimationFrame(K));}t.readyState>=1?ce():t.addEventListener("loadedmetadata",ce,{once:true}),S||ne();let h=new IntersectionObserver(p=>{p.forEach(F=>{M=F.isIntersecting,M&&!v&&S?P=requestAnimationFrame(K):cancelAnimationFrame(P);});}),T;function g(){clearTimeout(T),T=setTimeout(ne,150);}return window.addEventListener("resize",g),window.addEventListener("orientationchange",g),h.observe(t),Le(t,{type:"video",getProgress:()=>I,getTrigger:()=>({tStart:B,tEnd:A})}),{destroy(){cancelAnimationFrame(P),h.disconnect(),t.removeEventListener("loadedmetadata",ce),window.removeEventListener("resize",g),window.removeEventListener("orientationchange",g),clearTimeout(T),Pe(t);},replay(){k=-1,$=false,I=0,v=false,se(0);},pause(){v=true,cancelAnimationFrame(P);},resume(){v&&(v=false,M&&S&&(P=requestAnimationFrame(K)));},seek(p){let F=Math.min(1,Math.max(0,p));I=F,k=F,v=true,cancelAnimationFrame(P),se(F);},getProgress(){return I}}}function Ot(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 lr(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 kt(e){let r=Ot(e),n=new Map;for(let o of r){let c=o.offsetTop;n.has(c)||n.set(c,[]),n.get(c).push(o);}let t=[],l=Array.from(n.keys()).sort((o,c)=>o-c);for(let o of l){let c=n.get(o),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((o,c)=>{e.appendChild(o),c<t.length-1&&e.appendChild(document.createTextNode(" "));}),t}function cr(e,r,n,t){if(n<=1||t===0)return e;let l=(n-1)*t,o=r*t,c=o+(1-l);return c<=o?e>=o?1:0:Math.min(1,Math.max(0,(e-o)/(c-o)))}function ur(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 be("scrollText: element not found:",e),It;let t=n,{split:l="words",stagger:o=.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=fe(m.start??"top 85%"),$e=fe(m.end??"top 40%"),W=t.innerHTML;t.setAttribute("aria-label",t.textContent??"");let Z;l==="chars"?Z=lr(t):l==="lines"?Z=kt(t):Z=Ot(t);let U=Z.length;function B(g,p){u?.opacity!==void 0&&(g.style.opacity=String(u.opacity+(1-u.opacity)*p));let F=ur(p,u);F&&(g.style.transform=F);}function A(g){t.style.setProperty("--scroll-draw-progress",String(g)),Z.forEach((p,F)=>{let pe=L(cr(g,F,U,o));B(p,pe);});}if(N)return A(1),x?.(),{destroy(){t.innerHTML=W,t.removeAttribute("aria-label");},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};A(0);let P=0,M=0,v=0,k=false,I=false,$=-1,S=0,re=false,O=()=>window.scrollY,ne=()=>window.innerHeight;function se(){let g=t.getBoundingClientRect(),p=xe({top:g.top,height:g.height},O(),ne(),te,$e);P=p.tStart,M=p.tEnd;}function K(){if(!k||I)return;let g=Q(O(),P,M,1);d&&($=Math.max($,g),g=$),S=g,A(g),g>=1&&!re?(re=true,x?.()):g<1&&!d&&(re=false),v=requestAnimationFrame(K);}se();let ce=new IntersectionObserver(g=>{g.forEach(p=>{k=p.isIntersecting,k&&!I?v=requestAnimationFrame(K):cancelAnimationFrame(v);});}),h;function T(){clearTimeout(h),h=setTimeout(()=>{if(l==="lines"){let g=S;t.innerHTML=W,t.setAttribute("aria-label",t.textContent??""),Z=kt(t),A(g);}se();},150);}return window.addEventListener("resize",T),window.addEventListener("orientationchange",T),ce.observe(t),Le(t,{type:"text",getProgress:()=>S,getTrigger:()=>({tStart:P,tEnd:M})}),{destroy(){cancelAnimationFrame(v),ce.disconnect(),window.removeEventListener("resize",T),window.removeEventListener("orientationchange",T),clearTimeout(h),t.innerHTML=W,t.removeAttribute("aria-label"),Pe(t);},replay(){$=-1,re=false,S=0,I=false,A(0);},pause(){I=true,cancelAnimationFrame(v);},resume(){I&&(I=false,k&&(v=requestAnimationFrame(K)));},seek(g){let p=Math.min(1,Math.max(0,g));S=p,$=p,I=true,cancelAnimationFrame(v),A(p);},getProgress(){return S}}}var Ft=class{constructor(){this.instance=null;}init(r,n={}){return this.destroy(),this.instance=Tt(r,n),this}replay(){return this.instance?.replay(),this}pause(){return this.instance?.pause(),this}resume(){return this.instance?.resume(),this}seek(r){return this.instance?.seek(r),this}getProgress(){return this.instance?.getProgress()??0}destroy(){return this.instance?.destroy(),this.instance=null,this}},Rt=class{constructor(){this.instance=null;}init(r,n){return this.destroy(),this.instance=Lt(r,n),this}replay(){return this.instance?.replay(),this}pause(){return this.instance?.pause(),this}resume(){return this.instance?.resume(),this}seek(r){return this.instance?.seek(r),this}getProgress(){return this.instance?.getProgress()??0}destroy(){return this.instance?.destroy(),this.instance=null,this}},Ht=class{constructor(){this.instance=null;}init(r,n){return this.destroy(),this.instance=Pt(r,n),this}replay(){return this.instance?.replay(),this}pause(){return this.instance?.pause(),this}resume(){return this.instance?.resume(),this}seek(r){return this.instance?.seek(r),this}getProgress(){return this.instance?.getProgress()??0}destroy(){return this.instance?.destroy(),this.instance=null,this}},Nt=class{constructor(){this.instance=null;}init(r,n={}){return this.destroy(),this.instance=Ct(r,n),this}replay(){return this.instance?.replay(),this}pause(){return this.instance?.pause(),this}resume(){return this.instance?.resume(),this}seek(r){return this.instance?.seek(r),this}getProgress(){return this.instance?.getProgress()??0}destroy(){return this.instance?.destroy(),this.instance=null,this}},zt=class{constructor(){this.instance=null;}init(r,n={}){return this.destroy(),this.instance=Dt(r,n),this}replay(){return this.instance?.replay(),this}pause(){return this.instance?.pause(),this}resume(){return this.instance?.resume(),this}seek(r){return this.instance?.seek(r),this}getProgress(){return this.instance?.getProgress()??0}destroy(){return this.instance?.destroy(),this.instance=null,this}};export{Rt as ScrollAnimateRef,Ht as ScrollCounterRef,Ft as ScrollDrawRef,zt as ScrollTextRef,Nt as ScrollVideoRef};
|