svg-scroll-draw 2.16.1 → 2.17.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 +7 -2
- package/dist/angular/index.cjs +2 -2
- package/dist/angular/index.d.mts +45 -49
- package/dist/angular/index.d.ts +45 -49
- package/dist/angular/index.mjs +1 -1
- package/dist/astro/index.cjs +2 -2
- package/dist/astro/index.mjs +1 -1
- package/dist/cdn/svg-scroll-draw.dev.global.js +5 -2
- package/dist/cdn/svg-scroll-draw.global.js +2 -2
- package/dist/{chunk-OWMO2S3V.mjs → chunk-DIMNQPW5.mjs} +1 -1
- package/dist/chunk-HMSNYXKW.mjs +1 -0
- package/dist/chunk-LINFV2GK.mjs +3 -0
- package/dist/chunk-XSVTHCLO.mjs +1 -0
- package/dist/group/index.cjs +2 -2
- package/dist/group/index.mjs +1 -1
- package/dist/index.cjs +3 -3
- package/dist/index.mjs +1 -1
- package/dist/nuxt/index.cjs +2 -2
- package/dist/nuxt/index.mjs +1 -1
- package/dist/react/index.cjs +3 -3
- package/dist/react/index.mjs +1 -1
- package/dist/solid/index.cjs +3 -3
- package/dist/solid/index.d.mts +16 -11
- package/dist/solid/index.d.ts +16 -11
- package/dist/solid/index.mjs +1 -1
- package/dist/svelte/index.cjs +3 -3
- package/dist/svelte/index.d.mts +5 -5
- package/dist/svelte/index.d.ts +5 -5
- package/dist/svelte/index.mjs +1 -1
- package/dist/vue/index.cjs +2 -2
- package/dist/vue/index.d.mts +14 -7
- package/dist/vue/index.d.ts +14 -7
- package/dist/vue/index.mjs +1 -1
- package/dist/web-component/index.cjs +2 -2
- package/dist/web-component/index.mjs +1 -1
- package/package.json +1 -1
- package/dist/chunk-E4M2PB7B.mjs +0 -1
- package/dist/chunk-WDIHLRZZ.mjs +0 -3
package/README.md
CHANGED
|
@@ -325,6 +325,11 @@ import { ScrollDraw } from 'svg-scroll-draw/vue';
|
|
|
325
325
|
</template>
|
|
326
326
|
```
|
|
327
327
|
|
|
328
|
+
> **Options are live** (from 2.17.0): React and Vue component props, Vue composable options passed as
|
|
329
|
+
> a getter or ref, Solid options passed as an accessor, Svelte action parameters and Angular's
|
|
330
|
+
> `update()` from `ngOnChanges` all rebuild the animation when an option really changes. Equal
|
|
331
|
+
> options — an inline object recreated each render, a new callback — keep the running one.
|
|
332
|
+
|
|
328
333
|
#### scrollDraw options
|
|
329
334
|
|
|
330
335
|
| Option | Type | Default | Description |
|
|
@@ -624,8 +629,8 @@ devtools.highlight('#my-element'); // outline for 2 seconds
|
|
|
624
629
|
| Entry | Gzipped |
|
|
625
630
|
|---|---|
|
|
626
631
|
| `svg-scroll-draw` (main, every core API) | 10.7 KB |
|
|
627
|
-
| `svg-scroll-draw/react` (includes the engine) |
|
|
628
|
-
| `svg-scroll-draw` + `svg-scroll-draw/react` (together; the engine ships once) | 13.
|
|
632
|
+
| `svg-scroll-draw/react` (includes the engine) | 12.0 KB |
|
|
633
|
+
| `svg-scroll-draw` + `svg-scroll-draw/react` (together; the engine ships once) | 13.4 KB |
|
|
629
634
|
| `svg-scroll-draw/reveal` | 5.0 KB |
|
|
630
635
|
| `svg-scroll-draw/text` | 2.8 KB |
|
|
631
636
|
| `svg-scroll-draw/video` | 2.3 KB |
|
package/dist/angular/index.cjs
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
'use strict';function
|
|
1
|
+
'use strict';function Zt({bounces:e=3,decay:n=.5}={}){let r=Math.max(1,Math.round(e)),t=Math.max(.01,Math.min(.99,n)),l=Math.sqrt(t),s=0,c=[];for(let p=0;p<r;p++){let T=Math.pow(l,p);c.push(T),s+=T;}let u=[0],m=0;for(let p=0;p<r;p++)m+=c[p]/s,u.push(m);return p=>{if(p<=0)return 0;if(p>=1)return 1;for(let T=0;T<r;T++)if(p<=u[T+1]){let z=(p-u[T])/(u[T+1]-u[T]);if(T===0)return z*(2-z);let M=1-Math.pow(t,T);return M+(1-M)*(2*z-1)*(2*z-1)}return 1}}function Jt({amplitude:e=1,period:n=.4}={}){let r=Math.max(1,e),t=Math.max(.1,n),l=r<=1?t/4:t/(2*Math.PI)*Math.asin(1/r);return s=>s<=0?0:s>=1?1:r*Math.pow(2,-10*s)*Math.sin((s-l)*(2*Math.PI)/t)+1}var re={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:Zt(),elastic:Jt()};function ht(e,n,r){return Math.min(r,Math.max(n,e))}function de(e="top bottom"){let n=e.trim();if(/^\d+(\.\d+)?%$/.test(n))return {element:"top",viewport:n};let[r="top",t="bottom"]=n.split(/\s+/).filter(Boolean);return {element:r,viewport:t}}function bt(e,n,r,t){switch(t){case "top":return e+r;case "center":return e+r+n/2;case "bottom":return e+r+n;default:return e+r}}function wt(e,n){if(/^\d+(\.\d+)?%$/.test(e))return n*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return n/2;case "bottom":return n;default:return n}}function J(e,n,r,t){return r===n?0:ht((e-n)/(r-n)*t,0,1)}function Te(e,n,r,t,l){let s=bt(e.top,e.height,n,t.element)-wt(t.viewport,r),c=bt(e.top,e.height,n,l.element)-wt(l.viewport,r);return {tStart:s,tEnd:c}}function Je(e,n,r){let t=e.getBoundingClientRect(),l=r==="x"?t.width:t.height;return n?{top:r==="x"?t.left-n.getBoundingClientRect().left+n.scrollLeft:t.top-n.getBoundingClientRect().top+n.scrollTop,height:l,scroll:0}:{top:r==="x"?t.left:t.top,height:l,scroll:r==="x"?window.scrollX:window.scrollY}}function qe(e){let n=e.tagName.toLowerCase();if(n==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),t=parseFloat(e.getAttribute("height")??"0");return 2*(r+t)}if(n==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function vt(e){let n=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(n)return [parseInt(n[1]+n[1],16),parseInt(n[2]+n[2],16),parseInt(n[3]+n[3],16)];let r=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(r)return [parseInt(r[1],16),parseInt(r[2],16),parseInt(r[3],16)];let t=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return t?[parseInt(t[1]),parseInt(t[2]),parseInt(t[3])]:null}function We(e,n,r){let t=vt(e),l=vt(n);return !t||!l?e:`rgb(${Math.round(t[0]+(l[0]-t[0])*r)},${Math.round(t[1]+(l[1]-t[1])*r)},${Math.round(t[2]+(l[2]-t[2])*r)})`}var Et={sketch:{easing:"ease-in",stagger:.1,speed:.9,fade:false},reveal:{easing:"ease-out",fade:true,speed:1.2,once:true},typewriter:{easing:"linear",stagger:.05,speed:1.5},cinematic:{easing:"ease-in-out",fade:true,speed:.75},spring:{easing:"spring",speed:1.1}};var je=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function he(e,...n){je&&console.warn(`[svg-scroll-draw] ${e}`,...n);}var er="cubic-bezier(0.333333, 0, 0.666667, 0.333333)",tr="cubic-bezier(0.333333, 0.666667, 0.666667, 1)",St=33;function rr(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timing-function: linear(0, 1)")}function nr(e){let n=[];for(let r=0;r<St;r++){let t=r/(St-1);n.push(String(Math.round(e(t)*1e5)/1e5));}return `linear(${n.join(",")})`}function et(e){switch(e){case "linear":return "linear";case "ease-in":return er;case "ease-out":return tr;case "ease-in-out":return rr()?nr(re["ease-in-out"]):null;default:return null}}var Tt=Symbol.for("svg-scroll-draw.registry");function xt(){let e=globalThis;return e[Tt]||(e[Tt]=new Map)}function Ae(e,n){xt().set(e,n);}function Le(e){xt().delete(e);}var or=0;function sr(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")&&CSS.supports("view-timeline-name: --x")}function Mt(e,n){let r="";try{r=getComputedStyle(e).getPropertyValue(n).trim();}catch{}return r||(e.getAttribute(n)??"").trim()}var At=new Set(["","none","transparent","rgba(0, 0, 0, 0)"]);function ir(e){if(!je)return;let n=Mt(e,"stroke");if(!n||n==="none"){he("Element has no stroke \u2014 path will not be visible.",e);return}let r=(e.getAttribute("fill")??"").trim();r&&!At.has(r)&&!At.has(Mt(e,"fill"))&&he("Element has a fill \u2014 it may obscure the stroke animation.",e);}function ar(e,n,r){let t=document.createElement("div");t.setAttribute("data-svg-scroll-draw-debug",""),t.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function l(){let s=r==="x"?window.scrollX:window.scrollY,c=e-s,u=n-s,m=r==="x";t.innerHTML=`
|
|
2
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 xt=/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,At=/[MmLlHhVvCcSsQqTtAaZz]/g;function nr(e,r,n){if(!Be)return;let t=(e.match(At)??[]).join("").toUpperCase(),l=(r.match(At)??[]).join("").toUpperCase(),o=(e.match(xt)??[]).length,c=(r.match(xt)??[]).length;if(t!==l){we(`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&&we(`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 Mt(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:n,...t}=r,l=n?{...bt[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:p="linear",trigger:T={},stagger:z=0,direction:A="forward",once:ne=false,debug:Pe=false,axis:B="y",scrollContainer:J,autoReverse:X=false,delay:G=0,strokeColor:M,strokeWidth:P,fillOpacity:L,waypoints:w,velocityScale:I=false,threshold:O=0,rootMargin:C="0px",repeat:E=0,repeatDelay:se=0,morphTo:F,clip:oe,autoplay:ie=false,duration:ee=1e3,native:ae=true,onProgress:d,onStart:x,onComplete:g,onEnter:$,onLeave:S,onEnterBack:N,onLeaveBack:fe}=l,Q=oe===true?"left":typeof oe=="string"?oe:false,Se=typeof p=="function"?p:re[p]??re.linear,Ce=de(T.start??"top bottom"),He=de(T.end??"bottom top"),ve=typeof J=="string"?document.querySelector(J):J??null,Ee=Array.isArray(M)?M[0]:null,le=Array.isArray(M)?M[1]:typeof M=="string"?M:null,ce=Array.isArray(P)?P[0]:null,j=Array.isArray(P)?P[1]:typeof P=="number"?P:null,pe=Array.isArray(L)?L[0]:null,Z=Array.isArray(L)?L[1]:typeof L=="number"?L:null;function ke(s){let a=s*100;switch(Q){case "right":return `inset(0 0 0 ${100-a}%)`;case "top":return `inset(0 0 ${100-a}% 0)`;case "bottom":return `inset(${100-a}% 0 0 0)`;case "center":return `circle(${s*150}% at 50% 50%)`;default:return `inset(0 ${100-a}% 0 0)`}}let _=Q?[]:Array.from(e.querySelectorAll(c)),k=[],i=[],f=0,ge=0,R=false,V=false,q=0,Ae=false,he=-1,te=-1,U=false,ye=0,Oe=0,De,Je=null;function it(){Je?.destroy(),Je=null;}let Ne=new Set,at=NaN,Re=true,Ge=-1,lt=performance.now(),ze=NaN;function et(){return ve?B==="x"?ve.scrollLeft:ve.scrollTop:B==="x"?window.scrollX:window.scrollY}function ct(){return ve?B==="x"?ve.clientWidth:ve.clientHeight:B==="x"?window.innerWidth:window.innerHeight}function ut(){let s=Ze(e,ve,B);return xe(s,s.scroll,ct(),Ce,He)}function mt(){(({tStart:f,tEnd:ge}=ut())),Pe&&Be&&(it(),Je=rr(f,ge,B));}function tt(s,a=ut){Le(e,{type:"draw",getProgress:()=>s.getProgress(),getTrigger:a});let b=s.destroy;return s.destroy=()=>{b.call(s),$e(e);},s}function Wt(s,a){if(e.style.setProperty("--scroll-draw-progress",String(s)),Q){let b=a==="reverse"?1-s:s;e.style.clipPath=ke(b);return}_.forEach((b,ue)=>{b.style.strokeDashoffset=a==="reverse"?`${k[ue]*s}`:`${k[ue]*(1-s)}`,m&&(b.style.opacity=a==="reverse"?`${1-s}`:`${s}`),Ee&&le?b.style.stroke=Ve(Ee,le,s):le&&(b.style.stroke=le),ce!==null&&j!==null?b.style.strokeWidth=`${ce+(j-ce)*s}`:j!==null&&(b.style.strokeWidth=`${j}`),pe!==null&&Z!==null?b.style.fillOpacity=`${pe+(Z-pe)*s}`:Z!==null&&(b.style.fillOpacity=`${Z}`),F&&b.tagName.toLowerCase()==="path"&&i[ue]&&b.setAttribute("d",st(i[ue],F,s));});}function je(){if(e.style.setProperty("--scroll-draw-progress","0"),Q){e.style.clipPath=ke(0);return}_.forEach((s,a)=>{s.style.strokeDasharray=`${k[a]}`,s.style.strokeDashoffset=A==="reverse"?"0":`${k[a]}`,m?s.style.opacity=A==="reverse"?"1":"0":s.style.opacity="",Ee&&(s.style.stroke=Ee),ce!==null&&(s.style.strokeWidth=`${ce}`),pe!==null&&(s.style.fillOpacity=`${pe}`),F&&s.tagName.toLowerCase()==="path"&&i[a]&&s.setAttribute("d",i[a]);});}if(_.forEach(s=>{tr(s);let a=_e(s);k.push(a);let b=s.tagName.toLowerCase()==="path";b?i.push(s.getAttribute("d")??""):i.push(""),F&&(b?nr(i[i.length-1],F,s):we(`morphTo only applies to <path> elements \u2014 ignored on <${s.tagName}>.`,s)),o?(s.style.strokeDasharray=`${a}`,s.style.strokeDashoffset=A==="reverse"?`${a}`:"0",m&&(s.style.opacity="1"),le&&(s.style.stroke=le),j!==null&&(s.style.strokeWidth=`${j}`),Z!==null&&(s.style.fillOpacity=`${Z}`),F&&s.tagName.toLowerCase()==="path"&&s.setAttribute("d",F)):(s.style.strokeDasharray=`${a}`,s.style.strokeDashoffset=A==="reverse"?"0":`${a}`,m?s.style.opacity=A==="reverse"?"1":"0":s.style.opacity="",Ee&&(s.style.stroke=Ee),ce!==null&&(s.style.strokeWidth=`${ce}`),pe!==null&&(s.style.fillOpacity=`${pe}`));}),Q){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 p=="string"?Ke(p):null;function Bt(){return !(ae===false||!er()||!_.length||!ft||Q||B!=="y"||ve||u!==1||z!==0||ne||X||I!==false||F||w||E||G>0||d||x||g||$||S||N||fe||M!=null||P!=null||L!=null||(T.start??"top bottom").trim()!=="top bottom"||(T.end??"bottom top").trim()!=="bottom top")}function Gt(){let s=++Jt,a=`svg-scroll-draw-${s}`,b=`svg-scroll-draw-host-${s}`,ue=`--svg-scroll-draw-${s}`,Fe=A==="reverse"?"0":"var(--ssd-len)",Ie=A==="reverse"?"var(--ssd-len)":"0",Me=`stroke-dashoffset:${Fe};`,v=`stroke-dashoffset:${Ie};`;m&&(Me+=`opacity:${A==="reverse"?1:0};`,v+=`opacity:${A==="reverse"?0:1};`);let D=document.createElement("style");D.setAttribute("data-svg-scroll-draw",""),D.textContent=`@keyframes ${a}{from{${Me}}to{${v}}}.${b}{view-timeline-name:${ue};view-timeline-axis:block;}.${a}{animation-name:${a};animation-duration:auto;animation-timing-function:${ft};animation-fill-mode:both;animation-timeline:${ue};animation-range:cover 0% cover 100%;}`,document.head.appendChild(D),e.classList.add(b);function me(h,Y){h.style.setProperty("--ssd-len",String(k[Y])),h.style.strokeDasharray=`${k[Y]}`,h.style.strokeDashoffset="",h.style.opacity="",h.style.animationPlayState="",h.classList.add(a);}_.forEach(me);let y=false,H=-1;function W(){if(H>=0)return H;let h=e.getBoundingClientRect(),{tStart:Y,tEnd:Te}=xe({top:h.top,height:h.height},et(),ct(),Ce,He);return Se(K(et(),Y,Te,u))}return {destroy(){e.classList.remove(b),_.forEach(h=>{h.classList.remove(a),h.style.removeProperty("--ssd-len"),h.style.animationPlayState="";}),D.remove();},replay(){y=false,H=-1,_.forEach(me);},pause(){y=true,_.forEach(h=>{h.style.animationPlayState="paused";});},resume(){y&&(y=false,_.forEach(h=>{h.style.animationPlayState="running";}));},seek(h){let Y=Math.min(1,Math.max(0,h));H=Y,y=true,_.forEach((Te,be)=>{Te.classList.remove(a),Te.style.strokeDashoffset=A==="reverse"?`${k[be]*Y}`:`${k[be]*(1-Y)}`,m&&(Te.style.opacity=A==="reverse"?`${1-Y}`:`${Y}`);});},getProgress(){return W()},refresh(){_.forEach((h,Y)=>{k[Y]=_e(h),h.style.setProperty("--ssd-len",String(k[Y])),h.style.strokeDasharray=`${k[Y]}`;});}}}if(Bt())return tt(Gt());function jt(){let s=Math.max(1,ee),a=0,b=0,ue=false;function Fe(y){let H=true;if(Q){let W=Math.min(1,Math.max(0,y/s)),h=Se(W);ye=h,e.style.setProperty("--scroll-draw-progress",String(h)),e.style.clipPath=ke(A==="reverse"?1-h:h),d?.(h),W<1&&(H=false);}else _.forEach((W,h)=>{let Y=h*z*s,Te=Math.min(1,Math.max(0,(y-Y)/s)),be=Se(Te);W.style.strokeDashoffset=A==="reverse"?`${k[h]*be}`:`${k[h]*(1-be)}`,m&&(W.style.opacity=A==="reverse"?`${1-be}`:`${be}`),Ee&&le?W.style.stroke=Ve(Ee,le,be):le&&(W.style.stroke=le),ce!==null&&j!==null?W.style.strokeWidth=`${ce+(j-ce)*be}`:j!==null&&(W.style.strokeWidth=`${j}`),pe!==null&&Z!==null?W.style.fillOpacity=`${pe+(Z-pe)*be}`:Z!==null&&(W.style.fillOpacity=`${Z}`),F&&W.tagName.toLowerCase()==="path"&&i[h]&&W.setAttribute("d",st(i[h],F,be)),h===0&&(ye=be,d?.(be),e.style.setProperty("--scroll-draw-progress",String(be))),Te<1&&(H=false);});if(w){let W=Math.min(1,Math.max(0,y/s)),h=Se(W);for(let Y in w){let Te=parseFloat(Y);h>=Te&&!Ne.has(Te)&&(Ne.add(Te),w[Y]?.());}}return H}function Ie(y){if(U)return;let H=y-a;V||(V=true,x?.());let W=Fe(H);if(W&&!R){R=true,Fe(s*(1+Math.max(0,_.length-1)*z)),g?.(),Oe<(E==="infinite"?1/0:E??0)&&(Oe++,De=setTimeout(()=>{a=performance.now(),V=false,R=false,Ne.clear(),je(),q=requestAnimationFrame(Ie);},se));return}W||(q=requestAnimationFrame(Ie));}function Me(){cancelAnimationFrame(q),clearTimeout(De),a=performance.now(),b=0,U=false,V=false,R=false,Oe=0,ue=true,ye=0,Ne.clear(),je(),q=requestAnimationFrame(Ie);}let v=new IntersectionObserver(y=>{y.forEach(H=>{H.isIntersecting&&!(ne&&R)?Me():!H.isIntersecting&&!ne&&!R&&(cancelAnimationFrame(q),clearTimeout(De),ue=false);});},{root:ve??null,threshold:O,rootMargin:C}),D;function me(){clearTimeout(D),D=setTimeout(()=>{_.forEach((y,H)=>{k[H]=_e(y),y.style.strokeDasharray=`${k[H]}`;});},150);}return window.addEventListener("resize",me),window.addEventListener("orientationchange",me),G>0?setTimeout(()=>v.observe(e),G):v.observe(e),{destroy(){cancelAnimationFrame(q),clearTimeout(De),v.disconnect(),window.removeEventListener("resize",me),window.removeEventListener("orientationchange",me),clearTimeout(D);},replay(){Oe=0,Me();},pause(){U||!ue||(U=true,b=performance.now()-a,cancelAnimationFrame(q));},resume(){U&&(U=false,ue=true,a=performance.now()-b,q=requestAnimationFrame(Ie));},seek(y){let H=Math.min(1,Math.max(0,y));ye=H,U=true,b=H*s,a=performance.now()-b,cancelAnimationFrame(q),Fe(b);},getProgress(){return ye},refresh(){clearTimeout(D),_.forEach((y,H)=>{k[H]=_e(y),y.style.strokeDasharray=`${k[H]}`;});}}}if(ie)return tt(jt());mt();function Ue(){if(!Ae||U)return;let s=performance.now(),a=et();if(!Re&&I===false&&a===at){q=requestAnimationFrame(Ue);return}Re=false,at=a;let b=u;if(I!==false){let v=s-lt,D=v>0?Math.abs(a-(Ge<0?a:Ge))/v:0;b=u*Math.max(.2,1+D*(typeof I=="number"?I:1)*.04);}Ge=a,lt=s;let ue=X?te===-1||a>=te?"forward":"reverse":A;te=a;let Fe=ge-f,Ie=true,Me=Fe===0?0:(a-f)/Fe;if(isNaN(ze)||(ze<=0&&Me>0?$?.():ze>0&&Me<=0&&fe?.(),ze<1&&Me>=1?S?.():ze>=1&&Me<1&&N?.()),ze=Me,Q){let v=Se(K(a,f,ge,b));ne&&!X&&(he=Math.max(he,v),v=he),ye=v,e.style.setProperty("--scroll-draw-progress",String(v));let D=ue==="reverse"?1-v:v;e.style.clipPath=ke(D),d?.(v),!V&&K(a,f,ge,b)>0&&(V=true,x?.()),v>=1&&!R?(R=true,g?.(),Oe<(E==="infinite"?1/0:E??0)&&(Oe++,De=setTimeout(()=>{he=-1,V=false,R=false,e.style.clipPath=ke(0);},se))):v<1&&!ne&&(R=false),q=requestAnimationFrame(Ue);return}if(_.forEach((v,D)=>{let me=D*z*Fe,y=Se(K(a,f+me,ge+me,b));ne&&!X&&(he=Math.max(he,y),y=he),ye=y,v.style.strokeDashoffset=ue==="reverse"?`${k[D]*y}`:`${k[D]*(1-y)}`,m&&(v.style.opacity=ue==="reverse"?`${1-y}`:`${y}`),Ee&&le?v.style.stroke=Ve(Ee,le,y):le&&(v.style.stroke=le),ce!==null&&j!==null?v.style.strokeWidth=`${ce+(j-ce)*y}`:j!==null&&(v.style.strokeWidth=`${j}`),pe!==null&&Z!==null?v.style.fillOpacity=`${pe+(Z-pe)*y}`:Z!==null&&(v.style.fillOpacity=`${Z}`),F&&v.tagName.toLowerCase()==="path"&&i[D]&&v.setAttribute("d",st(i[D],F,y)),D===0&&(d?.(y),e.style.setProperty("--scroll-draw-progress",String(y))),y<1&&(Ie=false);}),w){let v=Se(K(a,f,ge,b));for(let D in w){let me=parseFloat(D);v>=me&&!Ne.has(me)&&(Ne.add(me),w[D]?.());}}!V&&K(a,f,ge,b)>0&&(V=true,x?.()),Ie&&!R?(R=true,g?.(),Oe<(E==="infinite"?1/0:E??0)&&(Oe++,De=setTimeout(()=>{he=-1,V=false,R=false,Ne.clear(),je(),Re=true;},se))):!Ie&&!ne&&(R=false),q=requestAnimationFrame(Ue);}let rt=false;function Ye(){rt||(rt=true,q=requestAnimationFrame(function(){Ue();}));}function Xe(){rt=false,cancelAnimationFrame(q);}let nt=new IntersectionObserver(s=>{s.forEach(a=>{Ae=a.isIntersecting,Ae&&!U?(Re=true,Ye()):Xe();});},{root:ve??null,threshold:O,rootMargin:C});function pt(){_.forEach((s,a)=>{k[a]=_e(s),s.style.strokeDasharray=`${k[a]}`;}),mt(),Re=true;}let Qe;function qe(){clearTimeout(Qe),Qe=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)),G>0?setTimeout(()=>nt.observe(e),G):nt.observe(e),tt({destroy(){cancelAnimationFrame(q),clearTimeout(De),Xe(),nt.disconnect(),We?.disconnect(),window.removeEventListener("resize",qe),window.removeEventListener("orientationchange",qe),clearTimeout(Qe),it();},replay(){he=-1,te=-1,Ge=-1,V=false,R=false,Oe=0,U=false,ye=0,Ne.clear(),clearTimeout(De),je(),Re=true,Ae&&Ye();},pause(){U=true,Xe();},resume(){U&&(U=false,Re=true,Ae&&Ye());},seek(s){let a=Math.min(1,Math.max(0,s));ye=a,he=a,U=true,Xe(),Wt(a,A),Re=true;},getProgress(){return ye},refresh(){clearTimeout(Qe),pt(),Ae&&!U&&Ye();}},()=>({tStart:f,tEnd:ge}))}function sr(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function Lt(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 or(e,r,n){let t=Lt(e),l=Lt(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,p)=>`${m}${o.units[p]}`).join(", ")})`:`${u.fn}(${u.nums.map((m,p)=>`${m}${u.units[p]}`).join(", ")})`:`${o.fn}(${o.nums.map((m,p)=>`${m+(u.nums[p]-m)*n}${o.units[p]}`).join(", ")})`}).join(" ")}function $t(e,r,n){if(typeof e=="number"&&typeof r=="number")return String(e+(r-e)*n);let t=String(e),l=String(r);if(sr(t))return Ve(t,l,n);if(t.includes("("))return or(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 ir(e){return e.replace(/([A-Z])/g,r=>`-${r.toLowerCase()}`)}var ar=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),lr=0,Pt="--scroll-draw-progress";function cr(){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:l={},easing:o="ease-out",speed:c=1,once:u=false,axis:m="y",scrollContainer:p,native:T=true,velocityScale:z=false,respectReducedMotion:A=true,triggerElement:ne,onProgress:Pe,onComplete:B,onEnter:J,onLeave:X,onEnterBack:G,onLeaveBack:M}=r,P=A&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,L=typeof o=="function"?o:re[o]??re["ease-out"],w=de(l.start??"top bottom"),I=de(l.end??"bottom top"),O=ne??e,C=typeof p=="string"?document.querySelector(p):p??null,E=Object.entries(t).map(([i,f])=>({prop:ir(i),from:Array.isArray(f)?f[0]:"",to:Array.isArray(f)?f[1]:f}));function se(){let i=window.getComputedStyle(e);for(let f of E)f.from===""&&(f.from=i.getPropertyValue(f.prop).trim()||"0");}function F(){for(let i of E)e.style.setProperty(i.prop,String(i.to));}let oe=new Map;for(let i of [...E.map(f=>f.prop),Pt])oe.set(i,e.style.getPropertyValue(i));function ie(){for(let[i,f]of oe)f?e.style.setProperty(i,f):e.style.removeProperty(i);}if(P)return F(),B?.(),{...n,destroy:ie,getProgress:()=>1};se();let ee=typeof o=="string"?Ke(o):null;function ae(){if(!T||!cr()||!ee||m!=="y"||C||O!==e||u||c!==1||Pe||B||J||X||G||M||z!==false||(l.start??"top bottom").trim()!=="top bottom"||(l.end??"bottom top").trim()!=="bottom top")return false;for(let i of E)if(!ar.has(i.prop))return false;return true}function d(){let i=`ssd-a-${++lr}`,f=E.map(te=>`${te.prop}:${te.from}`).join(";"),ge=E.map(te=>`${te.prop}:${te.to}`).join(";"),R=document.createElement("style");R.setAttribute("data-ssd-animate",""),R.textContent=`@keyframes ${i}{from{${f}}to{${ge}}}.${i}{animation-name:${i};animation-duration:auto;animation-timing-function:${ee};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(R),e.classList.add(i);let V=()=>m==="x"?window.scrollX:window.scrollY,q=()=>m==="x"?window.innerWidth:window.innerHeight,Ae=()=>{let te=e.getBoundingClientRect();return xe({top:te.top,height:te.height},V(),q(),w,I)};Le(e,{type:"animate",getProgress:()=>he.getProgress(),getTrigger:Ae});let he={destroy(){e.classList.remove(i),R.remove(),e.style.animationPlayState="",ie(),$e(e);},replay(){e.classList.remove(i),e.offsetWidth,e.classList.add(i);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(te){let U=Math.min(1,Math.max(0,te));e.classList.remove(i);for(let ye of E)e.style.setProperty(ye.prop,$t(ye.from,ye.to,U));},getProgress(){let{tStart:te,tEnd:U}=Ae();return L(K(V(),te,U,c))}};return he}if(ae())return d();let x=0,g=0,$=0,S=false,N=false,fe=-1,Q=0,Se=false,Ce=NaN,He=-1,ve=0,Ee=()=>C?m==="x"?C.scrollLeft:C.scrollTop:m==="x"?window.scrollX:window.scrollY,le=()=>C?m==="x"?C.clientWidth:C.clientHeight:m==="x"?window.innerWidth:window.innerHeight;function ce(){let i=Ze(O,C,m),f=xe(i,i.scroll,le(),w,I);x=f.tStart,g=f.tEnd;}function j(i){e.style.setProperty(Pt,String(i));for(let f of E)e.style.setProperty(f.prop,$t(f.from,f.to,i));Pe?.(i);}function pe(i){if(isNaN(Ce)){Ce=i;return}Ce<=0&&i>0?J?.():Ce>0&&i<=0&&M?.(),Ce<1&&i>=1?X?.():Ce>=1&&i<1&&G?.(),Ce=i;}function Z(){if(!S||N)return;let i=performance.now(),f=Ee(),ge=c;if(z!==false){let q=i-ve,Ae=q>0?Math.abs(f-(He<0?f:He))/q:0;ge=c*Math.max(.2,1+Ae*(typeof z=="number"?z:1)*.04);}He=f,ve=i;let R=g===x?0:(f-x)/(g-x);pe(R);let V=L(K(f,x,g,ge));u&&(fe=Math.max(fe,V),V=fe),Q=V,j(V),V>=1&&!Se?(Se=true,B?.()):V<1&&!u&&(Se=false),$=requestAnimationFrame(Z);}ce(),g===x&&we("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=L(K(Ee(),x,g,c));u&&i>0&&(fe=i),Q=i,j(i);}let ke=new IntersectionObserver(i=>{i.forEach(f=>{S=f.isIntersecting,S&&!N?$=requestAnimationFrame(Z):cancelAnimationFrame($);});},{root:C??null}),_;function k(){clearTimeout(_),_=setTimeout(ce,150);}return window.addEventListener("resize",k),window.addEventListener("orientationchange",k),ke.observe(e),Le(e,{type:"animate",getProgress:()=>Q,getTrigger:()=>({tStart:x,tEnd:g})}),{destroy(){cancelAnimationFrame($),ke.disconnect(),window.removeEventListener("resize",k),window.removeEventListener("orientationchange",k),clearTimeout(_),ie(),$e(e);},replay(){fe=-1,Se=false,Q=0,N=false,j(0);},pause(){N=true,cancelAnimationFrame($);},resume(){N&&(N=false,S&&($=requestAnimationFrame(Z)));},seek(i){let f=Math.min(1,Math.max(0,i));Q=f,fe=f,N=true,cancelAnimationFrame($),j(f);},getProgress(){return Q}}}var ot={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function kt(e,r){if(typeof window>"u")return ot;let n=typeof e=="string"?document.querySelector(e):e;if(!n)return we("scrollCounter: element not found:",e),ot;let t=n,{from:l=0,to:o,format:c,easing:u="ease-out",trigger:m={},once:p=true,decimals:T,onComplete:z}=r,A=T!==void 0?d=>d.toFixed(T):c??(d=>String(Math.round(d))),ne=typeof u=="function"?u:re[u]??re["ease-out"],Pe=de(m.start??"top 80%"),B=de(m.end??"top 20%");if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return t.textContent=A(o),z?.(),ot;let X=0,G=0,M=0,P=false,L=false,w=-1,I=0,O=false,C=()=>window.scrollY,E=()=>window.innerHeight;function se(){let d=t.getBoundingClientRect(),x=xe({top:d.top,height:d.height},C(),E(),Pe,B);X=x.tStart,G=x.tEnd;}function F(d){t.textContent=A(l+(o-l)*d),t.style.setProperty("--scroll-draw-progress",String(d));}function oe(){if(!P||L)return;let d=ne(K(C(),X,G,1));p&&(w=Math.max(w,d),d=w),I=d,F(d),d>=1&&!O?(O=true,z?.()):d<1&&!p&&(O=false),M=requestAnimationFrame(oe);}se();{let d=ne(K(C(),X,G,1));p&&d>0&&(w=d),I=d,F(d);}let ie=new IntersectionObserver(d=>{d.forEach(x=>{P=x.isIntersecting,P&&!L?M=requestAnimationFrame(oe):cancelAnimationFrame(M);});}),ee;function ae(){clearTimeout(ee),ee=setTimeout(se,150);}return window.addEventListener("resize",ae),window.addEventListener("orientationchange",ae),ie.observe(t),Le(t,{type:"counter",getProgress:()=>I,getTrigger:()=>({tStart:X,tEnd:G})}),{destroy(){cancelAnimationFrame(M),ie.disconnect(),window.removeEventListener("resize",ae),window.removeEventListener("orientationchange",ae),clearTimeout(ee),$e(t);},replay(){w=-1,O=false,I=0,L=false,F(0);},pause(){L=true,cancelAnimationFrame(M);},resume(){L&&(L=false,P&&(M=requestAnimationFrame(oe)));},seek(d){let x=Math.min(1,Math.max(0,d));I=x,w=x,L=true,cancelAnimationFrame(M),F(x);},getProgress(){return I}}}var It={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Ot(e,r={}){if(typeof window>"u")return It;let n=typeof e=="string"?document.querySelector(e):e;if(!n||n.tagName.toLowerCase()!=="video")return we("scrollVideo: <video> element not found:",e),It;let t=n,{trigger:l={},easing:o="linear",once:c=false,axis:u="y",preload:m="auto",onReady:p,onComplete:T,onProgress:z}=r,A=window.matchMedia("(prefers-reduced-motion: reduce)").matches,ne=typeof o=="function"?o:re[o]??re.linear,Pe=de(l.start??"top top"),B=de(l.end??"bottom top");t.pause(),t.hasAttribute("preload")||(t.preload=m);let J=r.from??0,X=r.to,G=0,M=0,P=0,L=false,w=false,I=-1,O=0,C=false,E=false,se=()=>u==="x"?window.scrollX:window.scrollY,F=()=>u==="x"?window.innerWidth:window.innerHeight;function oe(){let S=t.getBoundingClientRect(),N=u==="x"?S.left:S.top,fe=u==="x"?S.width:S.height,Q=xe({top:N,height:fe},se(),F(),Pe,B);G=Q.tStart,M=Q.tEnd;}let ie=NaN;function ee(S){if(!E)return;let N=X??t.duration??0,fe=J+(N-J)*S;fe!==ie&&(ie=fe,t.currentTime=fe),t.style.setProperty("--scroll-draw-progress",String(S)),z?.(S);}function ae(){if(!L||w||!E||A)return;let S=ne(K(se(),G,M,1));c&&(I=Math.max(I,S),S=I),O=S,ee(S),S>=1&&!C?(C=true,T?.()):S<1&&!c&&(C=false),P=requestAnimationFrame(ae);}function d(){if(E=true,X===void 0&&(X=t.duration),A){ee(1),p?.();return}oe(),p?.(),L&&!w&&(P=requestAnimationFrame(ae));}t.readyState>=1?d():t.addEventListener("loadedmetadata",d,{once:true}),E||oe();let x=new IntersectionObserver(S=>{S.forEach(N=>{L=N.isIntersecting,L&&!w&&E?P=requestAnimationFrame(ae):cancelAnimationFrame(P);});}),g;function $(){clearTimeout(g),g=setTimeout(oe,150);}return window.addEventListener("resize",$),window.addEventListener("orientationchange",$),x.observe(t),Le(t,{type:"video",getProgress:()=>O,getTrigger:()=>({tStart:G,tEnd:M})}),{destroy(){cancelAnimationFrame(P),x.disconnect(),t.removeEventListener("loadedmetadata",d),window.removeEventListener("resize",$),window.removeEventListener("orientationchange",$),clearTimeout(g),$e(t);},replay(){I=-1,C=false,O=0,w=false,ie=NaN,ee(0);},pause(){w=true,cancelAnimationFrame(P);},resume(){w&&(w=false,L&&E&&(P=requestAnimationFrame(ae)));},seek(S){let N=Math.min(1,Math.max(0,S));O=N,I=N,w=true,cancelAnimationFrame(P),ie=NaN,ee(N);},getProgress(){return O}}}function Nt(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 ur(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 Ft(e){let r=Nt(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,p)=>{let T=m.nextElementSibling;u.appendChild(m),p<c.length-1&&T&&T.style.whiteSpace==="pre"&&u.appendChild(T);}),t.push(u);}return e.textContent="",t.forEach((o,c)=>{e.appendChild(o),c<t.length-1&&e.appendChild(document.createTextNode(" "));}),t}function mr(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 fr(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 Rt(e,r={}){if(typeof window>"u")return Dt;let n=typeof e=="string"?document.querySelector(e):e;if(!n)return we("scrollText: element not found:",e),Dt;let t=n,{split:l="words",stagger:o=.04,easing:c="ease-out",from:u={opacity:0,y:24},trigger:m={},once:p=true,onComplete:T}=r,z=window.matchMedia("(prefers-reduced-motion: reduce)").matches,A=typeof c=="function"?c:re[c]??re["ease-out"],ne=de(m.start??"top 85%"),Pe=de(m.end??"top 40%"),B=t.innerHTML;t.setAttribute("aria-label",t.textContent??"");let J;l==="chars"?J=ur(t):l==="lines"?J=Ft(t):J=Nt(t);let X=J.length;function G(g,$){u?.opacity!==void 0&&(g.style.opacity=String(u.opacity+(1-u.opacity)*$));let S=fr($,u);S&&(g.style.transform=S);}function M(g){t.style.setProperty("--scroll-draw-progress",String(g)),J.forEach(($,S)=>{let N=A(mr(g,S,X,o));G($,N);});}if(z)return M(1),T?.(),{destroy(){t.innerHTML=B,t.removeAttribute("aria-label");},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};M(0);let P=0,L=0,w=0,I=false,O=false,C=-1,E=0,se=false,F=()=>window.scrollY,oe=()=>window.innerHeight;function ie(){let g=t.getBoundingClientRect(),$=xe({top:g.top,height:g.height},F(),oe(),ne,Pe);P=$.tStart,L=$.tEnd;}function ee(){if(!I||O)return;let g=K(F(),P,L,1);p&&(C=Math.max(C,g),g=C),E=g,M(g),g>=1&&!se?(se=true,T?.()):g<1&&!p&&(se=false),w=requestAnimationFrame(ee);}ie();let ae=new IntersectionObserver(g=>{g.forEach($=>{I=$.isIntersecting,I&&!O?w=requestAnimationFrame(ee):cancelAnimationFrame(w);});}),d;function x(){clearTimeout(d),d=setTimeout(()=>{if(l==="lines"){let g=E;t.innerHTML=B,t.setAttribute("aria-label",t.textContent??""),J=Ft(t),M(g);}ie();},150);}return window.addEventListener("resize",x),window.addEventListener("orientationchange",x),ae.observe(t),Le(t,{type:"text",getProgress:()=>E,getTrigger:()=>({tStart:P,tEnd:L})}),{destroy(){cancelAnimationFrame(w),ae.disconnect(),window.removeEventListener("resize",x),window.removeEventListener("orientationchange",x),clearTimeout(d),t.innerHTML=B,t.removeAttribute("aria-label"),$e(t);},replay(){C=-1,se=false,E=0,O=false,M(0);},pause(){O=true,cancelAnimationFrame(w);},resume(){O&&(O=false,I&&(w=requestAnimationFrame(ee)));},seek(g){let $=Math.min(1,Math.max(0,g));E=$,C=$,O=true,cancelAnimationFrame(w),M($);},getProgress(){return E}}}var Ht=class{constructor(){this.instance=null;}init(r,n={}){return this.destroy(),this.instance=Mt(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=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}},_t=class{constructor(){this.instance=null;}init(r,n){return this.destroy(),this.instance=kt(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=Ot(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}},qt=class{constructor(){this.instance=null;}init(r,n={}){return this.destroy(),this.instance=Rt(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=zt;exports.ScrollCounterRef=_t;exports.ScrollDrawRef=Ht;exports.ScrollTextRef=qt;exports.ScrollVideoRef=Vt;
|
|
3
|
+
<div style="position:absolute;${m?`left:${u}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${u}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(t),window.addEventListener("scroll",l,{passive:true}),l(),{el:t,destroy(){window.removeEventListener("scroll",l),t.remove();}}}var Lt=/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,$t=/[MmLlHhVvCcSsQqTtAaZz]/g;function lr(e,n,r){if(!je)return;let t=(e.match($t)??[]).join("").toUpperCase(),l=(n.match($t)??[]).join("").toUpperCase(),s=(e.match(Lt)??[]).length,c=(n.match(Lt)??[]).length;if(t!==l){he(`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.`,r);return}s!==c&&he(`morphTo: coordinate count differs (${s} \u2192 ${c}). Extra coordinates are ignored and missing ones hold their start value, so the result will not reach the target shape.`,r);}function it(e,n,r){let t=(n.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),l=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,s=>{let c=parseFloat(s),u=t[l++]??c;return String(+(c+(u-c)*r).toFixed(4))})}function Pt(e,n={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:r,...t}=n,l=r?{...Et[r],...t}:t,s=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:c="path, polyline, line, polygon, rect, circle",speed:u=1,fade:m=false,easing:p="linear",trigger:T={},stagger:z=0,direction:M="forward",once:ne=false,debug:$e=false,axis:B="y",scrollContainer:ee,autoReverse:X=false,delay:G=0,strokeColor:A,strokeWidth:P,fillOpacity:L,waypoints:w,velocityScale:O=false,threshold:F=0,rootMargin:C="0px",repeat:E=0,repeatDelay:oe=0,morphTo:D,clip:se,autoplay:ie=false,duration:te=1e3,native:ae=true,onProgress:d,onStart:x,onComplete:g,onEnter:$,onLeave:S,onEnterBack:N,onLeaveBack:fe}=l,K=se===true?"left":typeof se=="string"?se:false,ve=typeof p=="function"?p:re[p]??re.linear,Pe=de(T.start??"top bottom"),Ve=de(T.end??"bottom top"),be=typeof ee=="string"?document.querySelector(ee):ee??null,we=Array.isArray(A)?A[0]:null,le=Array.isArray(A)?A[1]:typeof A=="string"?A:null,ce=Array.isArray(P)?P[0]:null,j=Array.isArray(P)?P[1]:typeof P=="number"?P:null,pe=Array.isArray(L)?L[0]:null,Q=Array.isArray(L)?L[1]:typeof L=="number"?L:null;function Ce(o){let a=o*100;switch(K){case "right":return `inset(0 0 0 ${100-a}%)`;case "top":return `inset(0 0 ${100-a}% 0)`;case "bottom":return `inset(${100-a}% 0 0 0)`;case "center":return `circle(${o*150}% at 50% 50%)`;default:return `inset(0 ${100-a}% 0 0)`}}let V=K?[]:Array.from(e.querySelectorAll(c)),k=[],i=[],f=0,ge=0,R=false,_=false,q=0,xe=false,Ee=-1,Z=[],De=-1,U=false,ke=0,Ie=0,Ne,tt=null;function ct(){tt?.destroy(),tt=null;}let Re=new Set,ut=NaN,He=true,Ue=-1,mt=performance.now(),_e=NaN;function rt(){return be?B==="x"?be.scrollLeft:be.scrollTop:B==="x"?window.scrollX:window.scrollY}function ft(){return be?B==="x"?be.clientWidth:be.clientHeight:B==="x"?window.innerWidth:window.innerHeight}function pt(){let o=Je(e,be,B);return Te(o,o.scroll,ft(),Pe,Ve)}function dt(){(({tStart:f,tEnd:ge}=pt())),$e&&je&&(ct(),tt=ar(f,ge,B));}function nt(o,a=pt){Ae(e,{type:"draw",getProgress:()=>o.getProgress(),getTrigger:a});let b=o.destroy;return o.destroy=()=>{b.call(o),Le(e);},o}function Yt(o,a){if(e.style.setProperty("--scroll-draw-progress",String(o)),K){let b=a==="reverse"?1-o:o;e.style.clipPath=Ce(b);return}V.forEach((b,ue)=>{b.style.strokeDashoffset=a==="reverse"?`${k[ue]*o}`:`${k[ue]*(1-o)}`,m&&(b.style.opacity=a==="reverse"?`${1-o}`:`${o}`),we&&le?b.style.stroke=We(we,le,o):le&&(b.style.stroke=le),ce!==null&&j!==null?b.style.strokeWidth=`${ce+(j-ce)*o}`:j!==null&&(b.style.strokeWidth=`${j}`),pe!==null&&Q!==null?b.style.fillOpacity=`${pe+(Q-pe)*o}`:Q!==null&&(b.style.fillOpacity=`${Q}`),D&&b.tagName.toLowerCase()==="path"&&i[ue]&&b.setAttribute("d",it(i[ue],D,o));});}function Ye(){if(e.style.setProperty("--scroll-draw-progress","0"),K){e.style.clipPath=Ce(0);return}V.forEach((o,a)=>{o.style.strokeDasharray=`${k[a]}`,o.style.strokeDashoffset=M==="reverse"?"0":`${k[a]}`,m?o.style.opacity=M==="reverse"?"1":"0":o.style.opacity="",we&&(o.style.stroke=we),ce!==null&&(o.style.strokeWidth=`${ce}`),pe!==null&&(o.style.fillOpacity=`${pe}`),D&&o.tagName.toLowerCase()==="path"&&i[a]&&o.setAttribute("d",i[a]);});}if(V.forEach(o=>{ir(o);let a=qe(o);k.push(a);let b=o.tagName.toLowerCase()==="path";b?i.push(o.getAttribute("d")??""):i.push(""),D&&(b?lr(i[i.length-1],D,o):he(`morphTo only applies to <path> elements \u2014 ignored on <${o.tagName}>.`,o)),s?(o.style.strokeDasharray=`${a}`,o.style.strokeDashoffset=M==="reverse"?`${a}`:"0",m&&(o.style.opacity="1"),le&&(o.style.stroke=le),j!==null&&(o.style.strokeWidth=`${j}`),Q!==null&&(o.style.fillOpacity=`${Q}`),D&&o.tagName.toLowerCase()==="path"&&o.setAttribute("d",D)):(o.style.strokeDasharray=`${a}`,o.style.strokeDashoffset=M==="reverse"?"0":`${a}`,m?o.style.opacity=M==="reverse"?"1":"0":o.style.opacity="",we&&(o.style.stroke=we),ce!==null&&(o.style.strokeWidth=`${ce}`),pe!==null&&(o.style.fillOpacity=`${pe}`));}),K){if(s)return e.style.clipPath=Ce(1),g?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=Ce(0);}else if(s)return g?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};let gt=typeof p=="string"?et(p):null;function Xt(){return !(ae===false||!sr()||!V.length||!gt||K||B!=="y"||be||u!==1||z!==0||ne||X||O!==false||D||w||E||G>0||d||x||g||$||S||N||fe||A!=null||P!=null||L!=null||(T.start??"top bottom").trim()!=="top bottom"||(T.end??"bottom top").trim()!=="bottom top")}function Kt(){let o=++or,a=`svg-scroll-draw-${o}`,b=`svg-scroll-draw-host-${o}`,ue=`--svg-scroll-draw-${o}`,Fe=M==="reverse"?"0":"var(--ssd-len)",Oe=M==="reverse"?"var(--ssd-len)":"0",Me=`stroke-dashoffset:${Fe};`,v=`stroke-dashoffset:${Oe};`;m&&(Me+=`opacity:${M==="reverse"?1:0};`,v+=`opacity:${M==="reverse"?0:1};`);let I=document.createElement("style");I.setAttribute("data-svg-scroll-draw",""),I.textContent=`@keyframes ${a}{from{${Me}}to{${v}}}.${b}{view-timeline-name:${ue};view-timeline-axis:block;}.${a}{animation-name:${a};animation-duration:auto;animation-timing-function:${gt};animation-fill-mode:both;animation-timeline:${ue};animation-range:cover 0% cover 100%;}`,document.head.appendChild(I),e.classList.add(b);function me(y,Y){y.style.setProperty("--ssd-len",String(k[Y])),y.style.strokeDasharray=`${k[Y]}`,y.style.strokeDashoffset="",y.style.opacity="",y.style.animationPlayState="",y.classList.add(a);}V.forEach(me);let h=false,H=-1;function W(){if(H>=0)return H;let y=e.getBoundingClientRect(),{tStart:Y,tEnd:Se}=Te({top:y.top,height:y.height},rt(),ft(),Pe,Ve);return ve(J(rt(),Y,Se,u))}return {destroy(){e.classList.remove(b),V.forEach(y=>{y.classList.remove(a),y.style.removeProperty("--ssd-len"),y.style.animationPlayState="";}),I.remove();},replay(){h=false,H=-1,V.forEach(me);},pause(){h=true,V.forEach(y=>{y.style.animationPlayState="paused";});},resume(){h&&(h=false,V.forEach(y=>{y.style.animationPlayState="running";}));},seek(y){let Y=Math.min(1,Math.max(0,y));H=Y,h=true,V.forEach((Se,ye)=>{Se.classList.remove(a),Se.style.strokeDashoffset=M==="reverse"?`${k[ye]*Y}`:`${k[ye]*(1-Y)}`,m&&(Se.style.opacity=M==="reverse"?`${1-Y}`:`${Y}`);});},getProgress(){return W()},refresh(){V.forEach((y,Y)=>{k[Y]=qe(y),y.style.setProperty("--ssd-len",String(k[Y])),y.style.strokeDasharray=`${k[Y]}`;});}}}if(Xt())return nt(Kt());function Qt(){let o=Math.max(1,te),a=0,b=0,ue=false;function Fe(h){let H=true;if(K){let W=Math.min(1,Math.max(0,h/o)),y=ve(W);ke=y,e.style.setProperty("--scroll-draw-progress",String(y)),e.style.clipPath=Ce(M==="reverse"?1-y:y),d?.(y),W<1&&(H=false);}else V.forEach((W,y)=>{let Y=y*z*o,Se=Math.min(1,Math.max(0,(h-Y)/o)),ye=ve(Se);W.style.strokeDashoffset=M==="reverse"?`${k[y]*ye}`:`${k[y]*(1-ye)}`,m&&(W.style.opacity=M==="reverse"?`${1-ye}`:`${ye}`),we&&le?W.style.stroke=We(we,le,ye):le&&(W.style.stroke=le),ce!==null&&j!==null?W.style.strokeWidth=`${ce+(j-ce)*ye}`:j!==null&&(W.style.strokeWidth=`${j}`),pe!==null&&Q!==null?W.style.fillOpacity=`${pe+(Q-pe)*ye}`:Q!==null&&(W.style.fillOpacity=`${Q}`),D&&W.tagName.toLowerCase()==="path"&&i[y]&&W.setAttribute("d",it(i[y],D,ye)),y===0&&(ke=ye,d?.(ye),e.style.setProperty("--scroll-draw-progress",String(ye))),Se<1&&(H=false);});if(w){let W=Math.min(1,Math.max(0,h/o)),y=ve(W);for(let Y in w){let Se=parseFloat(Y);y>=Se&&!Re.has(Se)&&(Re.add(Se),w[Y]?.());}}return H}function Oe(h){if(U)return;let H=h-a;_||(_=true,x?.());let W=Fe(H);if(W&&!R){R=true,Fe(o*(1+Math.max(0,V.length-1)*z)),g?.(),Ie<(E==="infinite"?1/0:E??0)&&(Ie++,Ne=setTimeout(()=>{a=performance.now(),_=false,R=false,Re.clear(),Ye(),q=requestAnimationFrame(Oe);},oe));return}W||(q=requestAnimationFrame(Oe));}function Me(){cancelAnimationFrame(q),clearTimeout(Ne),a=performance.now(),b=0,U=false,_=false,R=false,Ie=0,ue=true,ke=0,Re.clear(),Ye(),q=requestAnimationFrame(Oe);}let v=new IntersectionObserver(h=>{h.forEach(H=>{H.isIntersecting&&!(ne&&R)?Me():!H.isIntersecting&&!ne&&!R&&(cancelAnimationFrame(q),clearTimeout(Ne),ue=false);});},{root:be??null,threshold:F,rootMargin:C}),I;function me(){clearTimeout(I),I=setTimeout(()=>{V.forEach((h,H)=>{k[H]=qe(h),h.style.strokeDasharray=`${k[H]}`;});},150);}return window.addEventListener("resize",me),window.addEventListener("orientationchange",me),G>0?setTimeout(()=>v.observe(e),G):v.observe(e),{destroy(){cancelAnimationFrame(q),clearTimeout(Ne),v.disconnect(),window.removeEventListener("resize",me),window.removeEventListener("orientationchange",me),clearTimeout(I);},replay(){Ie=0,Me();},pause(){U||!ue||(U=true,b=performance.now()-a,cancelAnimationFrame(q));},resume(){U&&(U=false,ue=true,a=performance.now()-b,q=requestAnimationFrame(Oe));},seek(h){let H=Math.min(1,Math.max(0,h));ke=H,U=true,b=H*o,a=performance.now()-b,cancelAnimationFrame(q),Fe(b);},getProgress(){return ke},refresh(){clearTimeout(I),V.forEach((h,H)=>{k[H]=qe(h),h.style.strokeDasharray=`${k[H]}`;});}}}if(ie)return nt(Qt());dt();function Xe(){if(!xe||U)return;let o=performance.now(),a=rt();if(!He&&O===false&&a===ut){q=requestAnimationFrame(Xe);return}He=false,ut=a;let b=u;if(O!==false){let v=o-mt,I=v>0?Math.abs(a-(Ue<0?a:Ue))/v:0;b=u*Math.max(.2,1+I*(typeof O=="number"?O:1)*.04);}Ue=a,mt=o;let ue=X?De===-1||a>=De?"forward":"reverse":M;De=a;let Fe=ge-f,Oe=true,Me=Fe===0?0:(a-f)/Fe;if(isNaN(_e)||(_e<=0&&Me>0?$?.():_e>0&&Me<=0&&fe?.(),_e<1&&Me>=1?S?.():_e>=1&&Me<1&&N?.()),_e=Me,K){let v=ve(J(a,f,ge,b));ne&&!X&&(Ee=Math.max(Ee,v),v=Ee),ke=v,e.style.setProperty("--scroll-draw-progress",String(v));let I=ue==="reverse"?1-v:v;e.style.clipPath=Ce(I),d?.(v),!_&&J(a,f,ge,b)>0&&(_=true,x?.()),v>=1&&!R?(R=true,g?.(),Ie<(E==="infinite"?1/0:E??0)&&(Ie++,Ne=setTimeout(()=>{Ee=-1,_=false,R=false,e.style.clipPath=Ce(0);},oe))):v<1&&!ne&&(R=false),q=requestAnimationFrame(Xe);return}if(V.forEach((v,I)=>{let me=I*z*Fe,h=ve(J(a,f+me,ge+me,b));ne&&!X&&(h=Z[I]=Math.max(Z[I]??Ee,h)),ke=h,v.style.strokeDashoffset=ue==="reverse"?`${k[I]*h}`:`${k[I]*(1-h)}`,m&&(v.style.opacity=ue==="reverse"?`${1-h}`:`${h}`),we&&le?v.style.stroke=We(we,le,h):le&&(v.style.stroke=le),ce!==null&&j!==null?v.style.strokeWidth=`${ce+(j-ce)*h}`:j!==null&&(v.style.strokeWidth=`${j}`),pe!==null&&Q!==null?v.style.fillOpacity=`${pe+(Q-pe)*h}`:Q!==null&&(v.style.fillOpacity=`${Q}`),D&&v.tagName.toLowerCase()==="path"&&i[I]&&v.setAttribute("d",it(i[I],D,h)),I===0&&(d?.(h),e.style.setProperty("--scroll-draw-progress",String(h))),h<1&&(Oe=false);}),w){let v=ve(J(a,f,ge,b));for(let I in w){let me=parseFloat(I);v>=me&&!Re.has(me)&&(Re.add(me),w[I]?.());}}!_&&J(a,f,ge,b)>0&&(_=true,x?.()),Oe&&!R?(R=true,g?.(),Ie<(E==="infinite"?1/0:E??0)&&(Ie++,Ne=setTimeout(()=>{Ee=-1,Z=[],_=false,R=false,Re.clear(),Ye(),He=true;},oe))):!Oe&&!ne&&(R=false),q=requestAnimationFrame(Xe);}let ot=false;function Ke(){ot||(ot=true,q=requestAnimationFrame(function(){Xe();}));}function Qe(){ot=false,cancelAnimationFrame(q);}let st=new IntersectionObserver(o=>{o.forEach(a=>{xe=a.isIntersecting,xe&&!U?(He=true,Ke()):Qe();});},{root:be??null,threshold:F,rootMargin:C});function yt(){V.forEach((o,a)=>{k[a]=qe(o),o.style.strokeDasharray=`${k[a]}`;}),dt(),He=true;}let Ze;function Be(){clearTimeout(Ze),Ze=setTimeout(yt,150);}window.addEventListener("resize",Be),window.addEventListener("orientationchange",Be);let Ge;return typeof ResizeObserver<"u"&&(Ge=new ResizeObserver(()=>Be()),Ge.observe(document.body),Ge.observe(document.documentElement),Ge.observe(e)),G>0?setTimeout(()=>st.observe(e),G):st.observe(e),nt({destroy(){cancelAnimationFrame(q),clearTimeout(Ne),Qe(),st.disconnect(),Ge?.disconnect(),window.removeEventListener("resize",Be),window.removeEventListener("orientationchange",Be),clearTimeout(Ze),ct();},replay(){Ee=-1,Z=[],De=-1,Ue=-1,_=false,R=false,Ie=0,U=false,ke=0,Re.clear(),clearTimeout(Ne),Ye(),He=true,xe&&Ke();},pause(){U=true,Qe();},resume(){U&&(U=false,He=true,xe&&Ke());},seek(o){let a=Math.min(1,Math.max(0,o));ke=a,Ee=a,Z=[],U=true,Qe(),Yt(a,M),He=true;},getProgress(){return ke},refresh(){clearTimeout(Ze),yt(),xe&&!U&&Ke();}},()=>({tStart:f,tEnd:ge}))}var Ct=new WeakMap,cr=0;function at(e){return JSON.stringify(e,(n,r)=>{if(typeof r=="function")return "\u0192";if(typeof Element<"u"&&r instanceof Element){let t=Ct.get(r);return t===void 0&&Ct.set(r,t=++cr),`el#${t}`}return r})}function kt(e,n){let r={...e};for(let t of Object.keys(r))typeof r[t]=="function"&&(r[t]=(...l)=>n()[t]?.(...l));return r}function ur(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function Ot(e){let n=[],r=/([\w]+)\(([^)]*)\)/g,t;for(;(t=r.exec(e))!==null;){let l=[],s=[],c=t[2].trim();if(c)for(let u of c.split(/[\s,]+/)){let m=u.match(/^([-+]?[\d.eE]+)(.*)$/);l.push(m?parseFloat(m[1]):0),s.push(m?m[2]:"");}n.push({fn:t[1],nums:l,units:s});}return n}function mr(e,n,r){let t=Ot(e),l=Ot(n);return t.length===0||t.length!==l.length?r<1?e:n:t.map((s,c)=>{let u=l[c];return s.fn!==u.fn||s.nums.length!==u.nums.length?r<1?`${s.fn}(${s.nums.map((m,p)=>`${m}${s.units[p]}`).join(", ")})`:`${u.fn}(${u.nums.map((m,p)=>`${m}${u.units[p]}`).join(", ")})`:`${s.fn}(${s.nums.map((m,p)=>`${m+(u.nums[p]-m)*r}${s.units[p]}`).join(", ")})`}).join(" ")}function It(e,n,r){if(typeof e=="number"&&typeof n=="number")return String(e+(n-e)*r);let t=String(e),l=String(n);if(ur(t))return We(t,l,r);if(t.includes("("))return mr(t,l,r);let s=t.match(/^([-+]?[\d.]+)(.*)$/),c=l.match(/^([-+]?[\d.]+)(.*)$/);if(s&&c){let u=parseFloat(s[1]),m=parseFloat(c[1]);return `${u+(m-u)*r}${s[2]||c[2]}`}return r<1?t:l}function fr(e){return e.replace(/([A-Z])/g,n=>`-${n.toLowerCase()}`)}var pr=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),dr=0,Ft="--scroll-draw-progress";function gr(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function Dt(e,n){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let{props:t,trigger:l={},easing:s="ease-out",speed:c=1,once:u=false,axis:m="y",scrollContainer:p,native:T=true,velocityScale:z=false,respectReducedMotion:M=true,triggerElement:ne,onProgress:$e,onComplete:B,onEnter:ee,onLeave:X,onEnterBack:G,onLeaveBack:A}=n,P=M&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,L=typeof s=="function"?s:re[s]??re["ease-out"],w=de(l.start??"top bottom"),O=de(l.end??"bottom top"),F=ne??e,C=typeof p=="string"?document.querySelector(p):p??null,E=Object.entries(t).map(([i,f])=>({prop:fr(i),from:Array.isArray(f)?f[0]:"",to:Array.isArray(f)?f[1]:f}));function oe(){let i=window.getComputedStyle(e);for(let f of E)f.from===""&&(f.from=i.getPropertyValue(f.prop).trim()||"0");}function D(){for(let i of E)e.style.setProperty(i.prop,String(i.to));}let se=new Map;for(let i of [...E.map(f=>f.prop),Ft])se.set(i,e.style.getPropertyValue(i));function ie(){for(let[i,f]of se)f?e.style.setProperty(i,f):e.style.removeProperty(i);}if(P)return D(),B?.(),{...r,destroy:ie,getProgress:()=>1};oe();let te=typeof s=="string"?et(s):null;function ae(){if(!T||!gr()||!te||m!=="y"||C||F!==e||u||c!==1||$e||B||ee||X||G||A||z!==false||(l.start??"top bottom").trim()!=="top bottom"||(l.end??"bottom top").trim()!=="bottom top")return false;for(let i of E)if(!pr.has(i.prop))return false;return true}function d(){let i=`ssd-a-${++dr}`,f=E.map(Z=>`${Z.prop}:${Z.from}`).join(";"),ge=E.map(Z=>`${Z.prop}:${Z.to}`).join(";"),R=document.createElement("style");R.setAttribute("data-ssd-animate",""),R.textContent=`@keyframes ${i}{from{${f}}to{${ge}}}.${i}{animation-name:${i};animation-duration:auto;animation-timing-function:${te};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,q=()=>m==="x"?window.innerWidth:window.innerHeight,xe=()=>{let Z=e.getBoundingClientRect();return Te({top:Z.top,height:Z.height},_(),q(),w,O)};Ae(e,{type:"animate",getProgress:()=>Ee.getProgress(),getTrigger:xe});let Ee={destroy(){e.classList.remove(i),R.remove(),e.style.animationPlayState="",ie(),Le(e);},replay(){e.classList.remove(i),e.offsetWidth,e.classList.add(i);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(Z){let De=Math.min(1,Math.max(0,Z));e.classList.remove(i);for(let U of E)e.style.setProperty(U.prop,It(U.from,U.to,De));},getProgress(){let{tStart:Z,tEnd:De}=xe();return L(J(_(),Z,De,c))}};return Ee}if(ae())return d();let x=0,g=0,$=0,S=false,N=false,fe=-1,K=0,ve=false,Pe=NaN,Ve=-1,be=0,we=()=>C?m==="x"?C.scrollLeft:C.scrollTop:m==="x"?window.scrollX:window.scrollY,le=()=>C?m==="x"?C.clientWidth:C.clientHeight:m==="x"?window.innerWidth:window.innerHeight;function ce(){let i=Je(F,C,m),f=Te(i,i.scroll,le(),w,O);x=f.tStart,g=f.tEnd;}function j(i){e.style.setProperty(Ft,String(i));for(let f of E)e.style.setProperty(f.prop,It(f.from,f.to,i));$e?.(i);}function pe(i){if(isNaN(Pe)){Pe=i;return}Pe<=0&&i>0?ee?.():Pe>0&&i<=0&&A?.(),Pe<1&&i>=1?X?.():Pe>=1&&i<1&&G?.(),Pe=i;}function Q(){if(!S||N)return;let i=performance.now(),f=we(),ge=c;if(z!==false){let q=i-be,xe=q>0?Math.abs(f-(Ve<0?f:Ve))/q:0;ge=c*Math.max(.2,1+xe*(typeof z=="number"?z:1)*.04);}Ve=f,be=i;let R=g===x?0:(f-x)/(g-x);pe(R);let _=L(J(f,x,g,ge));u&&(fe=Math.max(fe,_),_=fe),K=_,j(_),_>=1&&!ve?(ve=true,B?.()):_<1&&!u&&(ve=false),$=requestAnimationFrame(Q);}ce(),g===x&&he("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=L(J(we(),x,g,c));u&&i>0&&(fe=i),K=i,j(i);}let Ce=new IntersectionObserver(i=>{i.forEach(f=>{S=f.isIntersecting,S&&!N?$=requestAnimationFrame(Q):cancelAnimationFrame($);});},{root:C??null}),V;function k(){clearTimeout(V),V=setTimeout(ce,150);}return window.addEventListener("resize",k),window.addEventListener("orientationchange",k),Ce.observe(e),Ae(e,{type:"animate",getProgress:()=>K,getTrigger:()=>({tStart:x,tEnd:g})}),{destroy(){cancelAnimationFrame($),Ce.disconnect(),window.removeEventListener("resize",k),window.removeEventListener("orientationchange",k),clearTimeout(V),ie(),Le(e);},replay(){fe=-1,ve=false,K=0,N=false,j(0);},pause(){N=true,cancelAnimationFrame($);},resume(){N&&(N=false,S&&($=requestAnimationFrame(Q)));},seek(i){let f=Math.min(1,Math.max(0,i));K=f,fe=f,N=true,cancelAnimationFrame($),j(f);},getProgress(){return K}}}var lt={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Nt(e,n){if(typeof window>"u")return lt;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return he("scrollCounter: element not found:",e),lt;let t=r,{from:l=0,to:s,format:c,easing:u="ease-out",trigger:m={},once:p=true,decimals:T,onComplete:z}=n,M=T!==void 0?d=>d.toFixed(T):c??(d=>String(Math.round(d))),ne=typeof u=="function"?u:re[u]??re["ease-out"],$e=de(m.start??"top 80%"),B=de(m.end??"top 20%");if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return t.textContent=M(s),z?.(),lt;let X=0,G=0,A=0,P=false,L=false,w=-1,O=0,F=false,C=()=>window.scrollY,E=()=>window.innerHeight;function oe(){let d=t.getBoundingClientRect(),x=Te({top:d.top,height:d.height},C(),E(),$e,B);X=x.tStart,G=x.tEnd;}function D(d){t.textContent=M(l+(s-l)*d),t.style.setProperty("--scroll-draw-progress",String(d));}function se(){if(!P||L)return;let d=ne(J(C(),X,G,1));p&&(w=Math.max(w,d),d=w),O=d,D(d),d>=1&&!F?(F=true,z?.()):d<1&&!p&&(F=false),A=requestAnimationFrame(se);}oe();{let d=ne(J(C(),X,G,1));p&&d>0&&(w=d),O=d,D(d);}let ie=new IntersectionObserver(d=>{d.forEach(x=>{P=x.isIntersecting,P&&!L?A=requestAnimationFrame(se):cancelAnimationFrame(A);});}),te;function ae(){clearTimeout(te),te=setTimeout(oe,150);}return window.addEventListener("resize",ae),window.addEventListener("orientationchange",ae),ie.observe(t),Ae(t,{type:"counter",getProgress:()=>O,getTrigger:()=>({tStart:X,tEnd:G})}),{destroy(){cancelAnimationFrame(A),ie.disconnect(),window.removeEventListener("resize",ae),window.removeEventListener("orientationchange",ae),clearTimeout(te),Le(t);},replay(){w=-1,F=false,O=0,L=false,D(0);},pause(){L=true,cancelAnimationFrame(A);},resume(){L&&(L=false,P&&(A=requestAnimationFrame(se)));},seek(d){let x=Math.min(1,Math.max(0,d));O=x,w=x,L=true,cancelAnimationFrame(A),D(x);},getProgress(){return O}}}var Rt={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Ht(e,n={}){if(typeof window>"u")return Rt;let r=typeof e=="string"?document.querySelector(e):e;if(!r||r.tagName.toLowerCase()!=="video")return he("scrollVideo: <video> element not found:",e),Rt;let t=r,{trigger:l={},easing:s="linear",once:c=false,axis:u="y",preload:m="auto",onReady:p,onComplete:T,onProgress:z}=n,M=window.matchMedia("(prefers-reduced-motion: reduce)").matches,ne=typeof s=="function"?s:re[s]??re.linear,$e=de(l.start??"top top"),B=de(l.end??"bottom top");t.pause(),t.hasAttribute("preload")||(t.preload=m);let ee=n.from??0,X=n.to,G=0,A=0,P=0,L=false,w=false,O=-1,F=0,C=false,E=false,oe=()=>u==="x"?window.scrollX:window.scrollY,D=()=>u==="x"?window.innerWidth:window.innerHeight;function se(){let S=t.getBoundingClientRect(),N=u==="x"?S.left:S.top,fe=u==="x"?S.width:S.height,K=Te({top:N,height:fe},oe(),D(),$e,B);G=K.tStart,A=K.tEnd;}let ie=NaN;function te(S){if(!E)return;let N=X??t.duration??0,fe=ee+(N-ee)*S;fe!==ie&&(ie=fe,t.currentTime=fe),t.style.setProperty("--scroll-draw-progress",String(S)),z?.(S);}function ae(){if(!L||w||!E||M)return;let S=ne(J(oe(),G,A,1));c&&(O=Math.max(O,S),S=O),F=S,te(S),S>=1&&!C?(C=true,T?.()):S<1&&!c&&(C=false),P=requestAnimationFrame(ae);}function d(){if(E=true,X===void 0&&(X=t.duration),M){te(1),p?.();return}se(),p?.(),L&&!w&&(P=requestAnimationFrame(ae));}t.readyState>=1?d():t.addEventListener("loadedmetadata",d,{once:true}),E||se();let x=new IntersectionObserver(S=>{S.forEach(N=>{L=N.isIntersecting,L&&!w&&E?P=requestAnimationFrame(ae):cancelAnimationFrame(P);});}),g;function $(){clearTimeout(g),g=setTimeout(se,150);}return window.addEventListener("resize",$),window.addEventListener("orientationchange",$),x.observe(t),Ae(t,{type:"video",getProgress:()=>F,getTrigger:()=>({tStart:G,tEnd:A})}),{destroy(){cancelAnimationFrame(P),x.disconnect(),t.removeEventListener("loadedmetadata",d),window.removeEventListener("resize",$),window.removeEventListener("orientationchange",$),clearTimeout(g),Le(t);},replay(){O=-1,C=false,F=0,w=false,ie=NaN,te(0);},pause(){w=true,cancelAnimationFrame(P);},resume(){w&&(w=false,L&&E&&(P=requestAnimationFrame(ae)));},seek(S){let N=Math.min(1,Math.max(0,S));F=N,O=N,w=true,cancelAnimationFrame(P),ie=NaN,te(N);},getProgress(){return F}}}function _t(e){let n=e.textContent??"";return e.textContent="",n.split(/(\s+)/).filter(Boolean).map(r=>{let t=document.createElement("span");return t.setAttribute("aria-hidden","true"),/^\s+$/.test(r)?(t.textContent=r,t.style.whiteSpace="pre"):(t.textContent=r,t.style.display="inline-block"),e.appendChild(t),/^\s+$/.test(r)?null:t}).filter(r=>r!==null)}function yr(e){let n=e.textContent??"";return e.textContent="",n.split("").map(r=>{let t=document.createElement("span");return t.setAttribute("aria-hidden","true"),t.textContent=r,r===" "?t.style.whiteSpace="pre":t.style.display="inline-block",e.appendChild(t),r===" "?null:t}).filter(r=>r!==null)}function zt(e){let n=_t(e),r=new Map;for(let s of n){let c=s.offsetTop;r.has(c)||r.set(c,[]),r.get(c).push(s);}let t=[],l=Array.from(r.keys()).sort((s,c)=>s-c);for(let s of l){let c=r.get(s),u=document.createElement("span");u.setAttribute("aria-hidden","true"),u.style.display="inline-block",c.forEach((m,p)=>{let T=m.nextElementSibling;u.appendChild(m),p<c.length-1&&T&&T.style.whiteSpace==="pre"&&u.appendChild(T);}),t.push(u);}return e.textContent="",t.forEach((s,c)=>{e.appendChild(s),c<t.length-1&&e.appendChild(document.createTextNode(" "));}),t}function hr(e,n,r,t){if(r<=1||t===0)return e;let l=(r-1)*t,s=n*t,c=s+(1-l);return c<=s?e>=s?1:0:Math.min(1,Math.max(0,(e-s)/(c-s)))}function br(e,n){let r=[];if(n?.y!==void 0&&r.push(`translateY(${n.y*(1-e)}px)`),n?.x!==void 0&&r.push(`translateX(${n.x*(1-e)}px)`),n?.rotate!==void 0&&r.push(`rotate(${n.rotate*(1-e)}deg)`),n?.scale!==void 0){let t=n.scale+(1-n.scale)*e;r.push(`scale(${t})`);}return r.join(" ")||""}var Vt={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function qt(e,n={}){if(typeof window>"u")return Vt;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return he("scrollText: element not found:",e),Vt;let t=r,{split:l="words",stagger:s=.04,easing:c="ease-out",from:u={opacity:0,y:24},trigger:m={},once:p=true,onComplete:T}=n,z=window.matchMedia("(prefers-reduced-motion: reduce)").matches,M=typeof c=="function"?c:re[c]??re["ease-out"],ne=de(m.start??"top 85%"),$e=de(m.end??"top 40%"),B=t.innerHTML;t.setAttribute("aria-label",t.textContent??"");let ee;l==="chars"?ee=yr(t):l==="lines"?ee=zt(t):ee=_t(t);let X=ee.length;function G(g,$){u?.opacity!==void 0&&(g.style.opacity=String(u.opacity+(1-u.opacity)*$));let S=br($,u);S&&(g.style.transform=S);}function A(g){t.style.setProperty("--scroll-draw-progress",String(g)),ee.forEach(($,S)=>{let N=M(hr(g,S,X,s));G($,N);});}if(z)return A(1),T?.(),{destroy(){t.innerHTML=B,t.removeAttribute("aria-label");},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};A(0);let P=0,L=0,w=0,O=false,F=false,C=-1,E=0,oe=false,D=()=>window.scrollY,se=()=>window.innerHeight;function ie(){let g=t.getBoundingClientRect(),$=Te({top:g.top,height:g.height},D(),se(),ne,$e);P=$.tStart,L=$.tEnd;}function te(){if(!O||F)return;let g=J(D(),P,L,1);p&&(C=Math.max(C,g),g=C),E=g,A(g),g>=1&&!oe?(oe=true,T?.()):g<1&&!p&&(oe=false),w=requestAnimationFrame(te);}ie();let ae=new IntersectionObserver(g=>{g.forEach($=>{O=$.isIntersecting,O&&!F?w=requestAnimationFrame(te):cancelAnimationFrame(w);});}),d;function x(){clearTimeout(d),d=setTimeout(()=>{if(l==="lines"){let g=E;t.innerHTML=B,t.setAttribute("aria-label",t.textContent??""),ee=zt(t),A(g);}ie();},150);}return window.addEventListener("resize",x),window.addEventListener("orientationchange",x),ae.observe(t),Ae(t,{type:"text",getProgress:()=>E,getTrigger:()=>({tStart:P,tEnd:L})}),{destroy(){cancelAnimationFrame(w),ae.disconnect(),window.removeEventListener("resize",x),window.removeEventListener("orientationchange",x),clearTimeout(d),t.innerHTML=B,t.removeAttribute("aria-label"),Le(t);},replay(){C=-1,oe=false,E=0,F=false,A(0);},pause(){F=true,cancelAnimationFrame(w);},resume(){F&&(F=false,O&&(w=requestAnimationFrame(te)));},seek(g){let $=Math.min(1,Math.max(0,g));E=$,C=$,F=true,cancelAnimationFrame(w),A($);},getProgress(){return E}}}var ze=class{constructor(n){this.create=n;this.instance=null;this.el=null;this.key="";}init(n,r){return this.destroy(),this.el=n,this.latest=r,this.key=at(r),this.instance=this.create(n,kt(r,()=>this.latest)),this}update(n){return this.el?at(n)!==this.key?this.init(this.el,n):(this.latest=n,this):this}replay(){return this.instance?.replay(),this}pause(){return this.instance?.pause(),this}resume(){return this.instance?.resume(),this}seek(n){return this.instance?.seek(n),this}getProgress(){return this.instance?.getProgress()??0}destroy(){return this.instance?.destroy(),this.instance=this.el=null,this}},Wt=class extends ze{constructor(){super(Pt);}init(n,r={}){return super.init(n,r)}},Bt=class extends ze{constructor(){super(Dt);}},Gt=class extends ze{constructor(){super(Nt);}},jt=class extends ze{constructor(){super(Ht);}init(n,r={}){return super.init(n,r)}},Ut=class extends ze{constructor(){super(qt);}init(n,r={}){return super.init(n,r)}};exports.EngineRef=ze;exports.ScrollAnimateRef=Bt;exports.ScrollCounterRef=Gt;exports.ScrollDrawRef=Wt;exports.ScrollTextRef=Ut;exports.ScrollVideoRef=jt;
|
package/dist/angular/index.d.mts
CHANGED
|
@@ -1,38 +1,60 @@
|
|
|
1
|
-
import { a as ScrollDrawOptions } from '../types-DHU1zNEw.mjs';
|
|
2
|
-
export { S as ScrollDrawInstance } from '../types-DHU1zNEw.mjs';
|
|
1
|
+
import { S as ScrollDrawInstance, a as ScrollDrawOptions } from '../types-DHU1zNEw.mjs';
|
|
3
2
|
import { S as ScrollAnimateOptions } from '../engine-Ci08nM91.mjs';
|
|
4
3
|
import { S as ScrollCounterOptions } from '../index-BDGQEK6X.mjs';
|
|
5
4
|
import { ScrollVideoOptions } from '../video/index.mjs';
|
|
6
5
|
import { ScrollTextOptions } from '../text/index.mjs';
|
|
7
6
|
|
|
7
|
+
/**
|
|
8
|
+
* What every Ref class shares. `init()` starts the engine; `update()` is for
|
|
9
|
+
* `ngOnChanges`: it rebuilds the engine when an option really changed and does
|
|
10
|
+
* nothing for an equal object, so binding it to every change is safe. Callbacks
|
|
11
|
+
* are read live, so a new function alone never rebuilds. Exported for typing;
|
|
12
|
+
* use the five Ref classes below.
|
|
13
|
+
*/
|
|
14
|
+
declare class EngineRef<E extends Element, O extends object> {
|
|
15
|
+
private readonly create;
|
|
16
|
+
private instance;
|
|
17
|
+
private el;
|
|
18
|
+
private key;
|
|
19
|
+
private latest;
|
|
20
|
+
constructor(create: (el: E, options: O) => ScrollDrawInstance);
|
|
21
|
+
init(element: E, options: O): this;
|
|
22
|
+
/** Call from `ngOnChanges` with the current options. A no-op before `init()`. */
|
|
23
|
+
update(options: O): this;
|
|
24
|
+
replay(): this;
|
|
25
|
+
pause(): this;
|
|
26
|
+
resume(): this;
|
|
27
|
+
seek(p: number): this;
|
|
28
|
+
getProgress(): number;
|
|
29
|
+
destroy(): this;
|
|
30
|
+
}
|
|
8
31
|
/**
|
|
9
32
|
* Framework-agnostic class for use in Angular components.
|
|
10
33
|
* No @angular/core dependency required.
|
|
11
34
|
*
|
|
12
35
|
* @example
|
|
13
36
|
* @Component({ template: '<div #container><svg>...</svg></div>' })
|
|
14
|
-
* export class HeroComponent implements AfterViewInit, OnDestroy {
|
|
37
|
+
* export class HeroComponent implements AfterViewInit, OnChanges, OnDestroy {
|
|
15
38
|
* @ViewChild('container') containerRef!: ElementRef<HTMLElement>;
|
|
16
39
|
* private draw = new ScrollDrawRef();
|
|
17
40
|
*
|
|
41
|
+
* @Input() speed = 1.2;
|
|
42
|
+
*
|
|
18
43
|
* ngAfterViewInit() {
|
|
19
|
-
* this.draw.init(this.containerRef.nativeElement,
|
|
20
|
-
* easing: 'ease-out', speed: 1.2, fade: true,
|
|
21
|
-
* });
|
|
44
|
+
* this.draw.init(this.containerRef.nativeElement, this.options());
|
|
22
45
|
* }
|
|
23
46
|
*
|
|
47
|
+
* // Rebuilds only when an option really changed.
|
|
48
|
+
* ngOnChanges() { this.draw.update(this.options()); }
|
|
49
|
+
*
|
|
24
50
|
* ngOnDestroy() { this.draw.destroy(); }
|
|
51
|
+
*
|
|
52
|
+
* private options() { return { easing: 'ease-out', speed: this.speed, fade: true }; }
|
|
25
53
|
* }
|
|
26
54
|
*/
|
|
27
|
-
declare class ScrollDrawRef {
|
|
28
|
-
|
|
55
|
+
declare class ScrollDrawRef extends EngineRef<HTMLElement, ScrollDrawOptions> {
|
|
56
|
+
constructor();
|
|
29
57
|
init(element: HTMLElement, options?: ScrollDrawOptions): this;
|
|
30
|
-
replay(): this;
|
|
31
|
-
pause(): this;
|
|
32
|
-
resume(): this;
|
|
33
|
-
seek(p: number): this;
|
|
34
|
-
getProgress(): number;
|
|
35
|
-
destroy(): this;
|
|
36
58
|
}
|
|
37
59
|
/**
|
|
38
60
|
* Animate any CSS property on any element driven by scroll — Angular class-based API.
|
|
@@ -54,15 +76,8 @@ declare class ScrollDrawRef {
|
|
|
54
76
|
* ngOnDestroy() { this.animate.destroy(); }
|
|
55
77
|
* }
|
|
56
78
|
*/
|
|
57
|
-
declare class ScrollAnimateRef {
|
|
58
|
-
|
|
59
|
-
init(element: HTMLElement, options: ScrollAnimateOptions): this;
|
|
60
|
-
replay(): this;
|
|
61
|
-
pause(): this;
|
|
62
|
-
resume(): this;
|
|
63
|
-
seek(p: number): this;
|
|
64
|
-
getProgress(): number;
|
|
65
|
-
destroy(): this;
|
|
79
|
+
declare class ScrollAnimateRef extends EngineRef<HTMLElement, ScrollAnimateOptions> {
|
|
80
|
+
constructor();
|
|
66
81
|
}
|
|
67
82
|
/**
|
|
68
83
|
* Animate a number from `from` to `to` as the element scrolls into view — Angular class-based API.
|
|
@@ -84,15 +99,8 @@ declare class ScrollAnimateRef {
|
|
|
84
99
|
* ngOnDestroy() { this.counter.destroy(); }
|
|
85
100
|
* }
|
|
86
101
|
*/
|
|
87
|
-
declare class ScrollCounterRef {
|
|
88
|
-
|
|
89
|
-
init(element: HTMLElement, options: ScrollCounterOptions): this;
|
|
90
|
-
replay(): this;
|
|
91
|
-
pause(): this;
|
|
92
|
-
resume(): this;
|
|
93
|
-
seek(p: number): this;
|
|
94
|
-
getProgress(): number;
|
|
95
|
-
destroy(): this;
|
|
102
|
+
declare class ScrollCounterRef extends EngineRef<HTMLElement, ScrollCounterOptions> {
|
|
103
|
+
constructor();
|
|
96
104
|
}
|
|
97
105
|
/**
|
|
98
106
|
* Tie a <video> element's currentTime to scroll — Angular class-based API.
|
|
@@ -112,15 +120,9 @@ declare class ScrollCounterRef {
|
|
|
112
120
|
* ngOnDestroy() { this.video.destroy(); }
|
|
113
121
|
* }
|
|
114
122
|
*/
|
|
115
|
-
declare class ScrollVideoRef {
|
|
116
|
-
|
|
123
|
+
declare class ScrollVideoRef extends EngineRef<HTMLVideoElement, ScrollVideoOptions> {
|
|
124
|
+
constructor();
|
|
117
125
|
init(element: HTMLVideoElement, options?: ScrollVideoOptions): this;
|
|
118
|
-
replay(): this;
|
|
119
|
-
pause(): this;
|
|
120
|
-
resume(): this;
|
|
121
|
-
seek(p: number): this;
|
|
122
|
-
getProgress(): number;
|
|
123
|
-
destroy(): this;
|
|
124
126
|
}
|
|
125
127
|
/**
|
|
126
128
|
* Split text and stagger-animate each piece on scroll — Angular class-based API.
|
|
@@ -143,15 +145,9 @@ declare class ScrollVideoRef {
|
|
|
143
145
|
* ngOnDestroy() { this.text.destroy(); }
|
|
144
146
|
* }
|
|
145
147
|
*/
|
|
146
|
-
declare class ScrollTextRef {
|
|
147
|
-
|
|
148
|
+
declare class ScrollTextRef extends EngineRef<HTMLElement, ScrollTextOptions> {
|
|
149
|
+
constructor();
|
|
148
150
|
init(element: HTMLElement, options?: ScrollTextOptions): this;
|
|
149
|
-
replay(): this;
|
|
150
|
-
pause(): this;
|
|
151
|
-
resume(): this;
|
|
152
|
-
seek(p: number): this;
|
|
153
|
-
getProgress(): number;
|
|
154
|
-
destroy(): this;
|
|
155
151
|
}
|
|
156
152
|
|
|
157
|
-
export { ScrollAnimateOptions, ScrollAnimateRef, ScrollCounterOptions, ScrollCounterRef, ScrollDrawOptions, ScrollDrawRef, ScrollTextOptions, ScrollTextRef, ScrollVideoOptions, ScrollVideoRef };
|
|
153
|
+
export { EngineRef, ScrollAnimateOptions, ScrollAnimateRef, ScrollCounterOptions, ScrollCounterRef, ScrollDrawInstance, ScrollDrawOptions, ScrollDrawRef, ScrollTextOptions, ScrollTextRef, ScrollVideoOptions, ScrollVideoRef };
|
package/dist/angular/index.d.ts
CHANGED
|
@@ -1,38 +1,60 @@
|
|
|
1
|
-
import { a as ScrollDrawOptions } from '../types-DHU1zNEw.js';
|
|
2
|
-
export { S as ScrollDrawInstance } from '../types-DHU1zNEw.js';
|
|
1
|
+
import { S as ScrollDrawInstance, a as ScrollDrawOptions } from '../types-DHU1zNEw.js';
|
|
3
2
|
import { S as ScrollAnimateOptions } from '../engine-6AXEX8CL.js';
|
|
4
3
|
import { S as ScrollCounterOptions } from '../index-DxjUOIbK.js';
|
|
5
4
|
import { ScrollVideoOptions } from '../video/index.js';
|
|
6
5
|
import { ScrollTextOptions } from '../text/index.js';
|
|
7
6
|
|
|
7
|
+
/**
|
|
8
|
+
* What every Ref class shares. `init()` starts the engine; `update()` is for
|
|
9
|
+
* `ngOnChanges`: it rebuilds the engine when an option really changed and does
|
|
10
|
+
* nothing for an equal object, so binding it to every change is safe. Callbacks
|
|
11
|
+
* are read live, so a new function alone never rebuilds. Exported for typing;
|
|
12
|
+
* use the five Ref classes below.
|
|
13
|
+
*/
|
|
14
|
+
declare class EngineRef<E extends Element, O extends object> {
|
|
15
|
+
private readonly create;
|
|
16
|
+
private instance;
|
|
17
|
+
private el;
|
|
18
|
+
private key;
|
|
19
|
+
private latest;
|
|
20
|
+
constructor(create: (el: E, options: O) => ScrollDrawInstance);
|
|
21
|
+
init(element: E, options: O): this;
|
|
22
|
+
/** Call from `ngOnChanges` with the current options. A no-op before `init()`. */
|
|
23
|
+
update(options: O): this;
|
|
24
|
+
replay(): this;
|
|
25
|
+
pause(): this;
|
|
26
|
+
resume(): this;
|
|
27
|
+
seek(p: number): this;
|
|
28
|
+
getProgress(): number;
|
|
29
|
+
destroy(): this;
|
|
30
|
+
}
|
|
8
31
|
/**
|
|
9
32
|
* Framework-agnostic class for use in Angular components.
|
|
10
33
|
* No @angular/core dependency required.
|
|
11
34
|
*
|
|
12
35
|
* @example
|
|
13
36
|
* @Component({ template: '<div #container><svg>...</svg></div>' })
|
|
14
|
-
* export class HeroComponent implements AfterViewInit, OnDestroy {
|
|
37
|
+
* export class HeroComponent implements AfterViewInit, OnChanges, OnDestroy {
|
|
15
38
|
* @ViewChild('container') containerRef!: ElementRef<HTMLElement>;
|
|
16
39
|
* private draw = new ScrollDrawRef();
|
|
17
40
|
*
|
|
41
|
+
* @Input() speed = 1.2;
|
|
42
|
+
*
|
|
18
43
|
* ngAfterViewInit() {
|
|
19
|
-
* this.draw.init(this.containerRef.nativeElement,
|
|
20
|
-
* easing: 'ease-out', speed: 1.2, fade: true,
|
|
21
|
-
* });
|
|
44
|
+
* this.draw.init(this.containerRef.nativeElement, this.options());
|
|
22
45
|
* }
|
|
23
46
|
*
|
|
47
|
+
* // Rebuilds only when an option really changed.
|
|
48
|
+
* ngOnChanges() { this.draw.update(this.options()); }
|
|
49
|
+
*
|
|
24
50
|
* ngOnDestroy() { this.draw.destroy(); }
|
|
51
|
+
*
|
|
52
|
+
* private options() { return { easing: 'ease-out', speed: this.speed, fade: true }; }
|
|
25
53
|
* }
|
|
26
54
|
*/
|
|
27
|
-
declare class ScrollDrawRef {
|
|
28
|
-
|
|
55
|
+
declare class ScrollDrawRef extends EngineRef<HTMLElement, ScrollDrawOptions> {
|
|
56
|
+
constructor();
|
|
29
57
|
init(element: HTMLElement, options?: ScrollDrawOptions): this;
|
|
30
|
-
replay(): this;
|
|
31
|
-
pause(): this;
|
|
32
|
-
resume(): this;
|
|
33
|
-
seek(p: number): this;
|
|
34
|
-
getProgress(): number;
|
|
35
|
-
destroy(): this;
|
|
36
58
|
}
|
|
37
59
|
/**
|
|
38
60
|
* Animate any CSS property on any element driven by scroll — Angular class-based API.
|
|
@@ -54,15 +76,8 @@ declare class ScrollDrawRef {
|
|
|
54
76
|
* ngOnDestroy() { this.animate.destroy(); }
|
|
55
77
|
* }
|
|
56
78
|
*/
|
|
57
|
-
declare class ScrollAnimateRef {
|
|
58
|
-
|
|
59
|
-
init(element: HTMLElement, options: ScrollAnimateOptions): this;
|
|
60
|
-
replay(): this;
|
|
61
|
-
pause(): this;
|
|
62
|
-
resume(): this;
|
|
63
|
-
seek(p: number): this;
|
|
64
|
-
getProgress(): number;
|
|
65
|
-
destroy(): this;
|
|
79
|
+
declare class ScrollAnimateRef extends EngineRef<HTMLElement, ScrollAnimateOptions> {
|
|
80
|
+
constructor();
|
|
66
81
|
}
|
|
67
82
|
/**
|
|
68
83
|
* Animate a number from `from` to `to` as the element scrolls into view — Angular class-based API.
|
|
@@ -84,15 +99,8 @@ declare class ScrollAnimateRef {
|
|
|
84
99
|
* ngOnDestroy() { this.counter.destroy(); }
|
|
85
100
|
* }
|
|
86
101
|
*/
|
|
87
|
-
declare class ScrollCounterRef {
|
|
88
|
-
|
|
89
|
-
init(element: HTMLElement, options: ScrollCounterOptions): this;
|
|
90
|
-
replay(): this;
|
|
91
|
-
pause(): this;
|
|
92
|
-
resume(): this;
|
|
93
|
-
seek(p: number): this;
|
|
94
|
-
getProgress(): number;
|
|
95
|
-
destroy(): this;
|
|
102
|
+
declare class ScrollCounterRef extends EngineRef<HTMLElement, ScrollCounterOptions> {
|
|
103
|
+
constructor();
|
|
96
104
|
}
|
|
97
105
|
/**
|
|
98
106
|
* Tie a <video> element's currentTime to scroll — Angular class-based API.
|
|
@@ -112,15 +120,9 @@ declare class ScrollCounterRef {
|
|
|
112
120
|
* ngOnDestroy() { this.video.destroy(); }
|
|
113
121
|
* }
|
|
114
122
|
*/
|
|
115
|
-
declare class ScrollVideoRef {
|
|
116
|
-
|
|
123
|
+
declare class ScrollVideoRef extends EngineRef<HTMLVideoElement, ScrollVideoOptions> {
|
|
124
|
+
constructor();
|
|
117
125
|
init(element: HTMLVideoElement, options?: ScrollVideoOptions): this;
|
|
118
|
-
replay(): this;
|
|
119
|
-
pause(): this;
|
|
120
|
-
resume(): this;
|
|
121
|
-
seek(p: number): this;
|
|
122
|
-
getProgress(): number;
|
|
123
|
-
destroy(): this;
|
|
124
126
|
}
|
|
125
127
|
/**
|
|
126
128
|
* Split text and stagger-animate each piece on scroll — Angular class-based API.
|
|
@@ -143,15 +145,9 @@ declare class ScrollVideoRef {
|
|
|
143
145
|
* ngOnDestroy() { this.text.destroy(); }
|
|
144
146
|
* }
|
|
145
147
|
*/
|
|
146
|
-
declare class ScrollTextRef {
|
|
147
|
-
|
|
148
|
+
declare class ScrollTextRef extends EngineRef<HTMLElement, ScrollTextOptions> {
|
|
149
|
+
constructor();
|
|
148
150
|
init(element: HTMLElement, options?: ScrollTextOptions): this;
|
|
149
|
-
replay(): this;
|
|
150
|
-
pause(): this;
|
|
151
|
-
resume(): this;
|
|
152
|
-
seek(p: number): this;
|
|
153
|
-
getProgress(): number;
|
|
154
|
-
destroy(): this;
|
|
155
151
|
}
|
|
156
152
|
|
|
157
|
-
export { ScrollAnimateOptions, ScrollAnimateRef, ScrollCounterOptions, ScrollCounterRef, ScrollDrawOptions, ScrollDrawRef, ScrollTextOptions, ScrollTextRef, ScrollVideoOptions, ScrollVideoRef };
|
|
153
|
+
export { EngineRef, ScrollAnimateOptions, ScrollAnimateRef, ScrollCounterOptions, ScrollCounterRef, ScrollDrawInstance, ScrollDrawOptions, ScrollDrawRef, ScrollTextOptions, ScrollTextRef, ScrollVideoOptions, ScrollVideoRef };
|
package/dist/angular/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import {a as a$
|
|
1
|
+
import {a,b}from'../chunk-XSVTHCLO.mjs';import {a as a$3}from'../chunk-JC5BD4RB.mjs';import {a as a$4}from'../chunk-SNCRC6BA.mjs';import {a as a$2}from'../chunk-4MH5SQTH.mjs';import {a as a$1}from'../chunk-QJ4H2HW3.mjs';import {b as b$1}from'../chunk-LINFV2GK.mjs';import'../chunk-OJFWQ6CU.mjs';import'../chunk-YWKPTYSG.mjs';import'../chunk-YZV4Z3EQ.mjs';import'../chunk-PEFR3ZB7.mjs';import'../chunk-DM6EDKWH.mjs';import'../chunk-4DOJSIEQ.mjs';import'../chunk-BCV4RAIX.mjs';import'../chunk-LFSU6LR3.mjs';var r=class{constructor(t){this.create=t;this.instance=null;this.el=null;this.key="";}init(t,e){return this.destroy(),this.el=t,this.latest=e,this.key=a(e),this.instance=this.create(t,b(e,()=>this.latest)),this}update(t){return this.el?a(t)!==this.key?this.init(this.el,t):(this.latest=t,this):this}replay(){return this.instance?.replay(),this}pause(){return this.instance?.pause(),this}resume(){return this.instance?.resume(),this}seek(t){return this.instance?.seek(t),this}getProgress(){return this.instance?.getProgress()??0}destroy(){return this.instance?.destroy(),this.instance=this.el=null,this}},u=class extends r{constructor(){super(b$1);}init(t,e={}){return super.init(t,e)}},h=class extends r{constructor(){super(a$1);}},m=class extends r{constructor(){super(a$2);}},O=class extends r{constructor(){super(a$3);}init(t,e={}){return super.init(t,e)}},d=class extends r{constructor(){super(a$4);}init(t,e={}){return super.init(t,e)}};export{r as EngineRef,h as ScrollAnimateRef,m as ScrollCounterRef,u as ScrollDrawRef,d as ScrollTextRef,O as ScrollVideoRef};
|