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/dist/group/index.cjs
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
'use strict';function
|
|
2
|
-
<div style="position:absolute;${
|
|
3
|
-
<div style="position:absolute;${c?`left:${a}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${a}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",s,{passive:true}),s(),t}function Ye(e,n,r){let t=(n.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),s=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,f=>{let p=parseFloat(f),a=t[s++]??p;return String(+(p+(a-p)*r).toFixed(4))})}function Ue(e,n={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:r,...t}=n,s=r?{...rt[r],...t}:t,f=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:p="path, polyline, line, polygon, rect, circle",speed:a=1,fade:c=false,easing:g="linear",trigger:A={},stagger:R=0,direction:x="forward",once:Y=false,debug:Ce=false,axis:V="y",scrollContainer:we,autoReverse:pe=false,delay:de=0,strokeColor:U,strokeWidth:Q,fillOpacity:ee,waypoints:P,velocityScale:G=false,threshold:Oe=0,rootMargin:Ne="0px",repeat:ae=0,repeatDelay:ke=0,morphTo:k,clip:te,autoplay:le=false,duration:ve=1e3,native:ce=true,onProgress:j,onStart:Z,onComplete:J,onEnter:re,onLeave:Ee,onEnterBack:Le,onLeaveBack:Se}=s,ne=te===true?"left":typeof te=="string"?te:false,oe=typeof g=="function"?g:Ae[g]??Ae.linear,ge=Te(A.start??"top bottom"),Fe=Te(A.end??"bottom top"),I=typeof we=="string"?document.querySelector(we):we??null,B=Array.isArray(U)?U[0]:null,L=Array.isArray(U)?U[1]:typeof U=="string"?U:null,D=Array.isArray(Q)?Q[0]:null,i=Array.isArray(Q)?Q[1]:typeof Q=="number"?Q:null,m=Array.isArray(ee)?ee[0]:null,w=Array.isArray(ee)?ee[1]:typeof ee=="number"?ee:null;function C(o){let l=o*100;switch(ne){case "right":return `inset(0 0 0 ${100-l}%)`;case "top":return `inset(0 0 ${100-l}% 0)`;case "bottom":return `inset(${100-l}% 0 0 0)`;case "center":return `circle(${o*150}% at 50% 50%)`;default:return `inset(0 ${100-l}% 0 0)`}}let b=ne?[]:Array.from(e.querySelectorAll(p)),$=[],v=[],F=0,H=0,O=false,_=false,N=0,Re=false,se=-1,He=-1,z=false,ye=0,ue=0,fe,Ge=null,me=new Set,ze=-1,Ze=performance.now(),xe=NaN;function De(){return I?V==="x"?I.scrollLeft:I.scrollTop:V==="x"?window.scrollX:window.scrollY}function Je(){return I?V==="x"?I.clientWidth:I.clientHeight:V==="x"?window.innerWidth:window.innerHeight}function Ke(){let o=e.getBoundingClientRect(),l,y,M;if(I){let q=I.getBoundingClientRect();l=V==="x"?o.left-q.left+I.scrollLeft:o.top-q.top+I.scrollTop,y=V==="x"?o.width:o.height,M=De();}else l=V==="x"?o.left:o.top,y=V==="x"?o.width:o.height,M=De();let W=Pe({top:l,height:y},M,Je(),ge,Fe);F=W.tStart,H=W.tEnd,Ce&&process.env.NODE_ENV!=="production"&&(Ge?.remove(),Ge=xt(F,H,V));}function pt(o,l){if(e.style.setProperty("--scroll-draw-progress",String(o)),ne){let y=l==="reverse"?1-o:o;e.style.clipPath=C(y);return}b.forEach((y,M)=>{y.style.strokeDashoffset=l==="reverse"?`${$[M]*o}`:`${$[M]*(1-o)}`,c&&(y.style.opacity=l==="reverse"?`${1-o}`:`${o}`),B&&L?y.style.stroke=Me(B,L,o):L&&(y.style.stroke=L),D!==null&&i!==null?y.style.strokeWidth=`${D+(i-D)*o}`:i!==null&&(y.style.strokeWidth=`${i}`),m!==null&&w!==null?y.style.fillOpacity=`${m+(w-m)*o}`:w!==null&&(y.style.fillOpacity=`${w}`),k&&y.tagName.toLowerCase()==="path"&&v[M]&&y.setAttribute("d",Ye(v[M],k,o));});}function We(){if(e.style.setProperty("--scroll-draw-progress","0"),ne){e.style.clipPath=C(0);return}b.forEach((o,l)=>{o.style.strokeDasharray=`${$[l]}`,o.style.strokeDashoffset=x==="reverse"?"0":`${$[l]}`,c?o.style.opacity=x==="reverse"?"1":"0":o.style.opacity="",B&&(o.style.stroke=B),D!==null&&(o.style.strokeWidth=`${D}`),m!==null&&(o.style.fillOpacity=`${m}`),k&&o.tagName.toLowerCase()==="path"&&v[l]&&o.setAttribute("d",v[l]);});}if(b.forEach(o=>{St(o);let l=Be(o);$.push(l),o.tagName.toLowerCase()==="path"?v.push(o.getAttribute("d")??""):v.push(""),f?(o.style.strokeDasharray=`${l}`,o.style.strokeDashoffset=x==="reverse"?`${l}`:"0",c&&(o.style.opacity="1"),L&&(o.style.stroke=L),i!==null&&(o.style.strokeWidth=`${i}`),w!==null&&(o.style.fillOpacity=`${w}`),k&&o.tagName.toLowerCase()==="path"&&o.setAttribute("d",k)):(o.style.strokeDasharray=`${l}`,o.style.strokeDashoffset=x==="reverse"?"0":`${l}`,c?o.style.opacity=x==="reverse"?"1":"0":o.style.opacity="",B&&(o.style.stroke=B),D!==null&&(o.style.strokeWidth=`${D}`),m!==null&&(o.style.fillOpacity=`${m}`));}),ne){if(f)return e.style.clipPath=C(1),J?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=C(0);}else if(f)return J?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function dt(){return !(ce===false||!Et()||!b.length||typeof g!="string"||!(g in ot)||ne||V!=="y"||I||a!==1||R!==0||Y||pe||G!==false||k||P||ae||de>0||j||Z||J||re||Ee||Le||Se||U!=null||Q!=null||ee!=null||(A.start??"top bottom").trim()!=="top bottom"||(A.end??"bottom top").trim()!=="bottom top")}function gt(){let o=`svg-scroll-draw-${++vt}`,l=x==="reverse"?"0":"var(--ssd-len)",y=x==="reverse"?"var(--ssd-len)":"0",M=`stroke-dashoffset:${l};`,W=`stroke-dashoffset:${y};`;c&&(M+=`opacity:${x==="reverse"?1:0};`,W+=`opacity:${x==="reverse"?0:1};`);let q=document.createElement("style");q.setAttribute("data-svg-scroll-draw",""),q.textContent=`@keyframes ${o}{from{${M}}to{${W}}}.${o}{animation-name:${o};animation-duration:auto;animation-timing-function:${ot[g]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(q);function X(u,h){u.style.setProperty("--ssd-len",String($[h])),u.style.strokeDasharray=`${$[h]}`,u.style.strokeDashoffset="",u.style.opacity="",u.style.animationPlayState="",u.classList.add(o);}b.forEach(X);let d=false,E=-1;function S(){if(E>=0)return E;let u=e.getBoundingClientRect(),{tStart:h,tEnd:T}=Pe({top:u.top,height:u.height},De(),Je(),ge,Fe);return oe(K(De(),h,T,a))}return {destroy(){b.forEach(u=>{u.classList.remove(o),u.style.removeProperty("--ssd-len"),u.style.animationPlayState="";}),q.remove();},replay(){d=false,E=-1,b.forEach(X);},pause(){d=true,b.forEach(u=>{u.style.animationPlayState="paused";});},resume(){d&&(d=false,b.forEach(u=>{u.style.animationPlayState="running";}));},seek(u){let h=Math.min(1,Math.max(0,u));E=h,d=true,b.forEach((T,he)=>{T.classList.remove(o),T.style.strokeDashoffset=x==="reverse"?`${$[he]*h}`:`${$[he]*(1-h)}`,c&&(T.style.opacity=x==="reverse"?`${1-h}`:`${h}`);});},getProgress(){return S()}}}if(dt())return gt();function yt(){let o=Math.max(1,ve),l=0,y=0;function M(S){let u=true;if(ne){let h=Math.min(1,Math.max(0,S/o)),T=oe(h);ye=T,e.style.setProperty("--scroll-draw-progress",String(T)),e.style.clipPath=C(x==="reverse"?1-T:T),j?.(T),h<1&&(u=false);}else b.forEach((h,T)=>{let he=T*R*o,$e=Math.min(1,Math.max(0,(S-he)/o)),ie=oe($e);h.style.strokeDashoffset=x==="reverse"?`${$[T]*ie}`:`${$[T]*(1-ie)}`,c&&(h.style.opacity=x==="reverse"?`${1-ie}`:`${ie}`),B&&L?h.style.stroke=Me(B,L,ie):L&&(h.style.stroke=L),D!==null&&i!==null?h.style.strokeWidth=`${D+(i-D)*ie}`:i!==null&&(h.style.strokeWidth=`${i}`),m!==null&&w!==null?h.style.fillOpacity=`${m+(w-m)*ie}`:w!==null&&(h.style.fillOpacity=`${w}`),k&&h.tagName.toLowerCase()==="path"&&v[T]&&h.setAttribute("d",Ye(v[T],k,ie)),T===0&&(j?.(ie),e.style.setProperty("--scroll-draw-progress",String(ie))),$e<1&&(u=false);});if(P){let h=Math.min(1,Math.max(0,S/o)),T=oe(h);for(let he in P){let $e=parseFloat(he);T>=$e&&!me.has($e)&&(me.add($e),P[he]?.());}}return u}function W(S){if(z)return;let u=S-l;_||(_=true,Z?.());let h=M(u);if(h&&!O){O=true,M(o*(1+Math.max(0,b.length-1)*R)),J?.(),ue<(ae==="infinite"?1/0:ae??0)&&(ue++,fe=setTimeout(()=>{l=performance.now(),_=false,O=false,me.clear(),We(),N=requestAnimationFrame(W);},ke));return}h||(N=requestAnimationFrame(W));}function q(){cancelAnimationFrame(N),clearTimeout(fe),l=performance.now(),y=0,z=false,_=false,O=false,ue=0,me.clear(),We(),N=requestAnimationFrame(W);}let X=new IntersectionObserver(S=>{S.forEach(u=>{u.isIntersecting&&!(Y&&O)?q():!u.isIntersecting&&!Y&&!O&&(cancelAnimationFrame(N),clearTimeout(fe),l=null);});},{root:I??null,threshold:Oe,rootMargin:Ne}),d;function E(){clearTimeout(d),d=setTimeout(()=>{b.forEach((S,u)=>{$[u]=Be(S),S.style.strokeDasharray=`${$[u]}`;});},150);}return window.addEventListener("resize",E),window.addEventListener("orientationchange",E),de>0?setTimeout(()=>X.observe(e),de):X.observe(e),{destroy(){cancelAnimationFrame(N),clearTimeout(fe),X.disconnect(),window.removeEventListener("resize",E),window.removeEventListener("orientationchange",E),clearTimeout(d);},replay(){ue=0,q();},pause(){z||(z=true,y=performance.now()-l,cancelAnimationFrame(N));},resume(){z&&(z=false,l=performance.now()-y,N=requestAnimationFrame(W));},seek(S){let u=Math.min(1,Math.max(0,S));ye=u,z=true,y=u*o,l=performance.now()-y,cancelAnimationFrame(N),M(y);},getProgress(){return ye}}}if(le)return yt();Ke();function qe(){if(!Re||z)return;let o=performance.now(),l=De(),y=a;if(G!==false){let d=o-Ze,E=d>0?Math.abs(l-(ze<0?l:ze))/d:0;y=a*Math.max(.2,1+E*(typeof G=="number"?G:1)*.04);}ze=l,Ze=o;let M=pe?He===-1||l>=He?"forward":"reverse":x;He=l;let W=H-F,q=true,X=W===0?0:(l-F)/W;if(isNaN(xe)||(xe<=0&&X>0?re?.():xe>0&&X<=0&&Se?.(),xe<1&&X>=1?Ee?.():xe>=1&&X<1&&Le?.()),xe=X,ne){let d=oe(K(l,F,H,y));Y&&!pe&&(se=Math.max(se,d),d=se),ye=d,e.style.setProperty("--scroll-draw-progress",String(d));let E=M==="reverse"?1-d:d;e.style.clipPath=C(E),j?.(d),!_&&K(l,F,H,y)>0&&(_=true,Z?.()),d>=1&&!O?(O=true,J?.(),ue<(ae==="infinite"?1/0:ae??0)&&(ue++,fe=setTimeout(()=>{se=-1,_=false,O=false,e.style.clipPath=C(0);},ke))):d<1&&!Y&&(O=false),N=requestAnimationFrame(qe);return}if(b.forEach((d,E)=>{let S=E*R*W,u=oe(K(l,F+S,H+S,y));Y&&!pe&&(se=Math.max(se,u),u=se),ye=u,d.style.strokeDashoffset=M==="reverse"?`${$[E]*u}`:`${$[E]*(1-u)}`,c&&(d.style.opacity=M==="reverse"?`${1-u}`:`${u}`),B&&L?d.style.stroke=Me(B,L,u):L&&(d.style.stroke=L),D!==null&&i!==null?d.style.strokeWidth=`${D+(i-D)*u}`:i!==null&&(d.style.strokeWidth=`${i}`),m!==null&&w!==null?d.style.fillOpacity=`${m+(w-m)*u}`:w!==null&&(d.style.fillOpacity=`${w}`),k&&d.tagName.toLowerCase()==="path"&&v[E]&&d.setAttribute("d",Ye(v[E],k,u)),E===0&&(j?.(u),e.style.setProperty("--scroll-draw-progress",String(u))),u<1&&(q=false);}),P){let d=oe(K(l,F,H,y));for(let E in P){let S=parseFloat(E);d>=S&&!me.has(S)&&(me.add(S),P[E]?.());}}!_&&K(l,F,H,y)>0&&(_=true,Z?.()),q&&!O?(O=true,J?.(),ue<(ae==="infinite"?1/0:ae??0)&&(ue++,fe=setTimeout(()=>{se=-1,_=false,O=false,me.clear(),We();},ke))):!q&&!Y&&(O=false),N=requestAnimationFrame(qe);}let je=new IntersectionObserver(o=>{o.forEach(l=>{Re=l.isIntersecting,Re&&!z?N=requestAnimationFrame(qe):cancelAnimationFrame(N);});},{root:I??null,threshold:Oe,rootMargin:Ne}),Xe;function Ve(){clearTimeout(Xe),Xe=setTimeout(()=>{b.forEach((o,l)=>{$[l]=Be(o),o.style.strokeDasharray=`${$[l]}`;}),Ke();},150);}return window.addEventListener("resize",Ve),window.addEventListener("orientationchange",Ve),de>0?setTimeout(()=>je.observe(e),de):je.observe(e),{destroy(){cancelAnimationFrame(N),clearTimeout(fe),je.disconnect(),window.removeEventListener("resize",Ve),window.removeEventListener("orientationchange",Ve),clearTimeout(Xe),Ge?.remove();},replay(){se=-1,He=-1,ze=-1,_=false,O=false,ue=0,z=false,me.clear(),clearTimeout(fe),We();},pause(){z=true,cancelAnimationFrame(N);},resume(){z&&(z=false,Re&&(N=requestAnimationFrame(qe)));},seek(o){let l=Math.min(1,Math.max(0,o));ye=l,se=l,z=true,cancelAnimationFrame(N),pt(l,x);},getProgress(){return ye}}}var st=new Map;function it(e,n){st.set(e,n);}function at(e){st.delete(e);}function $t(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function lt(e){let n=[],r=/([\w]+)\(([^)]*)\)/g,t;for(;(t=r.exec(e))!==null;){let s=[],f=[],p=t[2].trim();if(p)for(let a of p.split(/[\s,]+/)){let c=a.match(/^([-+]?[\d.eE]+)(.*)$/);s.push(c?parseFloat(c[1]):0),f.push(c?c[2]:"");}n.push({fn:t[1],nums:s,units:f});}return n}function At(e,n,r){let t=lt(e),s=lt(n);return t.length===0||t.length!==s.length?r<1?e:n:t.map((f,p)=>{let a=s[p];return f.fn!==a.fn||f.nums.length!==a.nums.length?r<1?`${f.fn}(${f.nums.map((c,g)=>`${c}${f.units[g]}`).join(", ")})`:`${a.fn}(${a.nums.map((c,g)=>`${c}${a.units[g]}`).join(", ")})`:`${f.fn}(${f.nums.map((c,g)=>`${c+(a.nums[g]-c)*r}${f.units[g]}`).join(", ")})`}).join(" ")}function ct(e,n,r){if(typeof e=="number"&&typeof n=="number")return String(e+(n-e)*r);let t=String(e),s=String(n);if($t(t))return Me(t,s,r);if(t.includes("("))return At(t,s,r);let f=t.match(/^([-+]?[\d.]+)(.*)$/),p=s.match(/^([-+]?[\d.]+)(.*)$/);if(f&&p){let a=parseFloat(f[1]),c=parseFloat(p[1]);return `${a+(c-a)*r}${f[2]||p[2]}`}return r<1?t:s}function Tt(e){return e.replace(/([A-Z])/g,n=>`-${n.toLowerCase()}`)}var ut={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},Pt=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),Mt=0;function kt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function _e(e,n){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let{props:t,trigger:s={},easing:f="ease-out",speed:p=1,once:a=false,axis:c="y",scrollContainer:g,native:A=true,velocityScale:R=false,onProgress:x,onComplete:Y,onEnter:Ce,onLeave:V,onEnterBack:we,onLeaveBack:pe}=n,de=window.matchMedia("(prefers-reduced-motion: reduce)").matches,U=typeof f=="function"?f:Ae[f]??Ae["ease-out"],Q=Te(s.start??"top bottom"),ee=Te(s.end??"bottom top"),P=typeof g=="string"?document.querySelector(g):g??null,G=Object.entries(t).map(([i,m])=>({prop:Tt(i),from:Array.isArray(m)?m[0]:"",to:Array.isArray(m)?m[1]:m}));function Oe(){let i=window.getComputedStyle(e);for(let m of G)m.from===""&&(m.from=i.getPropertyValue(m.prop).trim()||"0");}function Ne(){for(let i of G)e.style.setProperty(i.prop,String(i.to));}if(de)return Ne(),Y?.(),r;Oe();function ae(){if(!A||!kt()||typeof f!="string"||!(f in ut)||c!=="y"||P||a||p!==1||x||Y||Ce||V||we||pe||R!==false||(s.start??"top bottom").trim()!=="top bottom"||(s.end??"bottom top").trim()!=="bottom top")return false;for(let i of G)if(!Pt.has(i.prop))return false;return true}function ke(){let i=`ssd-a-${++Mt}`,m=G.map(v=>`${v.prop}:${v.from}`).join(";"),w=G.map(v=>`${v.prop}:${v.to}`).join(";"),C=document.createElement("style");C.setAttribute("data-ssd-animate",""),C.textContent=`@keyframes ${i}{from{${m}}to{${w}}}.${i}{animation-name:${i};animation-duration:auto;animation-timing-function:${ut[f]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(C),e.classList.add(i);let b=()=>c==="x"?window.scrollX:window.scrollY,$=()=>c==="x"?window.innerWidth:window.innerHeight;return {destroy(){e.classList.remove(i),C.remove();},replay(){e.classList.remove(i),e.offsetWidth,e.classList.add(i);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(v){let F=Math.min(1,Math.max(0,v));e.classList.remove(i);for(let H of G)e.style.setProperty(H.prop,ct(H.from,H.to,F));},getProgress(){let v=e.getBoundingClientRect(),F=b(),H=$(),{tStart:O,tEnd:_}=Pe({top:v.top,height:v.height},F,H,Q,ee);return U(K(F,O,_,p))}}}if(ae())return ke();let k=0,te=0,le=0,ve=false,ce=false,j=-1,Z=0,J=false,re=NaN,Ee=-1,Le=0,Se=()=>P?c==="x"?P.scrollLeft:P.scrollTop:c==="x"?window.scrollX:window.scrollY,ne=()=>P?c==="x"?P.clientWidth:P.clientHeight:c==="x"?window.innerWidth:window.innerHeight;function oe(){let i=e.getBoundingClientRect(),m,w;if(P){let b=P.getBoundingClientRect();m=c==="x"?i.left-b.left+P.scrollLeft:i.top-b.top+P.scrollTop,w=c==="x"?i.width:i.height;}else m=c==="x"?i.left:i.top,w=c==="x"?i.width:i.height;let C=Pe({top:m,height:w},Se(),ne(),Q,ee);k=C.tStart,te=C.tEnd;}function ge(i){e.style.setProperty("--scroll-draw-progress",String(i));for(let m of G)e.style.setProperty(m.prop,ct(m.from,m.to,i));x?.(i);}function Fe(i){if(isNaN(re)){re=i;return}re<=0&&i>0?Ce?.():re>0&&i<=0&&pe?.(),re<1&&i>=1?V?.():re>=1&&i<1&&we?.(),re=i;}function I(){if(!ve||ce)return;let i=performance.now(),m=Se(),w=p;if(R!==false){let $=i-Le,v=$>0?Math.abs(m-(Ee<0?m:Ee))/$:0;w=p*Math.max(.2,1+v*(typeof R=="number"?R:1)*.04);}Ee=m,Le=i;let C=te===k?0:(m-k)/(te-k);Fe(C);let b=U(K(m,k,te,w));a&&(j=Math.max(j,b),b=j),Z=b,ge(b),b>=1&&!J?(J=true,Y?.()):b<1&&!a&&(J=false),le=requestAnimationFrame(I);}oe();{let i=U(K(Se(),k,te,p));a&&i>0&&(j=i),Z=i,ge(i);}let B=new IntersectionObserver(i=>{i.forEach(m=>{ve=m.isIntersecting,ve&&!ce?le=requestAnimationFrame(I):cancelAnimationFrame(le);});},{root:P??null}),L;function D(){clearTimeout(L),L=setTimeout(oe,150);}return window.addEventListener("resize",D),window.addEventListener("orientationchange",D),B.observe(e),it(e,{type:"animate",getProgress:()=>Z,getTrigger:()=>({tStart:k,tEnd:te})}),{destroy(){cancelAnimationFrame(le),B.disconnect(),window.removeEventListener("resize",D),window.removeEventListener("orientationchange",D),clearTimeout(L),at(e);},replay(){j=-1,J=false,Z=0,ce=false,ge(0);},pause(){ce=true,cancelAnimationFrame(le);},resume(){ce&&(ce=false,ve&&(le=requestAnimationFrame(I)));},seek(i){let m=Math.min(1,Math.max(0,i));Z=m,j=m,ce=true,cancelAnimationFrame(le),ge(m);},getProgress(){return Z}}}var ft={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function mt(e,n={}){if(typeof window>"u")return ft;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] scrollParallax: element not found:",e),ft;let{speed:t=.3,axis:s="y",easing:f="linear",trigger:p,onProgress:a}=n,c=r.getBoundingClientRect(),g=s==="x"?c.width:c.height,A=t*g;return _e(r,{props:s==="x"?{transform:["translateX(0px)",`translateX(${-A}px)`]}:{transform:["translateY(0px)",`translateY(${-A}px)`]},trigger:p??{start:"top bottom",end:"bottom top"},easing:f,native:false,onProgress:a})}function Ie(e){return e.map(n=>typeof n=="string"?document.querySelector(n):n).filter(n=>n!==null)}var be={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function qt(e,n={}){if(typeof window>"u")return be;let r=Ie(e).map(t=>Ue(t,n));return {destroy(){r.forEach(t=>t.destroy());},replay(){r.forEach(t=>t.replay());},pause(){r.forEach(t=>t.pause());},resume(){r.forEach(t=>t.resume());},seek(t){r.forEach(s=>s.seek(t));},getProgress(){return r[0]?.getProgress()??0}}}function Vt(e,n={}){if(typeof window>"u")return be;let r=Ie(e);if(r.length===0)return be;let t=0,s=[];function f(a){return Ue(r[a],{...n,once:true,onComplete(){n.onComplete?.(),t=a+1,s[t]?.resume();}})}function p(){r.forEach((a,c)=>{s[c]=f(c);});for(let a=1;a<s.length;a++)s[a].pause();}return p(),{destroy(){s.forEach(a=>a.destroy()),s.length=0;},replay(){s.forEach(a=>a.destroy()),s.length=0,t=0,p();},pause(){s[t]?.pause();},resume(){s[t]?.resume();},seek(a){s[t]?.seek(a);},getProgress(){return s[t]?.getProgress()??0}}}function Bt(e,n){if(typeof window>"u")return be;let r=Ie(e).map(t=>_e(t,n));return {destroy(){r.forEach(t=>t.destroy());},replay(){r.forEach(t=>t.replay());},pause(){r.forEach(t=>t.pause());},resume(){r.forEach(t=>t.resume());},seek(t){r.forEach(s=>s.seek(t));},getProgress(){return r[0]?.getProgress()??0}}}function _t(e,n){if(typeof window>"u")return be;let r=Ie(e);if(r.length===0)return be;let t=0,s=[];function f(a){return _e(r[a],{...n,once:true,onComplete(){n.onComplete?.(),t=a+1,s[t]?.resume();}})}function p(){r.forEach((a,c)=>{s[c]=f(c);});for(let a=1;a<s.length;a++)s[a].pause();}return p(),{destroy(){s.forEach(a=>a.destroy()),s.length=0;},replay(){s.forEach(a=>a.destroy()),s.length=0,t=0,p();},pause(){s[t]?.pause();},resume(){s[t]?.resume();},seek(a){s[t]?.seek(a);},getProgress(){return s[t]?.getProgress()??0}}}function Gt(e,n={}){if(typeof window>"u")return be;let r=Ie(e).map(t=>mt(t,n));return {destroy(){r.forEach(t=>t.destroy());},replay(){r.forEach(t=>t.replay());},pause(){r.forEach(t=>t.pause());},resume(){r.forEach(t=>t.resume());},seek(t){r.forEach(s=>s.seek(t));},getProgress(){return r[0]?.getProgress()??0}}}exports.scrollAnimateGroup=Bt;exports.scrollAnimateSequence=_t;exports.scrollDrawGroup=qt;exports.scrollDrawSequence=Vt;exports.scrollParallaxGroup=Gt;
|
|
1
|
+
'use strict';function Rt({bounces:e=3,decay:n=.5}={}){let r=Math.max(1,Math.round(e)),t=Math.max(.01,Math.min(.99,n)),o=Math.sqrt(t),c=0,m=[];for(let h=0;h<r;h++){let S=Math.pow(o,h);m.push(S),c+=S;}let i=[0],u=0;for(let h=0;h<r;h++)u+=m[h]/c,i.push(u);return h=>{if(h<=0)return 0;if(h>=1)return 1;for(let S=0;S<r;S++)if(h<=i[S+1]){let V=(h-i[S])/(i[S+1]-i[S]);if(S===0)return V*(2-V);let x=1-Math.pow(t,S);return x+(1-x)*(2*V-1)*(2*V-1)}return 1}}function Ft({amplitude:e=1,period:n=.4}={}){let r=Math.max(1,e),t=Math.max(.1,n),o=r<=1?t/4:t/(2*Math.PI)*Math.asin(1/r);return c=>c<=0?0:c>=1?1:r*Math.pow(2,-10*c)*Math.sin((c-o)*(2*Math.PI)/t)+1}var Se={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:Rt(),elastic:Ft()};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 ht(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 bt(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 Ie(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 Nt(e,n,r){return Math.min(r,Math.max(n,e))}function ne(e,n,r,t){return r===n?0:Nt((e-n)/(r-n)*t,0,1)}function Ze(e,n,r){let t=e.getBoundingClientRect(),o=r==="x"?t.width:t.height;return n?{top:r==="x"?t.left-n.getBoundingClientRect().left+n.scrollLeft:t.top-n.getBoundingClientRect().top+n.scrollTop,height:o,scroll:0}:{top:r==="x"?t.left:t.top,height:o,scroll:r==="x"?window.scrollX:window.scrollY}}function Ce(e,n,r,t,o){let c=ht(e.top,e.height,n,t.element)-bt(t.viewport,r),m=ht(e.top,e.height,n,o.element)-bt(o.viewport,r);return {tStart:c,tEnd:m}}function wt(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 Oe(e,n,r){let t=wt(e),o=wt(n);return !t||!o?e:`rgb(${Math.round(t[0]+(o[0]-t[0])*r)},${Math.round(t[1]+(o[1]-t[1])*r)},${Math.round(t[2]+(o[2]-t[2])*r)})`}var vt={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 Ke=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function ye(e,...n){Ke&&console.warn(`[svg-scroll-draw] ${e}`,...n);}var _t="cubic-bezier(0.333333, 0, 0.666667, 0.333333)",Ht="cubic-bezier(0.333333, 0.666667, 0.666667, 1)",Et=33;function Vt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timing-function: linear(0, 1)")}function zt(e){let n=[];for(let r=0;r<Et;r++){let t=r/(Et-1);n.push(String(Math.round(e(t)*1e5)/1e5));}return `linear(${n.join(",")})`}function Je(e){switch(e){case "linear":return "linear";case "ease-in":return _t;case "ease-out":return Ht;case "ease-in-out":return Vt()?zt(Se["ease-in-out"]):null;default:return null}}var St=Symbol.for("svg-scroll-draw.registry");function xt(){let e=globalThis;return e[St]||(e[St]=new Map)}function Ve(e,n){xt().set(e,n);}function ze(e){xt().delete(e);}var Wt=0;function qt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")&&CSS.supports("view-timeline-name: --x")}function Bt(e){let n=e.getAttribute("stroke"),r=e.getAttribute("fill");!n||n==="none"?ye("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&ye("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Gt(e,n,r){let t=document.createElement("div");t.setAttribute("data-svg-scroll-draw-debug",""),t.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function o(){let c=r==="x"?window.scrollX:window.scrollY,m=e-c,i=n-c,u=r==="x";t.innerHTML=`
|
|
2
|
+
<div style="position:absolute;${u?`left:${m}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${m}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;${u?`left:${i}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${i}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(t),window.addEventListener("scroll",o,{passive:true}),o(),{el:t,destroy(){window.removeEventListener("scroll",o),t.remove();}}}var Tt=/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,$t=/[MmLlHhVvCcSsQqTtAaZz]/g;function jt(e,n,r){if(!Ke)return;let t=(e.match($t)??[]).join("").toUpperCase(),o=(n.match($t)??[]).join("").toUpperCase(),c=(e.match(Tt)??[]).length,m=(n.match(Tt)??[]).length;if(t!==o){ye(`morphTo: command sequence differs (${t||"\u2205"} \u2192 ${o||"\u2205"}). Interpolation is coordinate-for-coordinate, so the result will not reach the target shape. Redraw both paths with the same commands.`,r);return}c!==m&&ye(`morphTo: coordinate count differs (${c} \u2192 ${m}). Extra coordinates are ignored and missing ones hold their start value, so the result will not reach the target shape.`,r);}function at(e,n,r){let t=(n.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),o=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,c=>{let m=parseFloat(c),i=t[o++]??m;return String(+(m+(i-m)*r).toFixed(4))})}function lt(e,n={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:r,...t}=n,o=r?{...vt[r],...t}:t,c=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:m="path, polyline, line, polygon, rect, circle",speed:i=1,fade:u=false,easing:h="linear",trigger:S={},stagger:V=0,direction:x="forward",once:fe=false,debug:qe=false,axis:J="y",scrollContainer:Pe,autoReverse:xe=false,delay:he=0,strokeColor:oe,strokeWidth:me,fillOpacity:ee,waypoints:se,velocityScale:be=false,threshold:Re=0,rootMargin:Q="0px",repeat:C=0,repeatDelay:Fe=0,morphTo:z,clip:Me,autoplay:Ne=false,duration:Be=1e3,native:tt=true,onProgress:Te,onStart:U,onComplete:W,onEnter:ie,onLeave:$e,onEnterBack:ae,onLeaveBack:pe}=o,_=Me===true?"left":typeof Me=="string"?Me:false,Z=typeof h=="function"?h:Se[h]??Se.linear,le=De(S.start??"top bottom"),ke=De(S.end??"bottom top"),X=typeof Pe=="string"?document.querySelector(Pe):Pe??null,Y=Array.isArray(oe)?oe[0]:null,O=Array.isArray(oe)?oe[1]:typeof oe=="string"?oe:null,R=Array.isArray(me)?me[0]:null,M=Array.isArray(me)?me[1]:typeof me=="number"?me:null,H=Array.isArray(ee)?ee[0]:null,D=Array.isArray(ee)?ee[1]:typeof ee=="number"?ee:null;function ce(s){let l=s*100;switch(_){case "right":return `inset(0 0 0 ${100-l}%)`;case "top":return `inset(0 0 ${100-l}% 0)`;case "bottom":return `inset(${100-l}% 0 0 0)`;case "center":return `circle(${s*150}% at 50% 50%)`;default:return `inset(0 ${100-l}% 0 0)`}}let T=_?[]:Array.from(e.querySelectorAll(m)),b=[],a=[],f=0,q=0,v=false,$=false,A=0,te=false,B=-1,I=-1,k=false,G=0,de=0,we,rt=null;function ct(){rt?.destroy(),rt=null;}let ve=new Set,ut=NaN,Ee=true,Ge=-1,ft=performance.now(),Le=NaN;function nt(){return X?J==="x"?X.scrollLeft:X.scrollTop:J==="x"?window.scrollX:window.scrollY}function mt(){return X?J==="x"?X.clientWidth:X.clientHeight:J==="x"?window.innerWidth:window.innerHeight}function pt(){let s=Ze(e,X,J);return Ce(s,s.scroll,mt(),le,ke)}function dt(){(({tStart:f,tEnd:q}=pt())),qe&&Ke&&(ct(),rt=Gt(f,q,J));}function ot(s,l=pt){Ve(e,{type:"draw",getProgress:()=>s.getProgress(),getTrigger:l});let g=s.destroy;return s.destroy=()=>{g.call(s),ze(e);},s}function Dt(s,l){if(e.style.setProperty("--scroll-draw-progress",String(s)),_){let g=l==="reverse"?1-s:s;e.style.clipPath=ce(g);return}T.forEach((g,F)=>{g.style.strokeDashoffset=l==="reverse"?`${b[F]*s}`:`${b[F]*(1-s)}`,u&&(g.style.opacity=l==="reverse"?`${1-s}`:`${s}`),Y&&O?g.style.stroke=Oe(Y,O,s):O&&(g.style.stroke=O),R!==null&&M!==null?g.style.strokeWidth=`${R+(M-R)*s}`:M!==null&&(g.style.strokeWidth=`${M}`),H!==null&&D!==null?g.style.fillOpacity=`${H+(D-H)*s}`:D!==null&&(g.style.fillOpacity=`${D}`),z&&g.tagName.toLowerCase()==="path"&&a[F]&&g.setAttribute("d",at(a[F],z,s));});}function je(){if(e.style.setProperty("--scroll-draw-progress","0"),_){e.style.clipPath=ce(0);return}T.forEach((s,l)=>{s.style.strokeDasharray=`${b[l]}`,s.style.strokeDashoffset=x==="reverse"?"0":`${b[l]}`,u?s.style.opacity=x==="reverse"?"1":"0":s.style.opacity="",Y&&(s.style.stroke=Y),R!==null&&(s.style.strokeWidth=`${R}`),H!==null&&(s.style.fillOpacity=`${H}`),z&&s.tagName.toLowerCase()==="path"&&a[l]&&s.setAttribute("d",a[l]);});}if(T.forEach(s=>{Bt(s);let l=Ie(s);b.push(l);let g=s.tagName.toLowerCase()==="path";g?a.push(s.getAttribute("d")??""):a.push(""),z&&(g?jt(a[a.length-1],z,s):ye(`morphTo only applies to <path> elements \u2014 ignored on <${s.tagName}>.`,s)),c?(s.style.strokeDasharray=`${l}`,s.style.strokeDashoffset=x==="reverse"?`${l}`:"0",u&&(s.style.opacity="1"),O&&(s.style.stroke=O),M!==null&&(s.style.strokeWidth=`${M}`),D!==null&&(s.style.fillOpacity=`${D}`),z&&s.tagName.toLowerCase()==="path"&&s.setAttribute("d",z)):(s.style.strokeDasharray=`${l}`,s.style.strokeDashoffset=x==="reverse"?"0":`${l}`,u?s.style.opacity=x==="reverse"?"1":"0":s.style.opacity="",Y&&(s.style.stroke=Y),R!==null&&(s.style.strokeWidth=`${R}`),H!==null&&(s.style.fillOpacity=`${H}`));}),_){if(c)return e.style.clipPath=ce(1),W?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=ce(0);}else if(c)return W?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};let gt=typeof h=="string"?Je(h):null;function It(){return !(tt===false||!qt()||!T.length||!gt||_||J!=="y"||X||i!==1||V!==0||fe||xe||be!==false||z||se||C||he>0||Te||U||W||ie||$e||ae||pe||oe!=null||me!=null||ee!=null||(S.start??"top bottom").trim()!=="top bottom"||(S.end??"bottom top").trim()!=="bottom top")}function Ct(){let s=++Wt,l=`svg-scroll-draw-${s}`,g=`svg-scroll-draw-host-${s}`,F=`--svg-scroll-draw-${s}`,ge=x==="reverse"?"0":"var(--ssd-len)",ue=x==="reverse"?"var(--ssd-len)":"0",re=`stroke-dashoffset:${ge};`,y=`stroke-dashoffset:${ue};`;u&&(re+=`opacity:${x==="reverse"?1:0};`,y+=`opacity:${x==="reverse"?0:1};`);let w=document.createElement("style");w.setAttribute("data-svg-scroll-draw",""),w.textContent=`@keyframes ${l}{from{${re}}to{${y}}}.${g}{view-timeline-name:${F};view-timeline-axis:block;}.${l}{animation-name:${l};animation-duration:auto;animation-timing-function:${gt};animation-fill-mode:both;animation-timeline:${F};animation-range:cover 0% cover 100%;}`,document.head.appendChild(w),e.classList.add(g);function N(p,L){p.style.setProperty("--ssd-len",String(b[L])),p.style.strokeDasharray=`${b[L]}`,p.style.strokeDashoffset="",p.style.opacity="",p.style.animationPlayState="",p.classList.add(l);}T.forEach(N);let d=false,E=-1;function P(){if(E>=0)return E;let p=e.getBoundingClientRect(),{tStart:L,tEnd:K}=Ce({top:p.top,height:p.height},nt(),mt(),le,ke);return Z(ne(nt(),L,K,i))}return {destroy(){e.classList.remove(g),T.forEach(p=>{p.classList.remove(l),p.style.removeProperty("--ssd-len"),p.style.animationPlayState="";}),w.remove();},replay(){d=false,E=-1,T.forEach(N);},pause(){d=true,T.forEach(p=>{p.style.animationPlayState="paused";});},resume(){d&&(d=false,T.forEach(p=>{p.style.animationPlayState="running";}));},seek(p){let L=Math.min(1,Math.max(0,p));E=L,d=true,T.forEach((K,j)=>{K.classList.remove(l),K.style.strokeDashoffset=x==="reverse"?`${b[j]*L}`:`${b[j]*(1-L)}`,u&&(K.style.opacity=x==="reverse"?`${1-L}`:`${L}`);});},getProgress(){return P()},refresh(){T.forEach((p,L)=>{b[L]=Ie(p),p.style.setProperty("--ssd-len",String(b[L])),p.style.strokeDasharray=`${b[L]}`;});}}}if(It())return ot(Ct());function Ot(){let s=Math.max(1,Be),l=0,g=0,F=false;function ge(d){let E=true;if(_){let P=Math.min(1,Math.max(0,d/s)),p=Z(P);G=p,e.style.setProperty("--scroll-draw-progress",String(p)),e.style.clipPath=ce(x==="reverse"?1-p:p),Te?.(p),P<1&&(E=false);}else T.forEach((P,p)=>{let L=p*V*s,K=Math.min(1,Math.max(0,(d-L)/s)),j=Z(K);P.style.strokeDashoffset=x==="reverse"?`${b[p]*j}`:`${b[p]*(1-j)}`,u&&(P.style.opacity=x==="reverse"?`${1-j}`:`${j}`),Y&&O?P.style.stroke=Oe(Y,O,j):O&&(P.style.stroke=O),R!==null&&M!==null?P.style.strokeWidth=`${R+(M-R)*j}`:M!==null&&(P.style.strokeWidth=`${M}`),H!==null&&D!==null?P.style.fillOpacity=`${H+(D-H)*j}`:D!==null&&(P.style.fillOpacity=`${D}`),z&&P.tagName.toLowerCase()==="path"&&a[p]&&P.setAttribute("d",at(a[p],z,j)),p===0&&(G=j,Te?.(j),e.style.setProperty("--scroll-draw-progress",String(j))),K<1&&(E=false);});if(se){let P=Math.min(1,Math.max(0,d/s)),p=Z(P);for(let L in se){let K=parseFloat(L);p>=K&&!ve.has(K)&&(ve.add(K),se[L]?.());}}return E}function ue(d){if(k)return;let E=d-l;$||($=true,U?.());let P=ge(E);if(P&&!v){v=true,ge(s*(1+Math.max(0,T.length-1)*V)),W?.(),de<(C==="infinite"?1/0:C??0)&&(de++,we=setTimeout(()=>{l=performance.now(),$=false,v=false,ve.clear(),je(),A=requestAnimationFrame(ue);},Fe));return}P||(A=requestAnimationFrame(ue));}function re(){cancelAnimationFrame(A),clearTimeout(we),l=performance.now(),g=0,k=false,$=false,v=false,de=0,F=true,G=0,ve.clear(),je(),A=requestAnimationFrame(ue);}let y=new IntersectionObserver(d=>{d.forEach(E=>{E.isIntersecting&&!(fe&&v)?re():!E.isIntersecting&&!fe&&!v&&(cancelAnimationFrame(A),clearTimeout(we),F=false);});},{root:X??null,threshold:Re,rootMargin:Q}),w;function N(){clearTimeout(w),w=setTimeout(()=>{T.forEach((d,E)=>{b[E]=Ie(d),d.style.strokeDasharray=`${b[E]}`;});},150);}return window.addEventListener("resize",N),window.addEventListener("orientationchange",N),he>0?setTimeout(()=>y.observe(e),he):y.observe(e),{destroy(){cancelAnimationFrame(A),clearTimeout(we),y.disconnect(),window.removeEventListener("resize",N),window.removeEventListener("orientationchange",N),clearTimeout(w);},replay(){de=0,re();},pause(){k||!F||(k=true,g=performance.now()-l,cancelAnimationFrame(A));},resume(){k&&(k=false,F=true,l=performance.now()-g,A=requestAnimationFrame(ue));},seek(d){let E=Math.min(1,Math.max(0,d));G=E,k=true,g=E*s,l=performance.now()-g,cancelAnimationFrame(A),ge(g);},getProgress(){return G},refresh(){clearTimeout(w),T.forEach((d,E)=>{b[E]=Ie(d),d.style.strokeDasharray=`${b[E]}`;});}}}if(Ne)return ot(Ot());dt();function Ue(){if(!te||k)return;let s=performance.now(),l=nt();if(!Ee&&be===false&&l===ut){A=requestAnimationFrame(Ue);return}Ee=false,ut=l;let g=i;if(be!==false){let y=s-ft,w=y>0?Math.abs(l-(Ge<0?l:Ge))/y:0;g=i*Math.max(.2,1+w*(typeof be=="number"?be:1)*.04);}Ge=l,ft=s;let F=xe?I===-1||l>=I?"forward":"reverse":x;I=l;let ge=q-f,ue=true,re=ge===0?0:(l-f)/ge;if(isNaN(Le)||(Le<=0&&re>0?ie?.():Le>0&&re<=0&&pe?.(),Le<1&&re>=1?$e?.():Le>=1&&re<1&&ae?.()),Le=re,_){let y=Z(ne(l,f,q,g));fe&&!xe&&(B=Math.max(B,y),y=B),G=y,e.style.setProperty("--scroll-draw-progress",String(y));let w=F==="reverse"?1-y:y;e.style.clipPath=ce(w),Te?.(y),!$&&ne(l,f,q,g)>0&&($=true,U?.()),y>=1&&!v?(v=true,W?.(),de<(C==="infinite"?1/0:C??0)&&(de++,we=setTimeout(()=>{B=-1,$=false,v=false,e.style.clipPath=ce(0);},Fe))):y<1&&!fe&&(v=false),A=requestAnimationFrame(Ue);return}if(T.forEach((y,w)=>{let N=w*V*ge,d=Z(ne(l,f+N,q+N,g));fe&&!xe&&(B=Math.max(B,d),d=B),G=d,y.style.strokeDashoffset=F==="reverse"?`${b[w]*d}`:`${b[w]*(1-d)}`,u&&(y.style.opacity=F==="reverse"?`${1-d}`:`${d}`),Y&&O?y.style.stroke=Oe(Y,O,d):O&&(y.style.stroke=O),R!==null&&M!==null?y.style.strokeWidth=`${R+(M-R)*d}`:M!==null&&(y.style.strokeWidth=`${M}`),H!==null&&D!==null?y.style.fillOpacity=`${H+(D-H)*d}`:D!==null&&(y.style.fillOpacity=`${D}`),z&&y.tagName.toLowerCase()==="path"&&a[w]&&y.setAttribute("d",at(a[w],z,d)),w===0&&(Te?.(d),e.style.setProperty("--scroll-draw-progress",String(d))),d<1&&(ue=false);}),se){let y=Z(ne(l,f,q,g));for(let w in se){let N=parseFloat(w);y>=N&&!ve.has(N)&&(ve.add(N),se[w]?.());}}!$&&ne(l,f,q,g)>0&&($=true,U?.()),ue&&!v?(v=true,W?.(),de<(C==="infinite"?1/0:C??0)&&(de++,we=setTimeout(()=>{B=-1,$=false,v=false,ve.clear(),je(),Ee=true;},Fe))):!ue&&!fe&&(v=false),A=requestAnimationFrame(Ue);}let st=false;function Xe(){st||(st=true,A=requestAnimationFrame(function(){Ue();}));}function Ye(){st=false,cancelAnimationFrame(A);}let it=new IntersectionObserver(s=>{s.forEach(l=>{te=l.isIntersecting,te&&!k?(Ee=true,Xe()):Ye();});},{root:X??null,threshold:Re,rootMargin:Q});function yt(){T.forEach((s,l)=>{b[l]=Ie(s),s.style.strokeDasharray=`${b[l]}`;}),dt(),Ee=true;}let Qe;function _e(){clearTimeout(Qe),Qe=setTimeout(yt,150);}window.addEventListener("resize",_e),window.addEventListener("orientationchange",_e);let He;return typeof ResizeObserver<"u"&&(He=new ResizeObserver(()=>_e()),He.observe(document.body),He.observe(document.documentElement),He.observe(e)),he>0?setTimeout(()=>it.observe(e),he):it.observe(e),ot({destroy(){cancelAnimationFrame(A),clearTimeout(we),Ye(),it.disconnect(),He?.disconnect(),window.removeEventListener("resize",_e),window.removeEventListener("orientationchange",_e),clearTimeout(Qe),ct();},replay(){B=-1,I=-1,Ge=-1,$=false,v=false,de=0,k=false,G=0,ve.clear(),clearTimeout(we),je(),Ee=true,te&&Xe();},pause(){k=true,Ye();},resume(){k&&(k=false,Ee=true,te&&Xe());},seek(s){let l=Math.min(1,Math.max(0,s));G=l,B=l,k=true,Ye(),Dt(l,x),Ee=true;},getProgress(){return G},refresh(){clearTimeout(Qe),yt(),te&&!k&&Xe();}},()=>({tStart:f,tEnd:q}))}function Ut(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function At(e){let n=[],r=/([\w]+)\(([^)]*)\)/g,t;for(;(t=r.exec(e))!==null;){let o=[],c=[],m=t[2].trim();if(m)for(let i of m.split(/[\s,]+/)){let u=i.match(/^([-+]?[\d.eE]+)(.*)$/);o.push(u?parseFloat(u[1]):0),c.push(u?u[2]:"");}n.push({fn:t[1],nums:o,units:c});}return n}function Xt(e,n,r){let t=At(e),o=At(n);return t.length===0||t.length!==o.length?r<1?e:n:t.map((c,m)=>{let i=o[m];return c.fn!==i.fn||c.nums.length!==i.nums.length?r<1?`${c.fn}(${c.nums.map((u,h)=>`${u}${c.units[h]}`).join(", ")})`:`${i.fn}(${i.nums.map((u,h)=>`${u}${i.units[h]}`).join(", ")})`:`${c.fn}(${c.nums.map((u,h)=>`${u+(i.nums[h]-u)*r}${c.units[h]}`).join(", ")})`}).join(" ")}function Pt(e,n,r){if(typeof e=="number"&&typeof n=="number")return String(e+(n-e)*r);let t=String(e),o=String(n);if(Ut(t))return Oe(t,o,r);if(t.includes("("))return Xt(t,o,r);let c=t.match(/^([-+]?[\d.]+)(.*)$/),m=o.match(/^([-+]?[\d.]+)(.*)$/);if(c&&m){let i=parseFloat(c[1]),u=parseFloat(m[1]);return `${i+(u-i)*r}${c[2]||m[2]}`}return r<1?t:o}function Yt(e){return e.replace(/([A-Z])/g,n=>`-${n.toLowerCase()}`)}var Qt=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),Zt=0,Mt="--scroll-draw-progress";function Kt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function et(e,n){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let{props:t,trigger:o={},easing:c="ease-out",speed:m=1,once:i=false,axis:u="y",scrollContainer:h,native:S=true,velocityScale:V=false,respectReducedMotion:x=true,triggerElement:fe,onProgress:qe,onComplete:J,onEnter:Pe,onLeave:xe,onEnterBack:he,onLeaveBack:oe}=n,me=x&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,ee=typeof c=="function"?c:Se[c]??Se["ease-out"],se=De(o.start??"top bottom"),be=De(o.end??"bottom top"),Re=fe??e,Q=typeof h=="string"?document.querySelector(h):h??null,C=Object.entries(t).map(([a,f])=>({prop:Yt(a),from:Array.isArray(f)?f[0]:"",to:Array.isArray(f)?f[1]:f}));function Fe(){let a=window.getComputedStyle(e);for(let f of C)f.from===""&&(f.from=a.getPropertyValue(f.prop).trim()||"0");}function z(){for(let a of C)e.style.setProperty(a.prop,String(a.to));}let Me=new Map;for(let a of [...C.map(f=>f.prop),Mt])Me.set(a,e.style.getPropertyValue(a));function Ne(){for(let[a,f]of Me)f?e.style.setProperty(a,f):e.style.removeProperty(a);}if(me)return z(),J?.(),{...r,destroy:Ne,getProgress:()=>1};Fe();let Be=typeof c=="string"?Je(c):null;function tt(){if(!S||!Kt()||!Be||u!=="y"||Q||Re!==e||i||m!==1||qe||J||Pe||xe||he||oe||V!==false||(o.start??"top bottom").trim()!=="top bottom"||(o.end??"bottom top").trim()!=="bottom top")return false;for(let a of C)if(!Qt.has(a.prop))return false;return true}function Te(){let a=`ssd-a-${++Zt}`,f=C.map(I=>`${I.prop}:${I.from}`).join(";"),q=C.map(I=>`${I.prop}:${I.to}`).join(";"),v=document.createElement("style");v.setAttribute("data-ssd-animate",""),v.textContent=`@keyframes ${a}{from{${f}}to{${q}}}.${a}{animation-name:${a};animation-duration:auto;animation-timing-function:${Be};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(v),e.classList.add(a);let $=()=>u==="x"?window.scrollX:window.scrollY,A=()=>u==="x"?window.innerWidth:window.innerHeight,te=()=>{let I=e.getBoundingClientRect();return Ce({top:I.top,height:I.height},$(),A(),se,be)};Ve(e,{type:"animate",getProgress:()=>B.getProgress(),getTrigger:te});let B={destroy(){e.classList.remove(a),v.remove(),e.style.animationPlayState="",Ne(),ze(e);},replay(){e.classList.remove(a),e.offsetWidth,e.classList.add(a);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(I){let k=Math.min(1,Math.max(0,I));e.classList.remove(a);for(let G of C)e.style.setProperty(G.prop,Pt(G.from,G.to,k));},getProgress(){let{tStart:I,tEnd:k}=te();return ee(ne($(),I,k,m))}};return B}if(tt())return Te();let U=0,W=0,ie=0,$e=false,ae=false,pe=-1,_=0,Z=false,le=NaN,ke=-1,X=0,Y=()=>Q?u==="x"?Q.scrollLeft:Q.scrollTop:u==="x"?window.scrollX:window.scrollY,O=()=>Q?u==="x"?Q.clientWidth:Q.clientHeight:u==="x"?window.innerWidth:window.innerHeight;function R(){let a=Ze(Re,Q,u),f=Ce(a,a.scroll,O(),se,be);U=f.tStart,W=f.tEnd;}function M(a){e.style.setProperty(Mt,String(a));for(let f of C)e.style.setProperty(f.prop,Pt(f.from,f.to,a));qe?.(a);}function H(a){if(isNaN(le)){le=a;return}le<=0&&a>0?Pe?.():le>0&&a<=0&&oe?.(),le<1&&a>=1?xe?.():le>=1&&a<1&&he?.(),le=a;}function D(){if(!$e||ae)return;let a=performance.now(),f=Y(),q=m;if(V!==false){let A=a-X,te=A>0?Math.abs(f-(ke<0?f:ke))/A:0;q=m*Math.max(.2,1+te*(typeof V=="number"?V:1)*.04);}ke=f,X=a;let v=W===U?0:(f-U)/(W-U);H(v);let $=ee(ne(f,U,W,q));i&&(pe=Math.max(pe,$),$=pe),_=$,M($),$>=1&&!Z?(Z=true,J?.()):$<1&&!i&&(Z=false),ie=requestAnimationFrame(D);}R(),W===U&&ye("scrollAnimate: the trigger window has zero length (start and end resolve to the same scroll position), so this element will never animate. If the target is inside a position:sticky stage, measure the trigger from the container that holds the scroll room via `triggerElement`.",e);{let a=ee(ne(Y(),U,W,m));i&&a>0&&(pe=a),_=a,M(a);}let ce=new IntersectionObserver(a=>{a.forEach(f=>{$e=f.isIntersecting,$e&&!ae?ie=requestAnimationFrame(D):cancelAnimationFrame(ie);});},{root:Q??null}),T;function b(){clearTimeout(T),T=setTimeout(R,150);}return window.addEventListener("resize",b),window.addEventListener("orientationchange",b),ce.observe(e),Ve(e,{type:"animate",getProgress:()=>_,getTrigger:()=>({tStart:U,tEnd:W})}),{destroy(){cancelAnimationFrame(ie),ce.disconnect(),window.removeEventListener("resize",b),window.removeEventListener("orientationchange",b),clearTimeout(T),Ne(),ze(e);},replay(){pe=-1,Z=false,_=0,ae=false,M(0);},pause(){ae=true,cancelAnimationFrame(ie);},resume(){ae&&(ae=false,$e&&(ie=requestAnimationFrame(D)));},seek(a){let f=Math.min(1,Math.max(0,a));_=f,pe=f,ae=true,cancelAnimationFrame(ie),M(f);},getProgress(){return _}}}var kt={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Lt(e,n={}){if(typeof window>"u")return kt;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return ye("scrollParallax: element not found:",e),kt;let{speed:t=.3,axis:o="y",easing:c="linear",trigger:m,onProgress:i}=n,u=r.getBoundingClientRect(),h=o==="x"?u.width:u.height,S=t*h;return et(r,{props:o==="x"?{transform:["translateX(0px)",`translateX(${-S}px)`]}:{transform:["translateY(0px)",`translateY(${-S}px)`]},trigger:m??{start:"top bottom",end:"bottom top"},easing:c,native:false,onProgress:i})}function We(e){return e.map(n=>typeof n=="string"?document.querySelector(n):n).filter(n=>n!==null)}var Ae={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function br(e,n={}){if(typeof window>"u")return Ae;let r=We(e).map(t=>lt(t,n));return {destroy(){r.forEach(t=>t.destroy());},replay(){r.forEach(t=>t.replay());},pause(){r.forEach(t=>t.pause());},resume(){r.forEach(t=>t.resume());},seek(t){r.forEach(o=>o.seek(t));},getProgress(){return r[0]?.getProgress()??0},refresh(){r.forEach(t=>t.refresh?.());}}}function wr(e,n={}){if(typeof window>"u")return Ae;let r=We(e);if(r.length===0)return Ae;let t=0,o=[];function c(i){return lt(r[i],{...n,once:true,onComplete(){n.onComplete?.(),t=Math.min(i+1,r.length-1),t>i&&o[t]?.resume();}})}function m(){r.forEach((i,u)=>{o[u]=c(u);});for(let i=1;i<o.length;i++)o[i].pause();}return m(),{destroy(){o.forEach(i=>i.destroy()),o.length=0;},replay(){o.forEach(i=>i.destroy()),o.length=0,t=0,m();},pause(){o[t]?.pause();},resume(){o[t]?.resume();},seek(i){o[t]?.seek(i);},getProgress(){return o[t]?.getProgress()??0},refresh(){o.forEach(i=>i.refresh?.());}}}function vr(e,n){if(typeof window>"u")return Ae;let r=We(e).map(t=>et(t,n));return {destroy(){r.forEach(t=>t.destroy());},replay(){r.forEach(t=>t.replay());},pause(){r.forEach(t=>t.pause());},resume(){r.forEach(t=>t.resume());},seek(t){r.forEach(o=>o.seek(t));},getProgress(){return r[0]?.getProgress()??0},refresh(){r.forEach(t=>t.refresh?.());}}}function Er(e,n){if(typeof window>"u")return Ae;let r=We(e);if(r.length===0)return Ae;let t=0,o=[];function c(i){return et(r[i],{...n,once:true,onComplete(){n.onComplete?.(),t=Math.min(i+1,r.length-1),t>i&&o[t]?.resume();}})}function m(){r.forEach((i,u)=>{o[u]=c(u);});for(let i=1;i<o.length;i++)o[i].pause();}return m(),{destroy(){o.forEach(i=>i.destroy()),o.length=0;},replay(){o.forEach(i=>i.destroy()),o.length=0,t=0,m();},pause(){o[t]?.pause();},resume(){o[t]?.resume();},seek(i){o[t]?.seek(i);},getProgress(){return o[t]?.getProgress()??0},refresh(){o.forEach(i=>i.refresh?.());}}}function Sr(e,n={}){if(typeof window>"u")return Ae;let r=We(e).map(t=>Lt(t,n));return {destroy(){r.forEach(t=>t.destroy());},replay(){r.forEach(t=>t.replay());},pause(){r.forEach(t=>t.pause());},resume(){r.forEach(t=>t.resume());},seek(t){r.forEach(o=>o.seek(t));},getProgress(){return r[0]?.getProgress()??0},refresh(){r.forEach(t=>t.refresh?.());}}}exports.scrollAnimateGroup=vr;exports.scrollAnimateSequence=Er;exports.scrollDrawGroup=br;exports.scrollDrawSequence=wr;exports.scrollParallaxGroup=Sr;
|
package/dist/group/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/group/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/group/index.mjs
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
function
|
|
2
|
-
<div style="position:absolute;${
|
|
3
|
-
<div style="position:absolute;${c?`left:${a}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${a}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",s,{passive:true}),s(),t}function Ye(e,n,r){let t=(n.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),s=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,f=>{let p=parseFloat(f),a=t[s++]??p;return String(+(p+(a-p)*r).toFixed(4))})}function Ue(e,n={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:r,...t}=n,s=r?{...rt[r],...t}:t,f=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:p="path, polyline, line, polygon, rect, circle",speed:a=1,fade:c=false,easing:g="linear",trigger:A={},stagger:R=0,direction:x="forward",once:Y=false,debug:Ce=false,axis:V="y",scrollContainer:we,autoReverse:pe=false,delay:de=0,strokeColor:U,strokeWidth:Q,fillOpacity:ee,waypoints:P,velocityScale:G=false,threshold:Oe=0,rootMargin:Ne="0px",repeat:ae=0,repeatDelay:ke=0,morphTo:k,clip:te,autoplay:le=false,duration:ve=1e3,native:ce=true,onProgress:j,onStart:Z,onComplete:J,onEnter:re,onLeave:Ee,onEnterBack:Le,onLeaveBack:Se}=s,ne=te===true?"left":typeof te=="string"?te:false,oe=typeof g=="function"?g:Ae[g]??Ae.linear,ge=Te(A.start??"top bottom"),Fe=Te(A.end??"bottom top"),I=typeof we=="string"?document.querySelector(we):we??null,B=Array.isArray(U)?U[0]:null,L=Array.isArray(U)?U[1]:typeof U=="string"?U:null,D=Array.isArray(Q)?Q[0]:null,i=Array.isArray(Q)?Q[1]:typeof Q=="number"?Q:null,m=Array.isArray(ee)?ee[0]:null,w=Array.isArray(ee)?ee[1]:typeof ee=="number"?ee:null;function C(o){let l=o*100;switch(ne){case "right":return `inset(0 0 0 ${100-l}%)`;case "top":return `inset(0 0 ${100-l}% 0)`;case "bottom":return `inset(${100-l}% 0 0 0)`;case "center":return `circle(${o*150}% at 50% 50%)`;default:return `inset(0 ${100-l}% 0 0)`}}let b=ne?[]:Array.from(e.querySelectorAll(p)),$=[],v=[],F=0,H=0,O=false,_=false,N=0,Re=false,se=-1,He=-1,z=false,ye=0,ue=0,fe,Ge=null,me=new Set,ze=-1,Ze=performance.now(),xe=NaN;function De(){return I?V==="x"?I.scrollLeft:I.scrollTop:V==="x"?window.scrollX:window.scrollY}function Je(){return I?V==="x"?I.clientWidth:I.clientHeight:V==="x"?window.innerWidth:window.innerHeight}function Ke(){let o=e.getBoundingClientRect(),l,y,M;if(I){let q=I.getBoundingClientRect();l=V==="x"?o.left-q.left+I.scrollLeft:o.top-q.top+I.scrollTop,y=V==="x"?o.width:o.height,M=De();}else l=V==="x"?o.left:o.top,y=V==="x"?o.width:o.height,M=De();let W=Pe({top:l,height:y},M,Je(),ge,Fe);F=W.tStart,H=W.tEnd,Ce&&process.env.NODE_ENV!=="production"&&(Ge?.remove(),Ge=xt(F,H,V));}function pt(o,l){if(e.style.setProperty("--scroll-draw-progress",String(o)),ne){let y=l==="reverse"?1-o:o;e.style.clipPath=C(y);return}b.forEach((y,M)=>{y.style.strokeDashoffset=l==="reverse"?`${$[M]*o}`:`${$[M]*(1-o)}`,c&&(y.style.opacity=l==="reverse"?`${1-o}`:`${o}`),B&&L?y.style.stroke=Me(B,L,o):L&&(y.style.stroke=L),D!==null&&i!==null?y.style.strokeWidth=`${D+(i-D)*o}`:i!==null&&(y.style.strokeWidth=`${i}`),m!==null&&w!==null?y.style.fillOpacity=`${m+(w-m)*o}`:w!==null&&(y.style.fillOpacity=`${w}`),k&&y.tagName.toLowerCase()==="path"&&v[M]&&y.setAttribute("d",Ye(v[M],k,o));});}function We(){if(e.style.setProperty("--scroll-draw-progress","0"),ne){e.style.clipPath=C(0);return}b.forEach((o,l)=>{o.style.strokeDasharray=`${$[l]}`,o.style.strokeDashoffset=x==="reverse"?"0":`${$[l]}`,c?o.style.opacity=x==="reverse"?"1":"0":o.style.opacity="",B&&(o.style.stroke=B),D!==null&&(o.style.strokeWidth=`${D}`),m!==null&&(o.style.fillOpacity=`${m}`),k&&o.tagName.toLowerCase()==="path"&&v[l]&&o.setAttribute("d",v[l]);});}if(b.forEach(o=>{St(o);let l=Be(o);$.push(l),o.tagName.toLowerCase()==="path"?v.push(o.getAttribute("d")??""):v.push(""),f?(o.style.strokeDasharray=`${l}`,o.style.strokeDashoffset=x==="reverse"?`${l}`:"0",c&&(o.style.opacity="1"),L&&(o.style.stroke=L),i!==null&&(o.style.strokeWidth=`${i}`),w!==null&&(o.style.fillOpacity=`${w}`),k&&o.tagName.toLowerCase()==="path"&&o.setAttribute("d",k)):(o.style.strokeDasharray=`${l}`,o.style.strokeDashoffset=x==="reverse"?"0":`${l}`,c?o.style.opacity=x==="reverse"?"1":"0":o.style.opacity="",B&&(o.style.stroke=B),D!==null&&(o.style.strokeWidth=`${D}`),m!==null&&(o.style.fillOpacity=`${m}`));}),ne){if(f)return e.style.clipPath=C(1),J?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=C(0);}else if(f)return J?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function dt(){return !(ce===false||!Et()||!b.length||typeof g!="string"||!(g in ot)||ne||V!=="y"||I||a!==1||R!==0||Y||pe||G!==false||k||P||ae||de>0||j||Z||J||re||Ee||Le||Se||U!=null||Q!=null||ee!=null||(A.start??"top bottom").trim()!=="top bottom"||(A.end??"bottom top").trim()!=="bottom top")}function gt(){let o=`svg-scroll-draw-${++vt}`,l=x==="reverse"?"0":"var(--ssd-len)",y=x==="reverse"?"var(--ssd-len)":"0",M=`stroke-dashoffset:${l};`,W=`stroke-dashoffset:${y};`;c&&(M+=`opacity:${x==="reverse"?1:0};`,W+=`opacity:${x==="reverse"?0:1};`);let q=document.createElement("style");q.setAttribute("data-svg-scroll-draw",""),q.textContent=`@keyframes ${o}{from{${M}}to{${W}}}.${o}{animation-name:${o};animation-duration:auto;animation-timing-function:${ot[g]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(q);function X(u,h){u.style.setProperty("--ssd-len",String($[h])),u.style.strokeDasharray=`${$[h]}`,u.style.strokeDashoffset="",u.style.opacity="",u.style.animationPlayState="",u.classList.add(o);}b.forEach(X);let d=false,E=-1;function S(){if(E>=0)return E;let u=e.getBoundingClientRect(),{tStart:h,tEnd:T}=Pe({top:u.top,height:u.height},De(),Je(),ge,Fe);return oe(K(De(),h,T,a))}return {destroy(){b.forEach(u=>{u.classList.remove(o),u.style.removeProperty("--ssd-len"),u.style.animationPlayState="";}),q.remove();},replay(){d=false,E=-1,b.forEach(X);},pause(){d=true,b.forEach(u=>{u.style.animationPlayState="paused";});},resume(){d&&(d=false,b.forEach(u=>{u.style.animationPlayState="running";}));},seek(u){let h=Math.min(1,Math.max(0,u));E=h,d=true,b.forEach((T,he)=>{T.classList.remove(o),T.style.strokeDashoffset=x==="reverse"?`${$[he]*h}`:`${$[he]*(1-h)}`,c&&(T.style.opacity=x==="reverse"?`${1-h}`:`${h}`);});},getProgress(){return S()}}}if(dt())return gt();function yt(){let o=Math.max(1,ve),l=0,y=0;function M(S){let u=true;if(ne){let h=Math.min(1,Math.max(0,S/o)),T=oe(h);ye=T,e.style.setProperty("--scroll-draw-progress",String(T)),e.style.clipPath=C(x==="reverse"?1-T:T),j?.(T),h<1&&(u=false);}else b.forEach((h,T)=>{let he=T*R*o,$e=Math.min(1,Math.max(0,(S-he)/o)),ie=oe($e);h.style.strokeDashoffset=x==="reverse"?`${$[T]*ie}`:`${$[T]*(1-ie)}`,c&&(h.style.opacity=x==="reverse"?`${1-ie}`:`${ie}`),B&&L?h.style.stroke=Me(B,L,ie):L&&(h.style.stroke=L),D!==null&&i!==null?h.style.strokeWidth=`${D+(i-D)*ie}`:i!==null&&(h.style.strokeWidth=`${i}`),m!==null&&w!==null?h.style.fillOpacity=`${m+(w-m)*ie}`:w!==null&&(h.style.fillOpacity=`${w}`),k&&h.tagName.toLowerCase()==="path"&&v[T]&&h.setAttribute("d",Ye(v[T],k,ie)),T===0&&(j?.(ie),e.style.setProperty("--scroll-draw-progress",String(ie))),$e<1&&(u=false);});if(P){let h=Math.min(1,Math.max(0,S/o)),T=oe(h);for(let he in P){let $e=parseFloat(he);T>=$e&&!me.has($e)&&(me.add($e),P[he]?.());}}return u}function W(S){if(z)return;let u=S-l;_||(_=true,Z?.());let h=M(u);if(h&&!O){O=true,M(o*(1+Math.max(0,b.length-1)*R)),J?.(),ue<(ae==="infinite"?1/0:ae??0)&&(ue++,fe=setTimeout(()=>{l=performance.now(),_=false,O=false,me.clear(),We(),N=requestAnimationFrame(W);},ke));return}h||(N=requestAnimationFrame(W));}function q(){cancelAnimationFrame(N),clearTimeout(fe),l=performance.now(),y=0,z=false,_=false,O=false,ue=0,me.clear(),We(),N=requestAnimationFrame(W);}let X=new IntersectionObserver(S=>{S.forEach(u=>{u.isIntersecting&&!(Y&&O)?q():!u.isIntersecting&&!Y&&!O&&(cancelAnimationFrame(N),clearTimeout(fe),l=null);});},{root:I??null,threshold:Oe,rootMargin:Ne}),d;function E(){clearTimeout(d),d=setTimeout(()=>{b.forEach((S,u)=>{$[u]=Be(S),S.style.strokeDasharray=`${$[u]}`;});},150);}return window.addEventListener("resize",E),window.addEventListener("orientationchange",E),de>0?setTimeout(()=>X.observe(e),de):X.observe(e),{destroy(){cancelAnimationFrame(N),clearTimeout(fe),X.disconnect(),window.removeEventListener("resize",E),window.removeEventListener("orientationchange",E),clearTimeout(d);},replay(){ue=0,q();},pause(){z||(z=true,y=performance.now()-l,cancelAnimationFrame(N));},resume(){z&&(z=false,l=performance.now()-y,N=requestAnimationFrame(W));},seek(S){let u=Math.min(1,Math.max(0,S));ye=u,z=true,y=u*o,l=performance.now()-y,cancelAnimationFrame(N),M(y);},getProgress(){return ye}}}if(le)return yt();Ke();function qe(){if(!Re||z)return;let o=performance.now(),l=De(),y=a;if(G!==false){let d=o-Ze,E=d>0?Math.abs(l-(ze<0?l:ze))/d:0;y=a*Math.max(.2,1+E*(typeof G=="number"?G:1)*.04);}ze=l,Ze=o;let M=pe?He===-1||l>=He?"forward":"reverse":x;He=l;let W=H-F,q=true,X=W===0?0:(l-F)/W;if(isNaN(xe)||(xe<=0&&X>0?re?.():xe>0&&X<=0&&Se?.(),xe<1&&X>=1?Ee?.():xe>=1&&X<1&&Le?.()),xe=X,ne){let d=oe(K(l,F,H,y));Y&&!pe&&(se=Math.max(se,d),d=se),ye=d,e.style.setProperty("--scroll-draw-progress",String(d));let E=M==="reverse"?1-d:d;e.style.clipPath=C(E),j?.(d),!_&&K(l,F,H,y)>0&&(_=true,Z?.()),d>=1&&!O?(O=true,J?.(),ue<(ae==="infinite"?1/0:ae??0)&&(ue++,fe=setTimeout(()=>{se=-1,_=false,O=false,e.style.clipPath=C(0);},ke))):d<1&&!Y&&(O=false),N=requestAnimationFrame(qe);return}if(b.forEach((d,E)=>{let S=E*R*W,u=oe(K(l,F+S,H+S,y));Y&&!pe&&(se=Math.max(se,u),u=se),ye=u,d.style.strokeDashoffset=M==="reverse"?`${$[E]*u}`:`${$[E]*(1-u)}`,c&&(d.style.opacity=M==="reverse"?`${1-u}`:`${u}`),B&&L?d.style.stroke=Me(B,L,u):L&&(d.style.stroke=L),D!==null&&i!==null?d.style.strokeWidth=`${D+(i-D)*u}`:i!==null&&(d.style.strokeWidth=`${i}`),m!==null&&w!==null?d.style.fillOpacity=`${m+(w-m)*u}`:w!==null&&(d.style.fillOpacity=`${w}`),k&&d.tagName.toLowerCase()==="path"&&v[E]&&d.setAttribute("d",Ye(v[E],k,u)),E===0&&(j?.(u),e.style.setProperty("--scroll-draw-progress",String(u))),u<1&&(q=false);}),P){let d=oe(K(l,F,H,y));for(let E in P){let S=parseFloat(E);d>=S&&!me.has(S)&&(me.add(S),P[E]?.());}}!_&&K(l,F,H,y)>0&&(_=true,Z?.()),q&&!O?(O=true,J?.(),ue<(ae==="infinite"?1/0:ae??0)&&(ue++,fe=setTimeout(()=>{se=-1,_=false,O=false,me.clear(),We();},ke))):!q&&!Y&&(O=false),N=requestAnimationFrame(qe);}let je=new IntersectionObserver(o=>{o.forEach(l=>{Re=l.isIntersecting,Re&&!z?N=requestAnimationFrame(qe):cancelAnimationFrame(N);});},{root:I??null,threshold:Oe,rootMargin:Ne}),Xe;function Ve(){clearTimeout(Xe),Xe=setTimeout(()=>{b.forEach((o,l)=>{$[l]=Be(o),o.style.strokeDasharray=`${$[l]}`;}),Ke();},150);}return window.addEventListener("resize",Ve),window.addEventListener("orientationchange",Ve),de>0?setTimeout(()=>je.observe(e),de):je.observe(e),{destroy(){cancelAnimationFrame(N),clearTimeout(fe),je.disconnect(),window.removeEventListener("resize",Ve),window.removeEventListener("orientationchange",Ve),clearTimeout(Xe),Ge?.remove();},replay(){se=-1,He=-1,ze=-1,_=false,O=false,ue=0,z=false,me.clear(),clearTimeout(fe),We();},pause(){z=true,cancelAnimationFrame(N);},resume(){z&&(z=false,Re&&(N=requestAnimationFrame(qe)));},seek(o){let l=Math.min(1,Math.max(0,o));ye=l,se=l,z=true,cancelAnimationFrame(N),pt(l,x);},getProgress(){return ye}}}var st=new Map;function it(e,n){st.set(e,n);}function at(e){st.delete(e);}function $t(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function lt(e){let n=[],r=/([\w]+)\(([^)]*)\)/g,t;for(;(t=r.exec(e))!==null;){let s=[],f=[],p=t[2].trim();if(p)for(let a of p.split(/[\s,]+/)){let c=a.match(/^([-+]?[\d.eE]+)(.*)$/);s.push(c?parseFloat(c[1]):0),f.push(c?c[2]:"");}n.push({fn:t[1],nums:s,units:f});}return n}function At(e,n,r){let t=lt(e),s=lt(n);return t.length===0||t.length!==s.length?r<1?e:n:t.map((f,p)=>{let a=s[p];return f.fn!==a.fn||f.nums.length!==a.nums.length?r<1?`${f.fn}(${f.nums.map((c,g)=>`${c}${f.units[g]}`).join(", ")})`:`${a.fn}(${a.nums.map((c,g)=>`${c}${a.units[g]}`).join(", ")})`:`${f.fn}(${f.nums.map((c,g)=>`${c+(a.nums[g]-c)*r}${f.units[g]}`).join(", ")})`}).join(" ")}function ct(e,n,r){if(typeof e=="number"&&typeof n=="number")return String(e+(n-e)*r);let t=String(e),s=String(n);if($t(t))return Me(t,s,r);if(t.includes("("))return At(t,s,r);let f=t.match(/^([-+]?[\d.]+)(.*)$/),p=s.match(/^([-+]?[\d.]+)(.*)$/);if(f&&p){let a=parseFloat(f[1]),c=parseFloat(p[1]);return `${a+(c-a)*r}${f[2]||p[2]}`}return r<1?t:s}function Tt(e){return e.replace(/([A-Z])/g,n=>`-${n.toLowerCase()}`)}var ut={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},Pt=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),Mt=0;function kt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function _e(e,n){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let{props:t,trigger:s={},easing:f="ease-out",speed:p=1,once:a=false,axis:c="y",scrollContainer:g,native:A=true,velocityScale:R=false,onProgress:x,onComplete:Y,onEnter:Ce,onLeave:V,onEnterBack:we,onLeaveBack:pe}=n,de=window.matchMedia("(prefers-reduced-motion: reduce)").matches,U=typeof f=="function"?f:Ae[f]??Ae["ease-out"],Q=Te(s.start??"top bottom"),ee=Te(s.end??"bottom top"),P=typeof g=="string"?document.querySelector(g):g??null,G=Object.entries(t).map(([i,m])=>({prop:Tt(i),from:Array.isArray(m)?m[0]:"",to:Array.isArray(m)?m[1]:m}));function Oe(){let i=window.getComputedStyle(e);for(let m of G)m.from===""&&(m.from=i.getPropertyValue(m.prop).trim()||"0");}function Ne(){for(let i of G)e.style.setProperty(i.prop,String(i.to));}if(de)return Ne(),Y?.(),r;Oe();function ae(){if(!A||!kt()||typeof f!="string"||!(f in ut)||c!=="y"||P||a||p!==1||x||Y||Ce||V||we||pe||R!==false||(s.start??"top bottom").trim()!=="top bottom"||(s.end??"bottom top").trim()!=="bottom top")return false;for(let i of G)if(!Pt.has(i.prop))return false;return true}function ke(){let i=`ssd-a-${++Mt}`,m=G.map(v=>`${v.prop}:${v.from}`).join(";"),w=G.map(v=>`${v.prop}:${v.to}`).join(";"),C=document.createElement("style");C.setAttribute("data-ssd-animate",""),C.textContent=`@keyframes ${i}{from{${m}}to{${w}}}.${i}{animation-name:${i};animation-duration:auto;animation-timing-function:${ut[f]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(C),e.classList.add(i);let b=()=>c==="x"?window.scrollX:window.scrollY,$=()=>c==="x"?window.innerWidth:window.innerHeight;return {destroy(){e.classList.remove(i),C.remove();},replay(){e.classList.remove(i),e.offsetWidth,e.classList.add(i);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(v){let F=Math.min(1,Math.max(0,v));e.classList.remove(i);for(let H of G)e.style.setProperty(H.prop,ct(H.from,H.to,F));},getProgress(){let v=e.getBoundingClientRect(),F=b(),H=$(),{tStart:O,tEnd:_}=Pe({top:v.top,height:v.height},F,H,Q,ee);return U(K(F,O,_,p))}}}if(ae())return ke();let k=0,te=0,le=0,ve=false,ce=false,j=-1,Z=0,J=false,re=NaN,Ee=-1,Le=0,Se=()=>P?c==="x"?P.scrollLeft:P.scrollTop:c==="x"?window.scrollX:window.scrollY,ne=()=>P?c==="x"?P.clientWidth:P.clientHeight:c==="x"?window.innerWidth:window.innerHeight;function oe(){let i=e.getBoundingClientRect(),m,w;if(P){let b=P.getBoundingClientRect();m=c==="x"?i.left-b.left+P.scrollLeft:i.top-b.top+P.scrollTop,w=c==="x"?i.width:i.height;}else m=c==="x"?i.left:i.top,w=c==="x"?i.width:i.height;let C=Pe({top:m,height:w},Se(),ne(),Q,ee);k=C.tStart,te=C.tEnd;}function ge(i){e.style.setProperty("--scroll-draw-progress",String(i));for(let m of G)e.style.setProperty(m.prop,ct(m.from,m.to,i));x?.(i);}function Fe(i){if(isNaN(re)){re=i;return}re<=0&&i>0?Ce?.():re>0&&i<=0&&pe?.(),re<1&&i>=1?V?.():re>=1&&i<1&&we?.(),re=i;}function I(){if(!ve||ce)return;let i=performance.now(),m=Se(),w=p;if(R!==false){let $=i-Le,v=$>0?Math.abs(m-(Ee<0?m:Ee))/$:0;w=p*Math.max(.2,1+v*(typeof R=="number"?R:1)*.04);}Ee=m,Le=i;let C=te===k?0:(m-k)/(te-k);Fe(C);let b=U(K(m,k,te,w));a&&(j=Math.max(j,b),b=j),Z=b,ge(b),b>=1&&!J?(J=true,Y?.()):b<1&&!a&&(J=false),le=requestAnimationFrame(I);}oe();{let i=U(K(Se(),k,te,p));a&&i>0&&(j=i),Z=i,ge(i);}let B=new IntersectionObserver(i=>{i.forEach(m=>{ve=m.isIntersecting,ve&&!ce?le=requestAnimationFrame(I):cancelAnimationFrame(le);});},{root:P??null}),L;function D(){clearTimeout(L),L=setTimeout(oe,150);}return window.addEventListener("resize",D),window.addEventListener("orientationchange",D),B.observe(e),it(e,{type:"animate",getProgress:()=>Z,getTrigger:()=>({tStart:k,tEnd:te})}),{destroy(){cancelAnimationFrame(le),B.disconnect(),window.removeEventListener("resize",D),window.removeEventListener("orientationchange",D),clearTimeout(L),at(e);},replay(){j=-1,J=false,Z=0,ce=false,ge(0);},pause(){ce=true,cancelAnimationFrame(le);},resume(){ce&&(ce=false,ve&&(le=requestAnimationFrame(I)));},seek(i){let m=Math.min(1,Math.max(0,i));Z=m,j=m,ce=true,cancelAnimationFrame(le),ge(m);},getProgress(){return Z}}}var ft={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function mt(e,n={}){if(typeof window>"u")return ft;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] scrollParallax: element not found:",e),ft;let{speed:t=.3,axis:s="y",easing:f="linear",trigger:p,onProgress:a}=n,c=r.getBoundingClientRect(),g=s==="x"?c.width:c.height,A=t*g;return _e(r,{props:s==="x"?{transform:["translateX(0px)",`translateX(${-A}px)`]}:{transform:["translateY(0px)",`translateY(${-A}px)`]},trigger:p??{start:"top bottom",end:"bottom top"},easing:f,native:false,onProgress:a})}function Ie(e){return e.map(n=>typeof n=="string"?document.querySelector(n):n).filter(n=>n!==null)}var be={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function qt(e,n={}){if(typeof window>"u")return be;let r=Ie(e).map(t=>Ue(t,n));return {destroy(){r.forEach(t=>t.destroy());},replay(){r.forEach(t=>t.replay());},pause(){r.forEach(t=>t.pause());},resume(){r.forEach(t=>t.resume());},seek(t){r.forEach(s=>s.seek(t));},getProgress(){return r[0]?.getProgress()??0}}}function Vt(e,n={}){if(typeof window>"u")return be;let r=Ie(e);if(r.length===0)return be;let t=0,s=[];function f(a){return Ue(r[a],{...n,once:true,onComplete(){n.onComplete?.(),t=a+1,s[t]?.resume();}})}function p(){r.forEach((a,c)=>{s[c]=f(c);});for(let a=1;a<s.length;a++)s[a].pause();}return p(),{destroy(){s.forEach(a=>a.destroy()),s.length=0;},replay(){s.forEach(a=>a.destroy()),s.length=0,t=0,p();},pause(){s[t]?.pause();},resume(){s[t]?.resume();},seek(a){s[t]?.seek(a);},getProgress(){return s[t]?.getProgress()??0}}}function Bt(e,n){if(typeof window>"u")return be;let r=Ie(e).map(t=>_e(t,n));return {destroy(){r.forEach(t=>t.destroy());},replay(){r.forEach(t=>t.replay());},pause(){r.forEach(t=>t.pause());},resume(){r.forEach(t=>t.resume());},seek(t){r.forEach(s=>s.seek(t));},getProgress(){return r[0]?.getProgress()??0}}}function _t(e,n){if(typeof window>"u")return be;let r=Ie(e);if(r.length===0)return be;let t=0,s=[];function f(a){return _e(r[a],{...n,once:true,onComplete(){n.onComplete?.(),t=a+1,s[t]?.resume();}})}function p(){r.forEach((a,c)=>{s[c]=f(c);});for(let a=1;a<s.length;a++)s[a].pause();}return p(),{destroy(){s.forEach(a=>a.destroy()),s.length=0;},replay(){s.forEach(a=>a.destroy()),s.length=0,t=0,p();},pause(){s[t]?.pause();},resume(){s[t]?.resume();},seek(a){s[t]?.seek(a);},getProgress(){return s[t]?.getProgress()??0}}}function Gt(e,n={}){if(typeof window>"u")return be;let r=Ie(e).map(t=>mt(t,n));return {destroy(){r.forEach(t=>t.destroy());},replay(){r.forEach(t=>t.replay());},pause(){r.forEach(t=>t.pause());},resume(){r.forEach(t=>t.resume());},seek(t){r.forEach(s=>s.seek(t));},getProgress(){return r[0]?.getProgress()??0}}}export{Bt as scrollAnimateGroup,_t as scrollAnimateSequence,qt as scrollDrawGroup,Vt as scrollDrawSequence,Gt as scrollParallaxGroup};
|
|
1
|
+
function Rt({bounces:e=3,decay:n=.5}={}){let r=Math.max(1,Math.round(e)),t=Math.max(.01,Math.min(.99,n)),o=Math.sqrt(t),c=0,m=[];for(let h=0;h<r;h++){let S=Math.pow(o,h);m.push(S),c+=S;}let i=[0],u=0;for(let h=0;h<r;h++)u+=m[h]/c,i.push(u);return h=>{if(h<=0)return 0;if(h>=1)return 1;for(let S=0;S<r;S++)if(h<=i[S+1]){let V=(h-i[S])/(i[S+1]-i[S]);if(S===0)return V*(2-V);let x=1-Math.pow(t,S);return x+(1-x)*(2*V-1)*(2*V-1)}return 1}}function Ft({amplitude:e=1,period:n=.4}={}){let r=Math.max(1,e),t=Math.max(.1,n),o=r<=1?t/4:t/(2*Math.PI)*Math.asin(1/r);return c=>c<=0?0:c>=1?1:r*Math.pow(2,-10*c)*Math.sin((c-o)*(2*Math.PI)/t)+1}var Se={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:Rt(),elastic:Ft()};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 ht(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 bt(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 Ie(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 Nt(e,n,r){return Math.min(r,Math.max(n,e))}function ne(e,n,r,t){return r===n?0:Nt((e-n)/(r-n)*t,0,1)}function Ze(e,n,r){let t=e.getBoundingClientRect(),o=r==="x"?t.width:t.height;return n?{top:r==="x"?t.left-n.getBoundingClientRect().left+n.scrollLeft:t.top-n.getBoundingClientRect().top+n.scrollTop,height:o,scroll:0}:{top:r==="x"?t.left:t.top,height:o,scroll:r==="x"?window.scrollX:window.scrollY}}function Ce(e,n,r,t,o){let c=ht(e.top,e.height,n,t.element)-bt(t.viewport,r),m=ht(e.top,e.height,n,o.element)-bt(o.viewport,r);return {tStart:c,tEnd:m}}function wt(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 Oe(e,n,r){let t=wt(e),o=wt(n);return !t||!o?e:`rgb(${Math.round(t[0]+(o[0]-t[0])*r)},${Math.round(t[1]+(o[1]-t[1])*r)},${Math.round(t[2]+(o[2]-t[2])*r)})`}var vt={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 Ke=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function ye(e,...n){Ke&&console.warn(`[svg-scroll-draw] ${e}`,...n);}var _t="cubic-bezier(0.333333, 0, 0.666667, 0.333333)",Ht="cubic-bezier(0.333333, 0.666667, 0.666667, 1)",Et=33;function Vt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timing-function: linear(0, 1)")}function zt(e){let n=[];for(let r=0;r<Et;r++){let t=r/(Et-1);n.push(String(Math.round(e(t)*1e5)/1e5));}return `linear(${n.join(",")})`}function Je(e){switch(e){case "linear":return "linear";case "ease-in":return _t;case "ease-out":return Ht;case "ease-in-out":return Vt()?zt(Se["ease-in-out"]):null;default:return null}}var St=Symbol.for("svg-scroll-draw.registry");function xt(){let e=globalThis;return e[St]||(e[St]=new Map)}function Ve(e,n){xt().set(e,n);}function ze(e){xt().delete(e);}var Wt=0;function qt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")&&CSS.supports("view-timeline-name: --x")}function Bt(e){let n=e.getAttribute("stroke"),r=e.getAttribute("fill");!n||n==="none"?ye("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&ye("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Gt(e,n,r){let t=document.createElement("div");t.setAttribute("data-svg-scroll-draw-debug",""),t.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function o(){let c=r==="x"?window.scrollX:window.scrollY,m=e-c,i=n-c,u=r==="x";t.innerHTML=`
|
|
2
|
+
<div style="position:absolute;${u?`left:${m}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${m}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;${u?`left:${i}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${i}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(t),window.addEventListener("scroll",o,{passive:true}),o(),{el:t,destroy(){window.removeEventListener("scroll",o),t.remove();}}}var Tt=/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,$t=/[MmLlHhVvCcSsQqTtAaZz]/g;function jt(e,n,r){if(!Ke)return;let t=(e.match($t)??[]).join("").toUpperCase(),o=(n.match($t)??[]).join("").toUpperCase(),c=(e.match(Tt)??[]).length,m=(n.match(Tt)??[]).length;if(t!==o){ye(`morphTo: command sequence differs (${t||"\u2205"} \u2192 ${o||"\u2205"}). Interpolation is coordinate-for-coordinate, so the result will not reach the target shape. Redraw both paths with the same commands.`,r);return}c!==m&&ye(`morphTo: coordinate count differs (${c} \u2192 ${m}). Extra coordinates are ignored and missing ones hold their start value, so the result will not reach the target shape.`,r);}function at(e,n,r){let t=(n.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),o=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,c=>{let m=parseFloat(c),i=t[o++]??m;return String(+(m+(i-m)*r).toFixed(4))})}function lt(e,n={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:r,...t}=n,o=r?{...vt[r],...t}:t,c=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:m="path, polyline, line, polygon, rect, circle",speed:i=1,fade:u=false,easing:h="linear",trigger:S={},stagger:V=0,direction:x="forward",once:fe=false,debug:qe=false,axis:J="y",scrollContainer:Pe,autoReverse:xe=false,delay:he=0,strokeColor:oe,strokeWidth:me,fillOpacity:ee,waypoints:se,velocityScale:be=false,threshold:Re=0,rootMargin:Q="0px",repeat:C=0,repeatDelay:Fe=0,morphTo:z,clip:Me,autoplay:Ne=false,duration:Be=1e3,native:tt=true,onProgress:Te,onStart:U,onComplete:W,onEnter:ie,onLeave:$e,onEnterBack:ae,onLeaveBack:pe}=o,_=Me===true?"left":typeof Me=="string"?Me:false,Z=typeof h=="function"?h:Se[h]??Se.linear,le=De(S.start??"top bottom"),ke=De(S.end??"bottom top"),X=typeof Pe=="string"?document.querySelector(Pe):Pe??null,Y=Array.isArray(oe)?oe[0]:null,O=Array.isArray(oe)?oe[1]:typeof oe=="string"?oe:null,R=Array.isArray(me)?me[0]:null,M=Array.isArray(me)?me[1]:typeof me=="number"?me:null,H=Array.isArray(ee)?ee[0]:null,D=Array.isArray(ee)?ee[1]:typeof ee=="number"?ee:null;function ce(s){let l=s*100;switch(_){case "right":return `inset(0 0 0 ${100-l}%)`;case "top":return `inset(0 0 ${100-l}% 0)`;case "bottom":return `inset(${100-l}% 0 0 0)`;case "center":return `circle(${s*150}% at 50% 50%)`;default:return `inset(0 ${100-l}% 0 0)`}}let T=_?[]:Array.from(e.querySelectorAll(m)),b=[],a=[],f=0,q=0,v=false,$=false,A=0,te=false,B=-1,I=-1,k=false,G=0,de=0,we,rt=null;function ct(){rt?.destroy(),rt=null;}let ve=new Set,ut=NaN,Ee=true,Ge=-1,ft=performance.now(),Le=NaN;function nt(){return X?J==="x"?X.scrollLeft:X.scrollTop:J==="x"?window.scrollX:window.scrollY}function mt(){return X?J==="x"?X.clientWidth:X.clientHeight:J==="x"?window.innerWidth:window.innerHeight}function pt(){let s=Ze(e,X,J);return Ce(s,s.scroll,mt(),le,ke)}function dt(){(({tStart:f,tEnd:q}=pt())),qe&&Ke&&(ct(),rt=Gt(f,q,J));}function ot(s,l=pt){Ve(e,{type:"draw",getProgress:()=>s.getProgress(),getTrigger:l});let g=s.destroy;return s.destroy=()=>{g.call(s),ze(e);},s}function Dt(s,l){if(e.style.setProperty("--scroll-draw-progress",String(s)),_){let g=l==="reverse"?1-s:s;e.style.clipPath=ce(g);return}T.forEach((g,F)=>{g.style.strokeDashoffset=l==="reverse"?`${b[F]*s}`:`${b[F]*(1-s)}`,u&&(g.style.opacity=l==="reverse"?`${1-s}`:`${s}`),Y&&O?g.style.stroke=Oe(Y,O,s):O&&(g.style.stroke=O),R!==null&&M!==null?g.style.strokeWidth=`${R+(M-R)*s}`:M!==null&&(g.style.strokeWidth=`${M}`),H!==null&&D!==null?g.style.fillOpacity=`${H+(D-H)*s}`:D!==null&&(g.style.fillOpacity=`${D}`),z&&g.tagName.toLowerCase()==="path"&&a[F]&&g.setAttribute("d",at(a[F],z,s));});}function je(){if(e.style.setProperty("--scroll-draw-progress","0"),_){e.style.clipPath=ce(0);return}T.forEach((s,l)=>{s.style.strokeDasharray=`${b[l]}`,s.style.strokeDashoffset=x==="reverse"?"0":`${b[l]}`,u?s.style.opacity=x==="reverse"?"1":"0":s.style.opacity="",Y&&(s.style.stroke=Y),R!==null&&(s.style.strokeWidth=`${R}`),H!==null&&(s.style.fillOpacity=`${H}`),z&&s.tagName.toLowerCase()==="path"&&a[l]&&s.setAttribute("d",a[l]);});}if(T.forEach(s=>{Bt(s);let l=Ie(s);b.push(l);let g=s.tagName.toLowerCase()==="path";g?a.push(s.getAttribute("d")??""):a.push(""),z&&(g?jt(a[a.length-1],z,s):ye(`morphTo only applies to <path> elements \u2014 ignored on <${s.tagName}>.`,s)),c?(s.style.strokeDasharray=`${l}`,s.style.strokeDashoffset=x==="reverse"?`${l}`:"0",u&&(s.style.opacity="1"),O&&(s.style.stroke=O),M!==null&&(s.style.strokeWidth=`${M}`),D!==null&&(s.style.fillOpacity=`${D}`),z&&s.tagName.toLowerCase()==="path"&&s.setAttribute("d",z)):(s.style.strokeDasharray=`${l}`,s.style.strokeDashoffset=x==="reverse"?"0":`${l}`,u?s.style.opacity=x==="reverse"?"1":"0":s.style.opacity="",Y&&(s.style.stroke=Y),R!==null&&(s.style.strokeWidth=`${R}`),H!==null&&(s.style.fillOpacity=`${H}`));}),_){if(c)return e.style.clipPath=ce(1),W?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=ce(0);}else if(c)return W?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};let gt=typeof h=="string"?Je(h):null;function It(){return !(tt===false||!qt()||!T.length||!gt||_||J!=="y"||X||i!==1||V!==0||fe||xe||be!==false||z||se||C||he>0||Te||U||W||ie||$e||ae||pe||oe!=null||me!=null||ee!=null||(S.start??"top bottom").trim()!=="top bottom"||(S.end??"bottom top").trim()!=="bottom top")}function Ct(){let s=++Wt,l=`svg-scroll-draw-${s}`,g=`svg-scroll-draw-host-${s}`,F=`--svg-scroll-draw-${s}`,ge=x==="reverse"?"0":"var(--ssd-len)",ue=x==="reverse"?"var(--ssd-len)":"0",re=`stroke-dashoffset:${ge};`,y=`stroke-dashoffset:${ue};`;u&&(re+=`opacity:${x==="reverse"?1:0};`,y+=`opacity:${x==="reverse"?0:1};`);let w=document.createElement("style");w.setAttribute("data-svg-scroll-draw",""),w.textContent=`@keyframes ${l}{from{${re}}to{${y}}}.${g}{view-timeline-name:${F};view-timeline-axis:block;}.${l}{animation-name:${l};animation-duration:auto;animation-timing-function:${gt};animation-fill-mode:both;animation-timeline:${F};animation-range:cover 0% cover 100%;}`,document.head.appendChild(w),e.classList.add(g);function N(p,L){p.style.setProperty("--ssd-len",String(b[L])),p.style.strokeDasharray=`${b[L]}`,p.style.strokeDashoffset="",p.style.opacity="",p.style.animationPlayState="",p.classList.add(l);}T.forEach(N);let d=false,E=-1;function P(){if(E>=0)return E;let p=e.getBoundingClientRect(),{tStart:L,tEnd:K}=Ce({top:p.top,height:p.height},nt(),mt(),le,ke);return Z(ne(nt(),L,K,i))}return {destroy(){e.classList.remove(g),T.forEach(p=>{p.classList.remove(l),p.style.removeProperty("--ssd-len"),p.style.animationPlayState="";}),w.remove();},replay(){d=false,E=-1,T.forEach(N);},pause(){d=true,T.forEach(p=>{p.style.animationPlayState="paused";});},resume(){d&&(d=false,T.forEach(p=>{p.style.animationPlayState="running";}));},seek(p){let L=Math.min(1,Math.max(0,p));E=L,d=true,T.forEach((K,j)=>{K.classList.remove(l),K.style.strokeDashoffset=x==="reverse"?`${b[j]*L}`:`${b[j]*(1-L)}`,u&&(K.style.opacity=x==="reverse"?`${1-L}`:`${L}`);});},getProgress(){return P()},refresh(){T.forEach((p,L)=>{b[L]=Ie(p),p.style.setProperty("--ssd-len",String(b[L])),p.style.strokeDasharray=`${b[L]}`;});}}}if(It())return ot(Ct());function Ot(){let s=Math.max(1,Be),l=0,g=0,F=false;function ge(d){let E=true;if(_){let P=Math.min(1,Math.max(0,d/s)),p=Z(P);G=p,e.style.setProperty("--scroll-draw-progress",String(p)),e.style.clipPath=ce(x==="reverse"?1-p:p),Te?.(p),P<1&&(E=false);}else T.forEach((P,p)=>{let L=p*V*s,K=Math.min(1,Math.max(0,(d-L)/s)),j=Z(K);P.style.strokeDashoffset=x==="reverse"?`${b[p]*j}`:`${b[p]*(1-j)}`,u&&(P.style.opacity=x==="reverse"?`${1-j}`:`${j}`),Y&&O?P.style.stroke=Oe(Y,O,j):O&&(P.style.stroke=O),R!==null&&M!==null?P.style.strokeWidth=`${R+(M-R)*j}`:M!==null&&(P.style.strokeWidth=`${M}`),H!==null&&D!==null?P.style.fillOpacity=`${H+(D-H)*j}`:D!==null&&(P.style.fillOpacity=`${D}`),z&&P.tagName.toLowerCase()==="path"&&a[p]&&P.setAttribute("d",at(a[p],z,j)),p===0&&(G=j,Te?.(j),e.style.setProperty("--scroll-draw-progress",String(j))),K<1&&(E=false);});if(se){let P=Math.min(1,Math.max(0,d/s)),p=Z(P);for(let L in se){let K=parseFloat(L);p>=K&&!ve.has(K)&&(ve.add(K),se[L]?.());}}return E}function ue(d){if(k)return;let E=d-l;$||($=true,U?.());let P=ge(E);if(P&&!v){v=true,ge(s*(1+Math.max(0,T.length-1)*V)),W?.(),de<(C==="infinite"?1/0:C??0)&&(de++,we=setTimeout(()=>{l=performance.now(),$=false,v=false,ve.clear(),je(),A=requestAnimationFrame(ue);},Fe));return}P||(A=requestAnimationFrame(ue));}function re(){cancelAnimationFrame(A),clearTimeout(we),l=performance.now(),g=0,k=false,$=false,v=false,de=0,F=true,G=0,ve.clear(),je(),A=requestAnimationFrame(ue);}let y=new IntersectionObserver(d=>{d.forEach(E=>{E.isIntersecting&&!(fe&&v)?re():!E.isIntersecting&&!fe&&!v&&(cancelAnimationFrame(A),clearTimeout(we),F=false);});},{root:X??null,threshold:Re,rootMargin:Q}),w;function N(){clearTimeout(w),w=setTimeout(()=>{T.forEach((d,E)=>{b[E]=Ie(d),d.style.strokeDasharray=`${b[E]}`;});},150);}return window.addEventListener("resize",N),window.addEventListener("orientationchange",N),he>0?setTimeout(()=>y.observe(e),he):y.observe(e),{destroy(){cancelAnimationFrame(A),clearTimeout(we),y.disconnect(),window.removeEventListener("resize",N),window.removeEventListener("orientationchange",N),clearTimeout(w);},replay(){de=0,re();},pause(){k||!F||(k=true,g=performance.now()-l,cancelAnimationFrame(A));},resume(){k&&(k=false,F=true,l=performance.now()-g,A=requestAnimationFrame(ue));},seek(d){let E=Math.min(1,Math.max(0,d));G=E,k=true,g=E*s,l=performance.now()-g,cancelAnimationFrame(A),ge(g);},getProgress(){return G},refresh(){clearTimeout(w),T.forEach((d,E)=>{b[E]=Ie(d),d.style.strokeDasharray=`${b[E]}`;});}}}if(Ne)return ot(Ot());dt();function Ue(){if(!te||k)return;let s=performance.now(),l=nt();if(!Ee&&be===false&&l===ut){A=requestAnimationFrame(Ue);return}Ee=false,ut=l;let g=i;if(be!==false){let y=s-ft,w=y>0?Math.abs(l-(Ge<0?l:Ge))/y:0;g=i*Math.max(.2,1+w*(typeof be=="number"?be:1)*.04);}Ge=l,ft=s;let F=xe?I===-1||l>=I?"forward":"reverse":x;I=l;let ge=q-f,ue=true,re=ge===0?0:(l-f)/ge;if(isNaN(Le)||(Le<=0&&re>0?ie?.():Le>0&&re<=0&&pe?.(),Le<1&&re>=1?$e?.():Le>=1&&re<1&&ae?.()),Le=re,_){let y=Z(ne(l,f,q,g));fe&&!xe&&(B=Math.max(B,y),y=B),G=y,e.style.setProperty("--scroll-draw-progress",String(y));let w=F==="reverse"?1-y:y;e.style.clipPath=ce(w),Te?.(y),!$&&ne(l,f,q,g)>0&&($=true,U?.()),y>=1&&!v?(v=true,W?.(),de<(C==="infinite"?1/0:C??0)&&(de++,we=setTimeout(()=>{B=-1,$=false,v=false,e.style.clipPath=ce(0);},Fe))):y<1&&!fe&&(v=false),A=requestAnimationFrame(Ue);return}if(T.forEach((y,w)=>{let N=w*V*ge,d=Z(ne(l,f+N,q+N,g));fe&&!xe&&(B=Math.max(B,d),d=B),G=d,y.style.strokeDashoffset=F==="reverse"?`${b[w]*d}`:`${b[w]*(1-d)}`,u&&(y.style.opacity=F==="reverse"?`${1-d}`:`${d}`),Y&&O?y.style.stroke=Oe(Y,O,d):O&&(y.style.stroke=O),R!==null&&M!==null?y.style.strokeWidth=`${R+(M-R)*d}`:M!==null&&(y.style.strokeWidth=`${M}`),H!==null&&D!==null?y.style.fillOpacity=`${H+(D-H)*d}`:D!==null&&(y.style.fillOpacity=`${D}`),z&&y.tagName.toLowerCase()==="path"&&a[w]&&y.setAttribute("d",at(a[w],z,d)),w===0&&(Te?.(d),e.style.setProperty("--scroll-draw-progress",String(d))),d<1&&(ue=false);}),se){let y=Z(ne(l,f,q,g));for(let w in se){let N=parseFloat(w);y>=N&&!ve.has(N)&&(ve.add(N),se[w]?.());}}!$&&ne(l,f,q,g)>0&&($=true,U?.()),ue&&!v?(v=true,W?.(),de<(C==="infinite"?1/0:C??0)&&(de++,we=setTimeout(()=>{B=-1,$=false,v=false,ve.clear(),je(),Ee=true;},Fe))):!ue&&!fe&&(v=false),A=requestAnimationFrame(Ue);}let st=false;function Xe(){st||(st=true,A=requestAnimationFrame(function(){Ue();}));}function Ye(){st=false,cancelAnimationFrame(A);}let it=new IntersectionObserver(s=>{s.forEach(l=>{te=l.isIntersecting,te&&!k?(Ee=true,Xe()):Ye();});},{root:X??null,threshold:Re,rootMargin:Q});function yt(){T.forEach((s,l)=>{b[l]=Ie(s),s.style.strokeDasharray=`${b[l]}`;}),dt(),Ee=true;}let Qe;function _e(){clearTimeout(Qe),Qe=setTimeout(yt,150);}window.addEventListener("resize",_e),window.addEventListener("orientationchange",_e);let He;return typeof ResizeObserver<"u"&&(He=new ResizeObserver(()=>_e()),He.observe(document.body),He.observe(document.documentElement),He.observe(e)),he>0?setTimeout(()=>it.observe(e),he):it.observe(e),ot({destroy(){cancelAnimationFrame(A),clearTimeout(we),Ye(),it.disconnect(),He?.disconnect(),window.removeEventListener("resize",_e),window.removeEventListener("orientationchange",_e),clearTimeout(Qe),ct();},replay(){B=-1,I=-1,Ge=-1,$=false,v=false,de=0,k=false,G=0,ve.clear(),clearTimeout(we),je(),Ee=true,te&&Xe();},pause(){k=true,Ye();},resume(){k&&(k=false,Ee=true,te&&Xe());},seek(s){let l=Math.min(1,Math.max(0,s));G=l,B=l,k=true,Ye(),Dt(l,x),Ee=true;},getProgress(){return G},refresh(){clearTimeout(Qe),yt(),te&&!k&&Xe();}},()=>({tStart:f,tEnd:q}))}function Ut(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function At(e){let n=[],r=/([\w]+)\(([^)]*)\)/g,t;for(;(t=r.exec(e))!==null;){let o=[],c=[],m=t[2].trim();if(m)for(let i of m.split(/[\s,]+/)){let u=i.match(/^([-+]?[\d.eE]+)(.*)$/);o.push(u?parseFloat(u[1]):0),c.push(u?u[2]:"");}n.push({fn:t[1],nums:o,units:c});}return n}function Xt(e,n,r){let t=At(e),o=At(n);return t.length===0||t.length!==o.length?r<1?e:n:t.map((c,m)=>{let i=o[m];return c.fn!==i.fn||c.nums.length!==i.nums.length?r<1?`${c.fn}(${c.nums.map((u,h)=>`${u}${c.units[h]}`).join(", ")})`:`${i.fn}(${i.nums.map((u,h)=>`${u}${i.units[h]}`).join(", ")})`:`${c.fn}(${c.nums.map((u,h)=>`${u+(i.nums[h]-u)*r}${c.units[h]}`).join(", ")})`}).join(" ")}function Pt(e,n,r){if(typeof e=="number"&&typeof n=="number")return String(e+(n-e)*r);let t=String(e),o=String(n);if(Ut(t))return Oe(t,o,r);if(t.includes("("))return Xt(t,o,r);let c=t.match(/^([-+]?[\d.]+)(.*)$/),m=o.match(/^([-+]?[\d.]+)(.*)$/);if(c&&m){let i=parseFloat(c[1]),u=parseFloat(m[1]);return `${i+(u-i)*r}${c[2]||m[2]}`}return r<1?t:o}function Yt(e){return e.replace(/([A-Z])/g,n=>`-${n.toLowerCase()}`)}var Qt=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),Zt=0,Mt="--scroll-draw-progress";function Kt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function et(e,n){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let{props:t,trigger:o={},easing:c="ease-out",speed:m=1,once:i=false,axis:u="y",scrollContainer:h,native:S=true,velocityScale:V=false,respectReducedMotion:x=true,triggerElement:fe,onProgress:qe,onComplete:J,onEnter:Pe,onLeave:xe,onEnterBack:he,onLeaveBack:oe}=n,me=x&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,ee=typeof c=="function"?c:Se[c]??Se["ease-out"],se=De(o.start??"top bottom"),be=De(o.end??"bottom top"),Re=fe??e,Q=typeof h=="string"?document.querySelector(h):h??null,C=Object.entries(t).map(([a,f])=>({prop:Yt(a),from:Array.isArray(f)?f[0]:"",to:Array.isArray(f)?f[1]:f}));function Fe(){let a=window.getComputedStyle(e);for(let f of C)f.from===""&&(f.from=a.getPropertyValue(f.prop).trim()||"0");}function z(){for(let a of C)e.style.setProperty(a.prop,String(a.to));}let Me=new Map;for(let a of [...C.map(f=>f.prop),Mt])Me.set(a,e.style.getPropertyValue(a));function Ne(){for(let[a,f]of Me)f?e.style.setProperty(a,f):e.style.removeProperty(a);}if(me)return z(),J?.(),{...r,destroy:Ne,getProgress:()=>1};Fe();let Be=typeof c=="string"?Je(c):null;function tt(){if(!S||!Kt()||!Be||u!=="y"||Q||Re!==e||i||m!==1||qe||J||Pe||xe||he||oe||V!==false||(o.start??"top bottom").trim()!=="top bottom"||(o.end??"bottom top").trim()!=="bottom top")return false;for(let a of C)if(!Qt.has(a.prop))return false;return true}function Te(){let a=`ssd-a-${++Zt}`,f=C.map(I=>`${I.prop}:${I.from}`).join(";"),q=C.map(I=>`${I.prop}:${I.to}`).join(";"),v=document.createElement("style");v.setAttribute("data-ssd-animate",""),v.textContent=`@keyframes ${a}{from{${f}}to{${q}}}.${a}{animation-name:${a};animation-duration:auto;animation-timing-function:${Be};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(v),e.classList.add(a);let $=()=>u==="x"?window.scrollX:window.scrollY,A=()=>u==="x"?window.innerWidth:window.innerHeight,te=()=>{let I=e.getBoundingClientRect();return Ce({top:I.top,height:I.height},$(),A(),se,be)};Ve(e,{type:"animate",getProgress:()=>B.getProgress(),getTrigger:te});let B={destroy(){e.classList.remove(a),v.remove(),e.style.animationPlayState="",Ne(),ze(e);},replay(){e.classList.remove(a),e.offsetWidth,e.classList.add(a);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(I){let k=Math.min(1,Math.max(0,I));e.classList.remove(a);for(let G of C)e.style.setProperty(G.prop,Pt(G.from,G.to,k));},getProgress(){let{tStart:I,tEnd:k}=te();return ee(ne($(),I,k,m))}};return B}if(tt())return Te();let U=0,W=0,ie=0,$e=false,ae=false,pe=-1,_=0,Z=false,le=NaN,ke=-1,X=0,Y=()=>Q?u==="x"?Q.scrollLeft:Q.scrollTop:u==="x"?window.scrollX:window.scrollY,O=()=>Q?u==="x"?Q.clientWidth:Q.clientHeight:u==="x"?window.innerWidth:window.innerHeight;function R(){let a=Ze(Re,Q,u),f=Ce(a,a.scroll,O(),se,be);U=f.tStart,W=f.tEnd;}function M(a){e.style.setProperty(Mt,String(a));for(let f of C)e.style.setProperty(f.prop,Pt(f.from,f.to,a));qe?.(a);}function H(a){if(isNaN(le)){le=a;return}le<=0&&a>0?Pe?.():le>0&&a<=0&&oe?.(),le<1&&a>=1?xe?.():le>=1&&a<1&&he?.(),le=a;}function D(){if(!$e||ae)return;let a=performance.now(),f=Y(),q=m;if(V!==false){let A=a-X,te=A>0?Math.abs(f-(ke<0?f:ke))/A:0;q=m*Math.max(.2,1+te*(typeof V=="number"?V:1)*.04);}ke=f,X=a;let v=W===U?0:(f-U)/(W-U);H(v);let $=ee(ne(f,U,W,q));i&&(pe=Math.max(pe,$),$=pe),_=$,M($),$>=1&&!Z?(Z=true,J?.()):$<1&&!i&&(Z=false),ie=requestAnimationFrame(D);}R(),W===U&&ye("scrollAnimate: the trigger window has zero length (start and end resolve to the same scroll position), so this element will never animate. If the target is inside a position:sticky stage, measure the trigger from the container that holds the scroll room via `triggerElement`.",e);{let a=ee(ne(Y(),U,W,m));i&&a>0&&(pe=a),_=a,M(a);}let ce=new IntersectionObserver(a=>{a.forEach(f=>{$e=f.isIntersecting,$e&&!ae?ie=requestAnimationFrame(D):cancelAnimationFrame(ie);});},{root:Q??null}),T;function b(){clearTimeout(T),T=setTimeout(R,150);}return window.addEventListener("resize",b),window.addEventListener("orientationchange",b),ce.observe(e),Ve(e,{type:"animate",getProgress:()=>_,getTrigger:()=>({tStart:U,tEnd:W})}),{destroy(){cancelAnimationFrame(ie),ce.disconnect(),window.removeEventListener("resize",b),window.removeEventListener("orientationchange",b),clearTimeout(T),Ne(),ze(e);},replay(){pe=-1,Z=false,_=0,ae=false,M(0);},pause(){ae=true,cancelAnimationFrame(ie);},resume(){ae&&(ae=false,$e&&(ie=requestAnimationFrame(D)));},seek(a){let f=Math.min(1,Math.max(0,a));_=f,pe=f,ae=true,cancelAnimationFrame(ie),M(f);},getProgress(){return _}}}var kt={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Lt(e,n={}){if(typeof window>"u")return kt;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return ye("scrollParallax: element not found:",e),kt;let{speed:t=.3,axis:o="y",easing:c="linear",trigger:m,onProgress:i}=n,u=r.getBoundingClientRect(),h=o==="x"?u.width:u.height,S=t*h;return et(r,{props:o==="x"?{transform:["translateX(0px)",`translateX(${-S}px)`]}:{transform:["translateY(0px)",`translateY(${-S}px)`]},trigger:m??{start:"top bottom",end:"bottom top"},easing:c,native:false,onProgress:i})}function We(e){return e.map(n=>typeof n=="string"?document.querySelector(n):n).filter(n=>n!==null)}var Ae={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function br(e,n={}){if(typeof window>"u")return Ae;let r=We(e).map(t=>lt(t,n));return {destroy(){r.forEach(t=>t.destroy());},replay(){r.forEach(t=>t.replay());},pause(){r.forEach(t=>t.pause());},resume(){r.forEach(t=>t.resume());},seek(t){r.forEach(o=>o.seek(t));},getProgress(){return r[0]?.getProgress()??0},refresh(){r.forEach(t=>t.refresh?.());}}}function wr(e,n={}){if(typeof window>"u")return Ae;let r=We(e);if(r.length===0)return Ae;let t=0,o=[];function c(i){return lt(r[i],{...n,once:true,onComplete(){n.onComplete?.(),t=Math.min(i+1,r.length-1),t>i&&o[t]?.resume();}})}function m(){r.forEach((i,u)=>{o[u]=c(u);});for(let i=1;i<o.length;i++)o[i].pause();}return m(),{destroy(){o.forEach(i=>i.destroy()),o.length=0;},replay(){o.forEach(i=>i.destroy()),o.length=0,t=0,m();},pause(){o[t]?.pause();},resume(){o[t]?.resume();},seek(i){o[t]?.seek(i);},getProgress(){return o[t]?.getProgress()??0},refresh(){o.forEach(i=>i.refresh?.());}}}function vr(e,n){if(typeof window>"u")return Ae;let r=We(e).map(t=>et(t,n));return {destroy(){r.forEach(t=>t.destroy());},replay(){r.forEach(t=>t.replay());},pause(){r.forEach(t=>t.pause());},resume(){r.forEach(t=>t.resume());},seek(t){r.forEach(o=>o.seek(t));},getProgress(){return r[0]?.getProgress()??0},refresh(){r.forEach(t=>t.refresh?.());}}}function Er(e,n){if(typeof window>"u")return Ae;let r=We(e);if(r.length===0)return Ae;let t=0,o=[];function c(i){return et(r[i],{...n,once:true,onComplete(){n.onComplete?.(),t=Math.min(i+1,r.length-1),t>i&&o[t]?.resume();}})}function m(){r.forEach((i,u)=>{o[u]=c(u);});for(let i=1;i<o.length;i++)o[i].pause();}return m(),{destroy(){o.forEach(i=>i.destroy()),o.length=0;},replay(){o.forEach(i=>i.destroy()),o.length=0,t=0,m();},pause(){o[t]?.pause();},resume(){o[t]?.resume();},seek(i){o[t]?.seek(i);},getProgress(){return o[t]?.getProgress()??0},refresh(){o.forEach(i=>i.refresh?.());}}}function Sr(e,n={}){if(typeof window>"u")return Ae;let r=We(e).map(t=>Lt(t,n));return {destroy(){r.forEach(t=>t.destroy());},replay(){r.forEach(t=>t.replay());},pause(){r.forEach(t=>t.pause());},resume(){r.forEach(t=>t.resume());},seek(t){r.forEach(o=>o.seek(t));},getProgress(){return r[0]?.getProgress()??0},refresh(){r.forEach(t=>t.refresh?.());}}}export{vr as scrollAnimateGroup,Er as scrollAnimateSequence,br as scrollDrawGroup,wr as scrollDrawSequence,Sr as scrollParallaxGroup};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
'use strict';function xe({bounces:e=3,decay:t=.5}={}){let n=Math.max(1,Math.round(e)),r=Math.max(.01,Math.min(.99,t)),u=Math.sqrt(r),s=0,m=[];for(let l=0;l<n;l++){let p=Math.pow(u,l);m.push(p),s+=p;}let c=[0],i=0;for(let l=0;l<n;l++)i+=m[l]/s,c.push(i);return l=>{if(l<=0)return 0;if(l>=1)return 1;for(let p=0;p<n;p++)if(l<=c[p+1]){let f=(l-c[p])/(c[p+1]-c[p]);if(p===0)return f*(2-f);let h=1-Math.pow(r,p);return h+(1-h)*(2*f-1)*(2*f-1)}return 1}}function ve({amplitude:e=1,period:t=.4}={}){let n=Math.max(1,e),r=Math.max(.1,t),u=n<=1?r/4:r/(2*Math.PI)*Math.asin(1/n);return s=>s<=0?0:s>=1?1:n*Math.pow(2,-10*s)*Math.sin((s-u)*(2*Math.PI)/r)+1}var B={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:xe(),elastic:ve()};function W(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let[n="top",r="bottom"]=t.split(/\s+/).filter(Boolean);return {element:n,viewport:r}}function te(e,t,n,r){switch(r){case "top":return e+n;case "center":return e+n+t/2;case "bottom":return e+n+t;default:return e+n}}function ne(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function Se(e,t,n){return Math.min(n,Math.max(t,e))}function F(e,t,n,r){return n===t?0:Se((e-t)/(n-t)*r,0,1)}function q(e,t,n,r,u){let s=te(e.top,e.height,t,r.element)-ne(r.viewport,n),m=te(e.top,e.height,t,u.element)-ne(u.viewport,n);return {tStart:s,tEnd:m}}function re(e){let t=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(t)return [parseInt(t[1]+t[1],16),parseInt(t[2]+t[2],16),parseInt(t[3]+t[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let r=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return r?[parseInt(r[1]),parseInt(r[2]),parseInt(r[3])]:null}function oe(e,t,n){let r=re(e),u=re(t);return !r||!u?e:`rgb(${Math.round(r[0]+(u[0]-r[0])*n)},${Math.round(r[1]+(u[1]-r[1])*n)},${Math.round(r[2]+(u[2]-r[2])*n)})`}var se=new Map;function ie(e,t){se.set(e,t);}function ae(e){se.delete(e);}function Me(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function ue(e){let t=[],n=/([\w]+)\(([^)]*)\)/g,r;for(;(r=n.exec(e))!==null;){let u=[],s=[],m=r[2].trim();if(m)for(let c of m.split(/[\s,]+/)){let i=c.match(/^([-+]?[\d.eE]+)(.*)$/);u.push(i?parseFloat(i[1]):0),s.push(i?i[2]:"");}t.push({fn:r[1],nums:u,units:s});}return t}function Pe(e,t,n){let r=ue(e),u=ue(t);return r.length===0||r.length!==u.length?n<1?e:t:r.map((s,m)=>{let c=u[m];return s.fn!==c.fn||s.nums.length!==c.nums.length?n<1?`${s.fn}(${s.nums.map((i,l)=>`${i}${s.units[l]}`).join(", ")})`:`${c.fn}(${c.nums.map((i,l)=>`${i}${c.units[l]}`).join(", ")})`:`${s.fn}(${s.nums.map((i,l)=>`${i+(c.nums[l]-i)*n}${s.units[l]}`).join(", ")})`}).join(" ")}function le(e,t,n){if(typeof e=="number"&&typeof t=="number")return String(e+(t-e)*n);let r=String(e),u=String(t);if(Me(r))return oe(r,u,n);if(r.includes("("))return Pe(r,u,n);let s=r.match(/^([-+]?[\d.]+)(.*)$/),m=u.match(/^([-+]?[\d.]+)(.*)$/);if(s&&m){let c=parseFloat(s[1]),i=parseFloat(m[1]);return `${c+(i-c)*n}${s[2]||m[2]}`}return n<1?r:u}function Te(e){return e.replace(/([A-Z])/g,t=>`-${t.toLowerCase()}`)}var ce={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},$e=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),Ae=0;function Ie(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function j(e,t){let n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return n;let{props:r,trigger:u={},easing:s="ease-out",speed:m=1,once:c=false,axis:i="y",scrollContainer:l,native:p=true,velocityScale:f=false,onProgress:h,onComplete:H,onEnter:G,onLeave:X,onEnterBack:Y,onLeaveBack:U}=t,pe=window.matchMedia("(prefers-reduced-motion: reduce)").matches,z=typeof s=="function"?s:B[s]??B["ease-out"],Z=W(u.start??"top bottom"),J=W(u.end??"bottom top"),g=typeof l=="string"?document.querySelector(l):l??null,E=Object.entries(r).map(([o,a])=>({prop:Te(o),from:Array.isArray(a)?a[0]:"",to:Array.isArray(a)?a[1]:a}));function fe(){let o=window.getComputedStyle(e);for(let a of E)a.from===""&&(a.from=o.getPropertyValue(a.prop).trim()||"0");}function ge(){for(let o of E)e.style.setProperty(o.prop,String(o.to));}if(pe)return ge(),H?.(),n;fe();function de(){if(!p||!Ie()||typeof s!="string"||!(s in ce)||i!=="y"||g||c||m!==1||h||H||G||X||Y||U||f!==false||(u.start??"top bottom").trim()!=="top bottom"||(u.end??"bottom top").trim()!=="bottom top")return false;for(let o of E)if(!$e.has(o.prop))return false;return true}function be(){let o=`ssd-a-${++Ae}`,a=E.map(d=>`${d.prop}:${d.from}`).join(";"),w=E.map(d=>`${d.prop}:${d.to}`).join(";"),y=document.createElement("style");y.setAttribute("data-ssd-animate",""),y.textContent=`@keyframes ${o}{from{${a}}to{${w}}}.${o}{animation-name:${o};animation-duration:auto;animation-timing-function:${ce[s]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(y),e.classList.add(o);let b=()=>i==="x"?window.scrollX:window.scrollY,R=()=>i==="x"?window.innerWidth:window.innerHeight;return {destroy(){e.classList.remove(o),y.remove();},replay(){e.classList.remove(o),e.offsetWidth,e.classList.add(o);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(d){let A=Math.min(1,Math.max(0,d));e.classList.remove(o);for(let I of E)e.style.setProperty(I.prop,le(I.from,I.to,A));},getProgress(){let d=e.getBoundingClientRect(),A=b(),I=R(),{tStart:we,tEnd:Ee}=q({top:d.top,height:d.height},A,I,Z,J);return z(F(A,we,Ee,m))}}}if(de())return be();let x=0,P=0,v=0,L=false,S=false,T=-1,$=0,C=false,M=NaN,D=-1,K=0,V=()=>g?i==="x"?g.scrollLeft:g.scrollTop:i==="x"?window.scrollX:window.scrollY,he=()=>g?i==="x"?g.clientWidth:g.clientHeight:i==="x"?window.innerWidth:window.innerHeight;function Q(){let o=e.getBoundingClientRect(),a,w;if(g){let b=g.getBoundingClientRect();a=i==="x"?o.left-b.left+g.scrollLeft:o.top-b.top+g.scrollTop,w=i==="x"?o.width:o.height;}else a=i==="x"?o.left:o.top,w=i==="x"?o.width:o.height;let y=q({top:a,height:w},V(),he(),Z,J);x=y.tStart,P=y.tEnd;}function N(o){e.style.setProperty("--scroll-draw-progress",String(o));for(let a of E)e.style.setProperty(a.prop,le(a.from,a.to,o));h?.(o);}function ye(o){if(isNaN(M)){M=o;return}M<=0&&o>0?G?.():M>0&&o<=0&&U?.(),M<1&&o>=1?X?.():M>=1&&o<1&&Y?.(),M=o;}function _(){if(!L||S)return;let o=performance.now(),a=V(),w=m;if(f!==false){let R=o-K,d=R>0?Math.abs(a-(D<0?a:D))/R:0;w=m*Math.max(.2,1+d*(typeof f=="number"?f:1)*.04);}D=a,K=o;let y=P===x?0:(a-x)/(P-x);ye(y);let b=z(F(a,x,P,w));c&&(T=Math.max(T,b),b=T),$=b,N(b),b>=1&&!C?(C=true,H?.()):b<1&&!c&&(C=false),v=requestAnimationFrame(_);}Q();{let o=z(F(V(),x,P,m));c&&o>0&&(T=o),$=o,N(o);}let ee=new IntersectionObserver(o=>{o.forEach(a=>{L=a.isIntersecting,L&&!S?v=requestAnimationFrame(_):cancelAnimationFrame(v);});},{root:g??null}),k;function O(){clearTimeout(k),k=setTimeout(Q,150);}return window.addEventListener("resize",O),window.addEventListener("orientationchange",O),ee.observe(e),ie(e,{type:"animate",getProgress:()=>$,getTrigger:()=>({tStart:x,tEnd:P})}),{destroy(){cancelAnimationFrame(v),ee.disconnect(),window.removeEventListener("resize",O),window.removeEventListener("orientationchange",O),clearTimeout(k),ae(e);},replay(){T=-1,C=false,$=0,S=false,N(0);},pause(){S=true,cancelAnimationFrame(v);},resume(){S&&(S=false,L&&(v=requestAnimationFrame(_)));},seek(o){let a=Math.min(1,Math.max(0,o));$=a,T=a,S=true,cancelAnimationFrame(v),N(a);},getProgress(){return $}}}var me={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0,refresh:()=>{}};function He(e,t={}){if(typeof window>"u")return me;let n=typeof e=="string"?document.querySelector(e):e;if(!n)return process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] scrollHorizontal: track element not found:",e),me;let r=n,{easing:u="linear",trigger:s={start:"top top",end:"bottom bottom"},scrollContainer:m,onProgress:c}=t;function i(){return t.distance??r.scrollWidth-window.innerWidth}let l=i(),p=j(r,f(l));function f(h){return {props:{transform:["translateX(0px)",`translateX(${-h}px)`]},trigger:s,easing:u,native:false,...m!==void 0&&{scrollContainer:m},...c!==void 0&&{onProgress:c}}}return {destroy(){p.destroy();},replay(){p.replay();},pause(){p.pause();},resume(){p.resume();},seek(h){p.seek(h);},getProgress(){return p.getProgress()},refresh(){p.destroy(),l=i(),p=j(r,f(l));}}}exports.scrollHorizontal=He;
|
|
1
|
+
'use strict';function Re({bounces:e=3,decay:t=.5}={}){let r=Math.max(1,Math.round(e)),n=Math.max(.01,Math.min(.99,t)),a=Math.sqrt(n),i=0,l=[];for(let c=0;c<r;c++){let f=Math.pow(a,c);l.push(f),i+=f;}let m=[0],u=0;for(let c=0;c<r;c++)u+=l[c]/i,m.push(u);return c=>{if(c<=0)return 0;if(c>=1)return 1;for(let f=0;f<r;f++)if(c<=m[f+1]){let g=(c-m[f])/(m[f+1]-m[f]);if(f===0)return g*(2-g);let E=1-Math.pow(n,f);return E+(1-E)*(2*g-1)*(2*g-1)}return 1}}function _e({amplitude:e=1,period:t=.4}={}){let r=Math.max(1,e),n=Math.max(.1,t),a=r<=1?n/4:n/(2*Math.PI)*Math.asin(1/r);return i=>i<=0?0:i>=1?1:r*Math.pow(2,-10*i)*Math.sin((i-a)*(2*Math.PI)/n)+1}var R={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:Re(),elastic:_e()};function Q(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let[r="top",n="bottom"]=t.split(/\s+/).filter(Boolean);return {element:r,viewport:n}}function pe(e,t,r,n){switch(n){case "top":return e+r;case "center":return e+r+t/2;case "bottom":return e+r+t;default:return e+r}}function fe(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function Ne(e,t,r){return Math.min(r,Math.max(t,e))}function k(e,t,r,n){return r===t?0:Ne((e-t)/(r-t)*n,0,1)}function de(e,t,r){let n=e.getBoundingClientRect(),a=r==="x"?n.width:n.height;return t?{top:r==="x"?n.left-t.getBoundingClientRect().left+t.scrollLeft:n.top-t.getBoundingClientRect().top+t.scrollTop,height:a,scroll:0}:{top:r==="x"?n.left:n.top,height:a,scroll:r==="x"?window.scrollX:window.scrollY}}function K(e,t,r,n,a){let i=pe(e.top,e.height,t,n.element)-fe(n.viewport,r),l=pe(e.top,e.height,t,a.element)-fe(a.viewport,r);return {tStart:i,tEnd:l}}function ge(e){let t=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(t)return [parseInt(t[1]+t[1],16),parseInt(t[2]+t[2],16),parseInt(t[3]+t[3],16)];let r=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(r)return [parseInt(r[1],16),parseInt(r[2],16),parseInt(r[3],16)];let n=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return n?[parseInt(n[1]),parseInt(n[2]),parseInt(n[3])]:null}function be(e,t,r){let n=ge(e),a=ge(t);return !n||!a?e:`rgb(${Math.round(n[0]+(a[0]-n[0])*r)},${Math.round(n[1]+(a[1]-n[1])*r)},${Math.round(n[2]+(a[2]-n[2])*r)})`}var He="cubic-bezier(0.333333, 0, 0.666667, 0.333333)",Oe="cubic-bezier(0.333333, 0.666667, 0.666667, 1)",ye=33;function De(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timing-function: linear(0, 1)")}function Fe(e){let t=[];for(let r=0;r<ye;r++){let n=r/(ye-1);t.push(String(Math.round(e(n)*1e5)/1e5));}return `linear(${t.join(",")})`}function he(e){switch(e){case "linear":return "linear";case "ease-in":return He;case "ease-out":return Oe;case "ease-in-out":return De()?Fe(R["ease-in-out"]):null;default:return null}}var Ee=Symbol.for("svg-scroll-draw.registry");function we(){let e=globalThis;return e[Ee]||(e[Ee]=new Map)}function Z(e,t){we().set(e,t);}function J(e){we().delete(e);}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 _(e,...t){ze&&console.warn(`[svg-scroll-draw] ${e}`,...t);}function Ve(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function Se(e){let t=[],r=/([\w]+)\(([^)]*)\)/g,n;for(;(n=r.exec(e))!==null;){let a=[],i=[],l=n[2].trim();if(l)for(let m of l.split(/[\s,]+/)){let u=m.match(/^([-+]?[\d.eE]+)(.*)$/);a.push(u?parseFloat(u[1]):0),i.push(u?u[2]:"");}t.push({fn:n[1],nums:a,units:i});}return t}function ke(e,t,r){let n=Se(e),a=Se(t);return n.length===0||n.length!==a.length?r<1?e:t:n.map((i,l)=>{let m=a[l];return i.fn!==m.fn||i.nums.length!==m.nums.length?r<1?`${i.fn}(${i.nums.map((u,c)=>`${u}${i.units[c]}`).join(", ")})`:`${m.fn}(${m.nums.map((u,c)=>`${u}${m.units[c]}`).join(", ")})`:`${i.fn}(${i.nums.map((u,c)=>`${u+(m.nums[c]-u)*r}${i.units[c]}`).join(", ")})`}).join(" ")}function ve(e,t,r){if(typeof e=="number"&&typeof t=="number")return String(e+(t-e)*r);let n=String(e),a=String(t);if(Ve(n))return be(n,a,r);if(n.includes("("))return ke(n,a,r);let i=n.match(/^([-+]?[\d.]+)(.*)$/),l=a.match(/^([-+]?[\d.]+)(.*)$/);if(i&&l){let m=parseFloat(i[1]),u=parseFloat(l[1]);return `${m+(u-m)*r}${i[2]||l[2]}`}return r<1?n:a}function We(e){return e.replace(/([A-Z])/g,t=>`-${t.toLowerCase()}`)}var Be=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),qe=0,xe="--scroll-draw-progress";function Ge(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function ee(e,t){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let{props:n,trigger:a={},easing:i="ease-out",speed:l=1,once:m=false,axis:u="y",scrollContainer:c,native:f=true,velocityScale:g=false,respectReducedMotion:E=true,triggerElement:$,onProgress:b,onComplete:P,onEnter:p,onLeave:C,onEnterBack:te,onLeaveBack:ne}=t,Te=E&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,W=typeof i=="function"?i:R[i]??R["ease-out"],re=Q(a.start??"top bottom"),oe=Q(a.end??"bottom top"),se=$??e,y=typeof c=="string"?document.querySelector(c):c??null,w=Object.entries(n).map(([o,s])=>({prop:We(o),from:Array.isArray(s)?s[0]:"",to:Array.isArray(s)?s[1]:s}));function Pe(){let o=window.getComputedStyle(e);for(let s of w)s.from===""&&(s.from=o.getPropertyValue(s.prop).trim()||"0");}function Ae(){for(let o of w)e.style.setProperty(o.prop,String(o.to));}let ie=new Map;for(let o of [...w.map(s=>s.prop),xe])ie.set(o,e.style.getPropertyValue(o));function B(){for(let[o,s]of ie)s?e.style.setProperty(o,s):e.style.removeProperty(o);}if(Te)return Ae(),P?.(),{...r,destroy:B,getProgress:()=>1};Pe();let ae=typeof i=="string"?he(i):null;function Le(){if(!f||!Ge()||!ae||u!=="y"||y||se!==e||m||l!==1||b||P||p||C||te||ne||g!==false||(a.start??"top bottom").trim()!=="top bottom"||(a.end??"bottom top").trim()!=="bottom top")return false;for(let o of w)if(!Be.has(o.prop))return false;return true}function Ie(){let o=`ssd-a-${++qe}`,s=w.map(d=>`${d.prop}:${d.from}`).join(";"),F=w.map(d=>`${d.prop}:${d.to}`).join(";"),I=document.createElement("style");I.setAttribute("data-ssd-animate",""),I.textContent=`@keyframes ${o}{from{${s}}to{${F}}}.${o}{animation-name:${o};animation-duration:auto;animation-timing-function:${ae};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(I),e.classList.add(o);let h=()=>u==="x"?window.scrollX:window.scrollY,z=()=>u==="x"?window.innerWidth:window.innerHeight,V=()=>{let d=e.getBoundingClientRect();return K({top:d.top,height:d.height},h(),z(),re,oe)};Z(e,{type:"animate",getProgress:()=>X.getProgress(),getTrigger:V});let X={destroy(){e.classList.remove(o),I.remove(),e.style.animationPlayState="",B(),J(e);},replay(){e.classList.remove(o),e.offsetWidth,e.classList.add(o);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(d){let U=Math.min(1,Math.max(0,d));e.classList.remove(o);for(let Y of w)e.style.setProperty(Y.prop,ve(Y.from,Y.to,U));},getProgress(){let{tStart:d,tEnd:U}=V();return W(k(h(),d,U,l))}};return X}if(Le())return Ie();let S=0,v=0,x=0,N=false,M=false,A=-1,L=0,H=false,T=NaN,q=-1,ue=0,le=()=>y?u==="x"?y.scrollLeft:y.scrollTop:u==="x"?window.scrollX:window.scrollY,$e=()=>y?u==="x"?y.clientWidth:y.clientHeight:u==="x"?window.innerWidth:window.innerHeight;function ce(){let o=de(se,y,u),s=K(o,o.scroll,$e(),re,oe);S=s.tStart,v=s.tEnd;}function O(o){e.style.setProperty(xe,String(o));for(let s of w)e.style.setProperty(s.prop,ve(s.from,s.to,o));b?.(o);}function Ce(o){if(isNaN(T)){T=o;return}T<=0&&o>0?p?.():T>0&&o<=0&&ne?.(),T<1&&o>=1?C?.():T>=1&&o<1&&te?.(),T=o;}function G(){if(!N||M)return;let o=performance.now(),s=le(),F=l;if(g!==false){let z=o-ue,V=z>0?Math.abs(s-(q<0?s:q))/z:0;F=l*Math.max(.2,1+V*(typeof g=="number"?g:1)*.04);}q=s,ue=o;let I=v===S?0:(s-S)/(v-S);Ce(I);let h=W(k(s,S,v,F));m&&(A=Math.max(A,h),h=A),L=h,O(h),h>=1&&!H?(H=true,P?.()):h<1&&!m&&(H=false),x=requestAnimationFrame(G);}ce(),v===S&&_("scrollAnimate: the trigger window has zero length (start and end resolve to the same scroll position), so this element will never animate. If the target is inside a position:sticky stage, measure the trigger from the container that holds the scroll room via `triggerElement`.",e);{let o=W(k(le(),S,v,l));m&&o>0&&(A=o),L=o,O(o);}let me=new IntersectionObserver(o=>{o.forEach(s=>{N=s.isIntersecting,N&&!M?x=requestAnimationFrame(G):cancelAnimationFrame(x);});},{root:y??null}),j;function D(){clearTimeout(j),j=setTimeout(ce,150);}return window.addEventListener("resize",D),window.addEventListener("orientationchange",D),me.observe(e),Z(e,{type:"animate",getProgress:()=>L,getTrigger:()=>({tStart:S,tEnd:v})}),{destroy(){cancelAnimationFrame(x),me.disconnect(),window.removeEventListener("resize",D),window.removeEventListener("orientationchange",D),clearTimeout(j),B(),J(e);},replay(){A=-1,H=false,L=0,M=false,O(0);},pause(){M=true,cancelAnimationFrame(x);},resume(){M&&(M=false,N&&(x=requestAnimationFrame(G)));},seek(o){let s=Math.min(1,Math.max(0,o));L=s,A=s,M=true,cancelAnimationFrame(x),O(s);},getProgress(){return L}}}var Me={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0,refresh:()=>{}};function ot(e,t={}){if(typeof window>"u")return Me;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return _("scrollHorizontal: track element not found:",e),Me;let n=r,{easing:a="linear",trigger:i={start:"top top",end:"bottom bottom"},scrollContainer:l,respectReducedMotion:m=false,onProgress:u}=t;function c(){let p=typeof l=="string"?document.querySelector(l):l??null;return p?p.clientWidth:window.innerWidth}function f(){return t.distance??n.scrollWidth-c()}function g(){if(t.triggerElement!==void 0){let p=typeof t.triggerElement=="string"?document.querySelector(t.triggerElement):t.triggerElement;if(p)return p;_("scrollHorizontal: triggerElement not found:",t.triggerElement);}for(let p=n.parentElement;p;p=p.parentElement)if(window.getComputedStyle(p).position==="sticky")return p.parentElement??p;return n}let E=f(),$=g(),b=ee(n,P(E,$));function P(p,C){return {props:{transform:["translateX(0px)",`translateX(${-p}px)`]},trigger:i,easing:a,native:false,respectReducedMotion:m,...C!==n&&{triggerElement:C},...l!==void 0&&{scrollContainer:l},...u!==void 0&&{onProgress:u}}}return {destroy(){b.destroy();},replay(){b.replay();},pause(){b.pause();},resume(){b.resume();},seek(p){b.seek(p);},getProgress(){return b.getProgress()},refresh(){b.destroy(),E=f(),$=g(),b=ee(n,P(E,$));}}}exports.scrollHorizontal=ot;
|
|
@@ -15,12 +15,29 @@ interface ScrollDrawInstance {
|
|
|
15
15
|
seek: (progress: number) => void;
|
|
16
16
|
/** Returns current draw progress (0–1). */
|
|
17
17
|
getProgress: () => number;
|
|
18
|
+
/**
|
|
19
|
+
* Re-measure after a layout change: path lengths, and the scroll trigger window.
|
|
20
|
+
*
|
|
21
|
+
* The engine already re-measures on `resize`, on `orientationchange`, and via a
|
|
22
|
+
* `ResizeObserver` on the document element — but none of those fire for a layout
|
|
23
|
+
* change that leaves the document height alone, such as a tab switching, a
|
|
24
|
+
* sibling collapsing, or a font swapping inside a fixed-height box. Call this
|
|
25
|
+
* after one of those.
|
|
26
|
+
*
|
|
27
|
+
* Optional on this shared type because several instances here are fan-outs over
|
|
28
|
+
* other instances or SSR no-op stubs. `scrollDraw`, `scrollPin`,
|
|
29
|
+
* `scrollHorizontal`, `scrollDrawTimeline` and the group APIs all provide it;
|
|
30
|
+
* use `instance.refresh?.()` if you hold an instance of unknown origin.
|
|
31
|
+
*/
|
|
32
|
+
refresh?: () => void;
|
|
18
33
|
}
|
|
19
34
|
|
|
20
35
|
interface ScrollHorizontalOptions {
|
|
21
36
|
/**
|
|
22
37
|
* Total horizontal travel distance in pixels.
|
|
23
|
-
*
|
|
38
|
+
*
|
|
39
|
+
* Default: `track.scrollWidth` minus the width it is seen through — the
|
|
40
|
+
* viewport, or the `scrollContainer`'s client width when one is given.
|
|
24
41
|
*/
|
|
25
42
|
distance?: number;
|
|
26
43
|
/**
|
|
@@ -32,6 +49,36 @@ interface ScrollHorizontalOptions {
|
|
|
32
49
|
easing?: EasingName | ((t: number) => number);
|
|
33
50
|
/** Custom scroll container. Default: window. */
|
|
34
51
|
scrollContainer?: string | Element;
|
|
52
|
+
/**
|
|
53
|
+
* Element whose height defines the scroll window for the scrub.
|
|
54
|
+
*
|
|
55
|
+
* Default: the container of the track's nearest `position: sticky` ancestor —
|
|
56
|
+
* the `.outer` element in the CSS setup below, which is where the scroll room
|
|
57
|
+
* actually lives. Falls back to the track itself when there is no sticky
|
|
58
|
+
* ancestor.
|
|
59
|
+
*
|
|
60
|
+
* Why this is not the track: a sticky stage pins the track at exactly one
|
|
61
|
+
* viewport tall, so measuring `top top` → `bottom bottom` against it gives
|
|
62
|
+
* tStart === tEnd — a zero-length window, and a track that never moves.
|
|
63
|
+
*/
|
|
64
|
+
triggerElement?: string | Element;
|
|
65
|
+
/**
|
|
66
|
+
* Honour `prefers-reduced-motion: reduce` by holding the track at its final
|
|
67
|
+
* position instead of scrubbing. Default: **`false`** — unlike every other
|
|
68
|
+
* API here, which defaults to `true`.
|
|
69
|
+
*
|
|
70
|
+
* The reasoning: this transform is scroll-linked scrubbing, not autonomous
|
|
71
|
+
* motion. It advances only as the user scrolls, 1:1 with their input, so it is
|
|
72
|
+
* direct manipulation rather than something that plays at them. And the
|
|
73
|
+
* alternative is worse than the motion — the panels are only reachable *via*
|
|
74
|
+
* the transform, inside a sticky `overflow: hidden` container, so applying a
|
|
75
|
+
* final state (or none at all) silently hides all of the content except one
|
|
76
|
+
* panel from exactly the users who asked for less motion.
|
|
77
|
+
*
|
|
78
|
+
* Set to `true` if your layout has an accessible non-transform fallback and you
|
|
79
|
+
* would rather drop the movement.
|
|
80
|
+
*/
|
|
81
|
+
respectReducedMotion?: boolean;
|
|
35
82
|
onProgress?: (progress: number) => void;
|
|
36
83
|
}
|
|
37
84
|
interface ScrollHorizontalInstance extends ScrollDrawInstance {
|
|
@@ -15,12 +15,29 @@ interface ScrollDrawInstance {
|
|
|
15
15
|
seek: (progress: number) => void;
|
|
16
16
|
/** Returns current draw progress (0–1). */
|
|
17
17
|
getProgress: () => number;
|
|
18
|
+
/**
|
|
19
|
+
* Re-measure after a layout change: path lengths, and the scroll trigger window.
|
|
20
|
+
*
|
|
21
|
+
* The engine already re-measures on `resize`, on `orientationchange`, and via a
|
|
22
|
+
* `ResizeObserver` on the document element — but none of those fire for a layout
|
|
23
|
+
* change that leaves the document height alone, such as a tab switching, a
|
|
24
|
+
* sibling collapsing, or a font swapping inside a fixed-height box. Call this
|
|
25
|
+
* after one of those.
|
|
26
|
+
*
|
|
27
|
+
* Optional on this shared type because several instances here are fan-outs over
|
|
28
|
+
* other instances or SSR no-op stubs. `scrollDraw`, `scrollPin`,
|
|
29
|
+
* `scrollHorizontal`, `scrollDrawTimeline` and the group APIs all provide it;
|
|
30
|
+
* use `instance.refresh?.()` if you hold an instance of unknown origin.
|
|
31
|
+
*/
|
|
32
|
+
refresh?: () => void;
|
|
18
33
|
}
|
|
19
34
|
|
|
20
35
|
interface ScrollHorizontalOptions {
|
|
21
36
|
/**
|
|
22
37
|
* Total horizontal travel distance in pixels.
|
|
23
|
-
*
|
|
38
|
+
*
|
|
39
|
+
* Default: `track.scrollWidth` minus the width it is seen through — the
|
|
40
|
+
* viewport, or the `scrollContainer`'s client width when one is given.
|
|
24
41
|
*/
|
|
25
42
|
distance?: number;
|
|
26
43
|
/**
|
|
@@ -32,6 +49,36 @@ interface ScrollHorizontalOptions {
|
|
|
32
49
|
easing?: EasingName | ((t: number) => number);
|
|
33
50
|
/** Custom scroll container. Default: window. */
|
|
34
51
|
scrollContainer?: string | Element;
|
|
52
|
+
/**
|
|
53
|
+
* Element whose height defines the scroll window for the scrub.
|
|
54
|
+
*
|
|
55
|
+
* Default: the container of the track's nearest `position: sticky` ancestor —
|
|
56
|
+
* the `.outer` element in the CSS setup below, which is where the scroll room
|
|
57
|
+
* actually lives. Falls back to the track itself when there is no sticky
|
|
58
|
+
* ancestor.
|
|
59
|
+
*
|
|
60
|
+
* Why this is not the track: a sticky stage pins the track at exactly one
|
|
61
|
+
* viewport tall, so measuring `top top` → `bottom bottom` against it gives
|
|
62
|
+
* tStart === tEnd — a zero-length window, and a track that never moves.
|
|
63
|
+
*/
|
|
64
|
+
triggerElement?: string | Element;
|
|
65
|
+
/**
|
|
66
|
+
* Honour `prefers-reduced-motion: reduce` by holding the track at its final
|
|
67
|
+
* position instead of scrubbing. Default: **`false`** — unlike every other
|
|
68
|
+
* API here, which defaults to `true`.
|
|
69
|
+
*
|
|
70
|
+
* The reasoning: this transform is scroll-linked scrubbing, not autonomous
|
|
71
|
+
* motion. It advances only as the user scrolls, 1:1 with their input, so it is
|
|
72
|
+
* direct manipulation rather than something that plays at them. And the
|
|
73
|
+
* alternative is worse than the motion — the panels are only reachable *via*
|
|
74
|
+
* the transform, inside a sticky `overflow: hidden` container, so applying a
|
|
75
|
+
* final state (or none at all) silently hides all of the content except one
|
|
76
|
+
* panel from exactly the users who asked for less motion.
|
|
77
|
+
*
|
|
78
|
+
* Set to `true` if your layout has an accessible non-transform fallback and you
|
|
79
|
+
* would rather drop the movement.
|
|
80
|
+
*/
|
|
81
|
+
respectReducedMotion?: boolean;
|
|
35
82
|
onProgress?: (progress: number) => void;
|
|
36
83
|
}
|
|
37
84
|
interface ScrollHorizontalInstance extends ScrollDrawInstance {
|