svg-scroll-draw 2.6.0 → 2.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/angular/index.cjs +3 -3
- package/dist/angular/index.d.mts +22 -0
- package/dist/angular/index.d.ts +22 -0
- package/dist/angular/index.mjs +3 -3
- package/dist/astro/index.cjs +3 -3
- package/dist/astro/index.d.mts +8 -0
- package/dist/astro/index.d.ts +8 -0
- package/dist/astro/index.mjs +3 -3
- package/dist/cdn/svg-scroll-draw.global.js +3 -3
- 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 +22 -0
- package/dist/group/index.d.ts +22 -0
- package/dist/group/index.mjs +3 -3
- package/dist/horizontal/index.cjs +1 -0
- package/dist/horizontal/index.d.mts +61 -0
- package/dist/horizontal/index.d.ts +61 -0
- package/dist/horizontal/index.mjs +1 -0
- package/dist/index.cjs +4 -4
- package/dist/index.d.mts +22 -0
- package/dist/index.d.ts +22 -0
- package/dist/index.mjs +4 -4
- package/dist/lenis/index.cjs +1 -0
- package/dist/lenis/index.d.mts +51 -0
- package/dist/lenis/index.d.ts +51 -0
- package/dist/lenis/index.mjs +1 -0
- package/dist/nuxt/index.cjs +2 -2
- package/dist/nuxt/index.d.mts +22 -0
- package/dist/nuxt/index.d.ts +22 -0
- package/dist/nuxt/index.mjs +2 -2
- package/dist/pin/index.cjs +1 -0
- package/dist/pin/index.d.mts +29 -0
- package/dist/pin/index.d.ts +29 -0
- package/dist/pin/index.mjs +1 -0
- package/dist/progress/index.cjs +1 -0
- package/dist/progress/index.d.mts +59 -0
- package/dist/progress/index.d.ts +59 -0
- package/dist/progress/index.mjs +1 -0
- package/dist/react/index.cjs +3 -3
- package/dist/react/index.d.mts +22 -0
- package/dist/react/index.d.ts +22 -0
- package/dist/react/index.mjs +3 -3
- package/dist/reveal/index.cjs +1 -0
- package/dist/reveal/index.d.mts +80 -0
- package/dist/reveal/index.d.ts +80 -0
- package/dist/reveal/index.mjs +1 -0
- package/dist/snap/index.cjs +1 -0
- package/dist/snap/index.d.mts +30 -0
- package/dist/snap/index.d.ts +30 -0
- package/dist/snap/index.mjs +1 -0
- package/dist/solid/index.cjs +3 -3
- package/dist/solid/index.d.mts +22 -0
- package/dist/solid/index.d.ts +22 -0
- package/dist/solid/index.mjs +3 -3
- package/dist/svelte/index.cjs +3 -3
- package/dist/svelte/index.d.mts +22 -0
- package/dist/svelte/index.d.ts +22 -0
- package/dist/svelte/index.mjs +3 -3
- package/dist/vue/index.cjs +2 -2
- package/dist/vue/index.d.mts +22 -0
- package/dist/vue/index.d.ts +22 -0
- package/dist/vue/index.mjs +2 -2
- package/dist/web-component/index.cjs +3 -3
- package/dist/web-component/index.mjs +3 -3
- package/package.json +31 -1
package/dist/group/index.d.ts
CHANGED
|
@@ -71,6 +71,14 @@ interface ScrollDrawOptions {
|
|
|
71
71
|
onProgress?: (alpha: number) => void;
|
|
72
72
|
onStart?: () => void;
|
|
73
73
|
onComplete?: () => void;
|
|
74
|
+
/** Fires when scroll position enters the trigger zone (scrolling forward). */
|
|
75
|
+
onEnter?: () => void;
|
|
76
|
+
/** Fires when scroll position exits the trigger zone at the end (scrolling forward). */
|
|
77
|
+
onLeave?: () => void;
|
|
78
|
+
/** Fires when scroll position re-enters the trigger zone from the end (scrolling back). */
|
|
79
|
+
onEnterBack?: () => void;
|
|
80
|
+
/** Fires when scroll position exits the trigger zone at the start (scrolling back). */
|
|
81
|
+
onLeaveBack?: () => void;
|
|
74
82
|
/**
|
|
75
83
|
* Trigger the animation when the element enters the viewport instead of
|
|
76
84
|
* tying it to scroll position. The draw runs over `duration` milliseconds,
|
|
@@ -128,8 +136,22 @@ interface ScrollAnimateOptions {
|
|
|
128
136
|
axis?: 'x' | 'y';
|
|
129
137
|
scrollContainer?: string | Element;
|
|
130
138
|
native?: boolean;
|
|
139
|
+
/**
|
|
140
|
+
* Scale animation speed by scroll velocity — faster scrolling = faster animation.
|
|
141
|
+
* Pass `true` for default sensitivity (1) or a number to control it.
|
|
142
|
+
* Higher values = more dramatic speed-up. Default sensitivity: 1.
|
|
143
|
+
*/
|
|
144
|
+
velocityScale?: boolean | number;
|
|
131
145
|
onProgress?: (alpha: number) => void;
|
|
132
146
|
onComplete?: () => void;
|
|
147
|
+
/** Fires when scroll enters the trigger zone (scrolling forward). */
|
|
148
|
+
onEnter?: () => void;
|
|
149
|
+
/** Fires when scroll exits the trigger zone at the end (scrolling forward). */
|
|
150
|
+
onLeave?: () => void;
|
|
151
|
+
/** Fires when scroll re-enters the trigger zone from the end (scrolling back). */
|
|
152
|
+
onEnterBack?: () => void;
|
|
153
|
+
/** Fires when scroll exits the trigger zone at the start (scrolling back). */
|
|
154
|
+
onLeaveBack?: () => void;
|
|
133
155
|
}
|
|
134
156
|
interface ScrollParallaxOptions {
|
|
135
157
|
speed?: number;
|
package/dist/group/index.mjs
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
function
|
|
2
|
-
<div style="position:absolute;${
|
|
3
|
-
<div style="position:absolute;${l?`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(),t}function _e(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 Ge(e,n={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:r,...t}=n,o=r?{...Je[r],...t}:t,c=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:m="path, polyline, line, polygon, rect, circle",speed:i=1,fade:l=false,easing:g="linear",trigger:x={},stagger:V=0,direction:E="forward",once:re=false,debug:Pe=false,axis:z="y",scrollContainer:Ee,autoReverse:L=false,delay:W=0,strokeColor:ne,strokeWidth:se,fillOpacity:oe,waypoints:ie,velocityScale:ae=false,threshold:ge=0,rootMargin:Z="0px",repeat:_=0,repeatDelay:B=0,morphTo:D,clip:J,autoplay:ve=false,duration:Me=1e3,native:ze=true,onProgress:ce,onStart:le,onComplete:K}=o,j=J===true?"left":typeof J=="string"?J:false,X=typeof g=="function"?g:xe[g]??xe.linear,ye=$e(x.start??"top bottom"),u=$e(x.end??"bottom top"),f=typeof Ee=="string"?document.querySelector(Ee):Ee??null,O=Array.isArray(ne)?ne[0]:null,S=Array.isArray(ne)?ne[1]:typeof ne=="string"?ne:null,M=Array.isArray(se)?se[0]:null,F=Array.isArray(se)?se[1]:typeof se=="number"?se:null,w=Array.isArray(oe)?oe[0]:null,A=Array.isArray(oe)?oe[1]:typeof oe=="number"?oe:null;function q(s){let a=s*100;switch(j){case "right":return `inset(0 0 0 ${100-a}%)`;case "top":return `inset(0 0 ${100-a}% 0)`;case "bottom":return `inset(${100-a}% 0 0 0)`;case "center":return `circle(${s*150}% at 50% 50%)`;default:return `inset(0 ${100-a}% 0 0)`}}let I=j?[]:Array.from(e.querySelectorAll(m)),T=[],Q=[],fe=0,me=0,N=false,Y=false,C=0,De=false,ee=-1,Ie=-1,R=false,he=0,ue=0,pe,We=null,de=new Set,Ce=-1,Be=performance.now();function ke(){return f?z==="x"?f.scrollLeft:f.scrollTop:z==="x"?window.scrollX:window.scrollY}function je(){return f?z==="x"?f.clientWidth:f.clientHeight:z==="x"?window.innerWidth:window.innerHeight}function Xe(){let s=e.getBoundingClientRect(),a,y,P;if(f){let H=f.getBoundingClientRect();a=z==="x"?s.left-H.left+f.scrollLeft:s.top-H.top+f.scrollTop,y=z==="x"?s.width:s.height,P=ke();}else a=z==="x"?s.left:s.top,y=z==="x"?s.width:s.height,P=ke();let G=Ae({top:a,height:y},P,je(),ye,u);fe=G.tStart,me=G.tEnd,Pe&&process.env.NODE_ENV!=="production"&&(We?.remove(),We=bt(fe,me,z));}function lt(s,a){if(e.style.setProperty("--scroll-draw-progress",String(s)),j){let y=a==="reverse"?1-s:s;e.style.clipPath=q(y);return}I.forEach((y,P)=>{y.style.strokeDashoffset=a==="reverse"?`${T[P]*s}`:`${T[P]*(1-s)}`,l&&(y.style.opacity=a==="reverse"?`${1-s}`:`${s}`),O&&S?y.style.stroke=Te(O,S,s):S&&(y.style.stroke=S),M!==null&&F!==null?y.style.strokeWidth=`${M+(F-M)*s}`:F!==null&&(y.style.strokeWidth=`${F}`),w!==null&&A!==null?y.style.fillOpacity=`${w+(A-w)*s}`:A!==null&&(y.style.fillOpacity=`${A}`),D&&y.tagName.toLowerCase()==="path"&&Q[P]&&y.setAttribute("d",_e(Q[P],D,s));});}function Oe(){if(e.style.setProperty("--scroll-draw-progress","0"),j){e.style.clipPath=q(0);return}I.forEach((s,a)=>{s.style.strokeDasharray=`${T[a]}`,s.style.strokeDashoffset=E==="reverse"?"0":`${T[a]}`,l?s.style.opacity=E==="reverse"?"1":"0":s.style.opacity="",O&&(s.style.stroke=O),M!==null&&(s.style.strokeWidth=`${M}`),w!==null&&(s.style.fillOpacity=`${w}`),D&&s.tagName.toLowerCase()==="path"&&Q[a]&&s.setAttribute("d",Q[a]);});}if(I.forEach(s=>{ht(s);let a=Re(s);T.push(a),s.tagName.toLowerCase()==="path"?Q.push(s.getAttribute("d")??""):Q.push(""),c?(s.style.strokeDasharray=`${a}`,s.style.strokeDashoffset=E==="reverse"?`${a}`:"0",l&&(s.style.opacity="1"),S&&(s.style.stroke=S),F!==null&&(s.style.strokeWidth=`${F}`),A!==null&&(s.style.fillOpacity=`${A}`),D&&s.tagName.toLowerCase()==="path"&&s.setAttribute("d",D)):(s.style.strokeDasharray=`${a}`,s.style.strokeDashoffset=E==="reverse"?"0":`${a}`,l?s.style.opacity=E==="reverse"?"1":"0":s.style.opacity="",O&&(s.style.stroke=O),M!==null&&(s.style.strokeWidth=`${M}`),w!==null&&(s.style.fillOpacity=`${w}`));}),j){if(c)return e.style.clipPath=q(1),K?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=q(0);}else if(c)return K?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function ut(){return !(ze===false||!yt()||!I.length||typeof g!="string"||!(g in Qe)||j||z!=="y"||f||i!==1||V!==0||re||L||ae!==false||D||ie||_||W>0||ce||le||K||ne!=null||se!=null||oe!=null||(x.start??"top bottom").trim()!=="top bottom"||(x.end??"bottom top").trim()!=="bottom top")}function ct(){let s=`svg-scroll-draw-${++gt}`,a=E==="reverse"?"0":"var(--ssd-len)",y=E==="reverse"?"var(--ssd-len)":"0",P=`stroke-dashoffset:${a};`,G=`stroke-dashoffset:${y};`;l&&(P+=`opacity:${E==="reverse"?1:0};`,G+=`opacity:${E==="reverse"?0:1};`);let H=document.createElement("style");H.setAttribute("data-svg-scroll-draw",""),H.textContent=`@keyframes ${s}{from{${P}}to{${G}}}.${s}{animation-name:${s};animation-duration:auto;animation-timing-function:${Qe[g]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(H);function d(p,b){p.style.setProperty("--ssd-len",String(T[b])),p.style.strokeDasharray=`${T[b]}`,p.style.strokeDashoffset="",p.style.opacity="",p.style.animationPlayState="",p.classList.add(s);}I.forEach(d);let v=false,k=-1;function h(){if(k>=0)return k;let p=e.getBoundingClientRect(),{tStart:b,tEnd:$}=Ae({top:p.top,height:p.height},ke(),je(),ye,u);return X(U(ke(),b,$,i))}return {destroy(){I.forEach(p=>{p.classList.remove(s),p.style.removeProperty("--ssd-len"),p.style.animationPlayState="";}),H.remove();},replay(){v=false,k=-1,I.forEach(d);},pause(){v=true,I.forEach(p=>{p.style.animationPlayState="paused";});},resume(){v&&(v=false,I.forEach(p=>{p.style.animationPlayState="running";}));},seek(p){let b=Math.min(1,Math.max(0,p));k=b,v=true,I.forEach(($,be)=>{$.classList.remove(s),$.style.strokeDashoffset=E==="reverse"?`${T[be]*b}`:`${T[be]*(1-b)}`,l&&($.style.opacity=E==="reverse"?`${1-b}`:`${b}`);});},getProgress(){return h()}}}if(ut())return ct();function ft(){let s=Math.max(1,Me),a=0,y=0;function P(h){let p=true;if(j){let b=Math.min(1,Math.max(0,h/s)),$=X(b);he=$,e.style.setProperty("--scroll-draw-progress",String($)),e.style.clipPath=q(E==="reverse"?1-$:$),ce?.($),b<1&&(p=false);}else I.forEach((b,$)=>{let be=$*V*s,Se=Math.min(1,Math.max(0,(h-be)/s)),te=X(Se);b.style.strokeDashoffset=E==="reverse"?`${T[$]*te}`:`${T[$]*(1-te)}`,l&&(b.style.opacity=E==="reverse"?`${1-te}`:`${te}`),O&&S?b.style.stroke=Te(O,S,te):S&&(b.style.stroke=S),M!==null&&F!==null?b.style.strokeWidth=`${M+(F-M)*te}`:F!==null&&(b.style.strokeWidth=`${F}`),w!==null&&A!==null?b.style.fillOpacity=`${w+(A-w)*te}`:A!==null&&(b.style.fillOpacity=`${A}`),D&&b.tagName.toLowerCase()==="path"&&Q[$]&&b.setAttribute("d",_e(Q[$],D,te)),$===0&&(ce?.(te),e.style.setProperty("--scroll-draw-progress",String(te))),Se<1&&(p=false);});if(ie){let b=Math.min(1,Math.max(0,h/s)),$=X(b);for(let be in ie){let Se=parseFloat(be);$>=Se&&!de.has(Se)&&(de.add(Se),ie[be]?.());}}return p}function G(h){if(R)return;let p=h-a;Y||(Y=true,le?.());let b=P(p);if(b&&!N){N=true,P(s*(1+Math.max(0,I.length-1)*V)),K?.(),ue<(_==="infinite"?1/0:_??0)&&(ue++,pe=setTimeout(()=>{a=performance.now(),Y=false,N=false,de.clear(),Oe(),C=requestAnimationFrame(G);},B));return}b||(C=requestAnimationFrame(G));}function H(){cancelAnimationFrame(C),clearTimeout(pe),a=performance.now(),y=0,R=false,Y=false,N=false,ue=0,de.clear(),Oe(),C=requestAnimationFrame(G);}let d=new IntersectionObserver(h=>{h.forEach(p=>{p.isIntersecting&&!(re&&N)?H():!p.isIntersecting&&!re&&!N&&(cancelAnimationFrame(C),clearTimeout(pe),a=null);});},{root:f??null,threshold:ge,rootMargin:Z}),v;function k(){clearTimeout(v),v=setTimeout(()=>{I.forEach((h,p)=>{T[p]=Re(h),h.style.strokeDasharray=`${T[p]}`;});},150);}return window.addEventListener("resize",k),window.addEventListener("orientationchange",k),W>0?setTimeout(()=>d.observe(e),W):d.observe(e),{destroy(){cancelAnimationFrame(C),clearTimeout(pe),d.disconnect(),window.removeEventListener("resize",k),window.removeEventListener("orientationchange",k),clearTimeout(v);},replay(){ue=0,H();},pause(){R||(R=true,y=performance.now()-a,cancelAnimationFrame(C));},resume(){R&&(R=false,a=performance.now()-y,C=requestAnimationFrame(G));},seek(h){let p=Math.min(1,Math.max(0,h));he=p,R=true,y=p*s,a=performance.now()-y,cancelAnimationFrame(C),P(y);},getProgress(){return he}}}if(ve)return ft();Xe();function Fe(){if(!De||R)return;let s=performance.now(),a=ke(),y=i;if(ae!==false){let d=s-Be,v=d>0?Math.abs(a-(Ce<0?a:Ce))/d:0;y=i*Math.max(.2,1+v*(typeof ae=="number"?ae:1)*.04);}Ce=a,Be=s;let P=L?Ie===-1||a>=Ie?"forward":"reverse":E;Ie=a;let G=me-fe,H=true;if(j){let d=X(U(a,fe,me,y));re&&!L&&(ee=Math.max(ee,d),d=ee),he=d,e.style.setProperty("--scroll-draw-progress",String(d));let v=P==="reverse"?1-d:d;e.style.clipPath=q(v),ce?.(d),!Y&&U(a,fe,me,y)>0&&(Y=true,le?.()),d>=1&&!N?(N=true,K?.(),ue<(_==="infinite"?1/0:_??0)&&(ue++,pe=setTimeout(()=>{ee=-1,Y=false,N=false,e.style.clipPath=q(0);},B))):d<1&&!re&&(N=false),C=requestAnimationFrame(Fe);return}if(I.forEach((d,v)=>{let k=v*V*G,h=X(U(a,fe+k,me+k,y));re&&!L&&(ee=Math.max(ee,h),h=ee),he=h,d.style.strokeDashoffset=P==="reverse"?`${T[v]*h}`:`${T[v]*(1-h)}`,l&&(d.style.opacity=P==="reverse"?`${1-h}`:`${h}`),O&&S?d.style.stroke=Te(O,S,h):S&&(d.style.stroke=S),M!==null&&F!==null?d.style.strokeWidth=`${M+(F-M)*h}`:F!==null&&(d.style.strokeWidth=`${F}`),w!==null&&A!==null?d.style.fillOpacity=`${w+(A-w)*h}`:A!==null&&(d.style.fillOpacity=`${A}`),D&&d.tagName.toLowerCase()==="path"&&Q[v]&&d.setAttribute("d",_e(Q[v],D,h)),v===0&&(ce?.(h),e.style.setProperty("--scroll-draw-progress",String(h))),h<1&&(H=false);}),ie){let d=X(U(a,fe,me,y));for(let v in ie){let k=parseFloat(v);d>=k&&!de.has(k)&&(de.add(k),ie[v]?.());}}!Y&&U(a,fe,me,y)>0&&(Y=true,le?.()),H&&!N?(N=true,K?.(),ue<(_==="infinite"?1/0:_??0)&&(ue++,pe=setTimeout(()=>{ee=-1,Y=false,N=false,de.clear(),Oe();},B))):!H&&!re&&(N=false),C=requestAnimationFrame(Fe);}let qe=new IntersectionObserver(s=>{s.forEach(a=>{De=a.isIntersecting,De&&!R?C=requestAnimationFrame(Fe):cancelAnimationFrame(C);});},{root:f??null,threshold:ge,rootMargin:Z}),Ve;function Ne(){clearTimeout(Ve),Ve=setTimeout(()=>{I.forEach((s,a)=>{T[a]=Re(s),s.style.strokeDasharray=`${T[a]}`;}),Xe();},150);}return window.addEventListener("resize",Ne),window.addEventListener("orientationchange",Ne),W>0?setTimeout(()=>qe.observe(e),W):qe.observe(e),{destroy(){cancelAnimationFrame(C),clearTimeout(pe),qe.disconnect(),window.removeEventListener("resize",Ne),window.removeEventListener("orientationchange",Ne),clearTimeout(Ve),We?.remove();},replay(){ee=-1,Ie=-1,Ce=-1,Y=false,N=false,ue=0,R=false,de.clear(),clearTimeout(pe),Oe();},pause(){R=true,cancelAnimationFrame(C);},resume(){R&&(R=false,De&&(C=requestAnimationFrame(Fe)));},seek(s){let a=Math.min(1,Math.max(0,s));he=a,ee=a,R=true,cancelAnimationFrame(C),lt(a,E);},getProgress(){return he}}}var et=new Map;function tt(e,n){et.set(e,n);}function rt(e){et.delete(e);}function wt(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function nt(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 l=i.match(/^([-+]?[\d.eE]+)(.*)$/);o.push(l?parseFloat(l[1]):0),c.push(l?l[2]:"");}n.push({fn:t[1],nums:o,units:c});}return n}function Et(e,n,r){let t=nt(e),o=nt(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((l,g)=>`${l}${c.units[g]}`).join(", ")})`:`${i.fn}(${i.nums.map((l,g)=>`${l}${i.units[g]}`).join(", ")})`:`${c.fn}(${c.nums.map((l,g)=>`${l+(i.nums[g]-l)*r}${c.units[g]}`).join(", ")})`}).join(" ")}function st(e,n,r){if(typeof e=="number"&&typeof n=="number")return String(e+(n-e)*r);let t=String(e),o=String(n);if(wt(t))return Te(t,o,r);if(t.includes("("))return Et(t,o,r);let c=t.match(/^([-+]?[\d.]+)(.*)$/),m=o.match(/^([-+]?[\d.]+)(.*)$/);if(c&&m){let i=parseFloat(c[1]),l=parseFloat(m[1]);return `${i+(l-i)*r}${c[2]||m[2]}`}return r<1?t:o}function vt(e){return e.replace(/([A-Z])/g,n=>`-${n.toLowerCase()}`)}var ot={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},St=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),xt=0;function $t(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function He(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:l="y",scrollContainer:g,native:x=true,onProgress:V,onComplete:E}=n,re=window.matchMedia("(prefers-reduced-motion: reduce)").matches,Pe=typeof c=="function"?c:xe[c]??xe["ease-out"],z=$e(o.start??"top bottom"),Ee=$e(o.end??"bottom top"),L=typeof g=="string"?document.querySelector(g):g??null,W=Object.entries(t).map(([u,f])=>({prop:vt(u),from:Array.isArray(f)?f[0]:"",to:Array.isArray(f)?f[1]:f}));function ne(){let u=window.getComputedStyle(e);for(let f of W)f.from===""&&(f.from=u.getPropertyValue(f.prop).trim()||"0");}function se(){for(let u of W)e.style.setProperty(u.prop,String(u.to));}if(re)return se(),E?.(),r;ne();function oe(){if(!x||!$t()||typeof c!="string"||!(c in ot)||l!=="y"||L||i||m!==1||V||E||(o.start??"top bottom").trim()!=="top bottom"||(o.end??"bottom top").trim()!=="bottom top")return false;for(let u of W)if(!St.has(u.prop))return false;return true}function ie(){let u=`ssd-a-${++xt}`,f=W.map(w=>`${w.prop}:${w.from}`).join(";"),O=W.map(w=>`${w.prop}:${w.to}`).join(";"),S=document.createElement("style");S.setAttribute("data-ssd-animate",""),S.textContent=`@keyframes ${u}{from{${f}}to{${O}}}.${u}{animation-name:${u};animation-duration:auto;animation-timing-function:${ot[c]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(S),e.classList.add(u);let M=()=>l==="x"?window.scrollX:window.scrollY,F=()=>l==="x"?window.innerWidth:window.innerHeight;return {destroy(){e.classList.remove(u),S.remove();},replay(){e.classList.remove(u),e.offsetWidth,e.classList.add(u);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(w){let A=Math.min(1,Math.max(0,w));e.classList.remove(u);for(let q of W)e.style.setProperty(q.prop,st(q.from,q.to,A));},getProgress(){let w=e.getBoundingClientRect(),A=M(),q=F(),{tStart:I,tEnd:T}=Ae({top:w.top,height:w.height},A,q,z,Ee);return Pe(U(A,I,T,m))}}}if(oe())return ie();let ae=0,ge=0,Z=0,_=false,B=false,D=-1,J=0,ve=false,Me=()=>L?l==="x"?L.scrollLeft:L.scrollTop:l==="x"?window.scrollX:window.scrollY,ze=()=>L?l==="x"?L.clientWidth:L.clientHeight:l==="x"?window.innerWidth:window.innerHeight;function ce(){let u=e.getBoundingClientRect(),f,O;if(L){let M=L.getBoundingClientRect();f=l==="x"?u.left-M.left+L.scrollLeft:u.top-M.top+L.scrollTop,O=l==="x"?u.width:u.height;}else f=l==="x"?u.left:u.top,O=l==="x"?u.width:u.height;let S=Ae({top:f,height:O},Me(),ze(),z,Ee);ae=S.tStart,ge=S.tEnd;}function le(u){e.style.setProperty("--scroll-draw-progress",String(u));for(let f of W)e.style.setProperty(f.prop,st(f.from,f.to,u));V?.(u);}function K(){if(!_||B)return;let u=Pe(U(Me(),ae,ge,m));i&&(D=Math.max(D,u),u=D),J=u,le(u),u>=1&&!ve?(ve=true,E?.()):u<1&&!i&&(ve=false),Z=requestAnimationFrame(K);}ce();{let u=Pe(U(Me(),ae,ge,m));i&&u>0&&(D=u),J=u,le(u);}let j=new IntersectionObserver(u=>{u.forEach(f=>{_=f.isIntersecting,_&&!B?Z=requestAnimationFrame(K):cancelAnimationFrame(Z);});},{root:L??null}),X;function ye(){clearTimeout(X),X=setTimeout(ce,150);}return window.addEventListener("resize",ye),window.addEventListener("orientationchange",ye),j.observe(e),tt(e,{type:"animate",getProgress:()=>J,getTrigger:()=>({tStart:ae,tEnd:ge})}),{destroy(){cancelAnimationFrame(Z),j.disconnect(),window.removeEventListener("resize",ye),window.removeEventListener("orientationchange",ye),clearTimeout(X),rt(e);},replay(){D=-1,ve=false,J=0,B=false,le(0);},pause(){B=true,cancelAnimationFrame(Z);},resume(){B&&(B=false,_&&(Z=requestAnimationFrame(K)));},seek(u){let f=Math.min(1,Math.max(0,u));J=f,D=f,B=true,cancelAnimationFrame(Z),le(f);},getProgress(){return J}}}var it={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function at(e,n={}){if(typeof window>"u")return it;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),it;let{speed:t=.3,axis:o="y",easing:c="linear",trigger:m,onProgress:i}=n,l=r.getBoundingClientRect(),g=o==="x"?l.width:l.height,x=t*g;return He(r,{props:o==="x"?{transform:["translateX(0px)",`translateX(${-x}px)`]}:{transform:["translateY(0px)",`translateY(${-x}px)`]},trigger:m??{start:"top bottom",end:"bottom top"},easing:c,native:false,onProgress:i})}function Le(e){return e.map(n=>typeof n=="string"?document.querySelector(n):n).filter(n=>n!==null)}var we={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Nt(e,n={}){if(typeof window>"u")return we;let r=Le(e).map(t=>Ge(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}}}function Rt(e,n={}){if(typeof window>"u")return we;let r=Le(e);if(r.length===0)return we;let t=0,o=[];function c(i){return Ge(r[i],{...n,once:true,onComplete(){n.onComplete?.(),t=i+1,o[t]?.resume();}})}function m(){r.forEach((i,l)=>{o[l]=c(l);});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}}}function Ht(e,n){if(typeof window>"u")return we;let r=Le(e).map(t=>He(t,n));return {destroy(){r.forEach(t=>t.destroy());},replay(){r.forEach(t=>t.replay());},pause(){r.forEach(t=>t.pause());},resume(){r.forEach(t=>t.resume());},seek(t){r.forEach(o=>o.seek(t));},getProgress(){return r[0]?.getProgress()??0}}}function zt(e,n){if(typeof window>"u")return we;let r=Le(e);if(r.length===0)return we;let t=0,o=[];function c(i){return He(r[i],{...n,once:true,onComplete(){n.onComplete?.(),t=i+1,o[t]?.resume();}})}function m(){r.forEach((i,l)=>{o[l]=c(l);});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}}}function Wt(e,n={}){if(typeof window>"u")return we;let r=Le(e).map(t=>at(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}}}export{Ht as scrollAnimateGroup,zt as scrollAnimateSequence,Nt as scrollDrawGroup,Rt as scrollDrawSequence,Wt as scrollParallaxGroup};
|
|
1
|
+
function ht({bounces:e=3,decay:n=.5}={}){let r=Math.max(1,Math.round(e)),t=Math.max(.01,Math.min(.99,n)),s=Math.sqrt(t),f=0,p=[];for(let g=0;g<r;g++){let A=Math.pow(s,g);p.push(A),f+=A;}let a=[0],c=0;for(let g=0;g<r;g++)c+=p[g]/f,a.push(c);return g=>{if(g<=0)return 0;if(g>=1)return 1;for(let A=0;A<r;A++)if(g<=a[A+1]){let R=(g-a[A])/(a[A+1]-a[A]);if(A===0)return R*(2-R);let x=1-Math.pow(t,A);return x+(1-x)*(2*R-1)*(2*R-1)}return 1}}function bt({amplitude:e=1,period:n=.4}={}){let r=Math.max(1,e),t=Math.max(.1,n),s=r<=1?t/4:t/(2*Math.PI)*Math.asin(1/r);return f=>f<=0?0:f>=1?1:r*Math.pow(2,-10*f)*Math.sin((f-s)*(2*Math.PI)/t)+1}var Ae={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:ht(),elastic:bt()};function Te(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 Qe(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 et(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 Be(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 wt(e,n,r){return Math.min(r,Math.max(n,e))}function K(e,n,r,t){return r===n?0:wt((e-n)/(r-n)*t,0,1)}function Pe(e,n,r,t,s){let f=Qe(e.top,e.height,n,t.element)-et(t.viewport,r),p=Qe(e.top,e.height,n,s.element)-et(s.viewport,r);return {tStart:f,tEnd:p}}function tt(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 Me(e,n,r){let t=tt(e),s=tt(n);return !t||!s?e:`rgb(${Math.round(t[0]+(s[0]-t[0])*r)},${Math.round(t[1]+(s[1]-t[1])*r)},${Math.round(t[2]+(s[2]-t[2])*r)})`}var rt={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}};function nt(e,n){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,n);}var ot={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},vt=0;function Et(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function St(e){let n=e.getAttribute("stroke"),r=e.getAttribute("fill");!n||n==="none"?nt("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&nt("Element has a fill \u2014 it may obscure the stroke animation.",e);}function xt(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 s(){let f=r==="x"?window.scrollX:window.scrollY,p=e-f,a=n-f,c=r==="x";t.innerHTML=`
|
|
2
|
+
<div style="position:absolute;${c?`left:${p}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${p}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;${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};
|
|
@@ -0,0 +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;
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
|
|
2
|
+
interface TriggerConfig {
|
|
3
|
+
start?: string;
|
|
4
|
+
end?: string;
|
|
5
|
+
}
|
|
6
|
+
interface ScrollDrawInstance {
|
|
7
|
+
destroy: () => void;
|
|
8
|
+
/** Reset and replay the animation from the beginning. */
|
|
9
|
+
replay: () => void;
|
|
10
|
+
/** Pause the animation at the current progress. */
|
|
11
|
+
pause: () => void;
|
|
12
|
+
/** Resume a paused animation. */
|
|
13
|
+
resume: () => void;
|
|
14
|
+
/** Jump to a specific progress value (0–1) and pause. */
|
|
15
|
+
seek: (progress: number) => void;
|
|
16
|
+
/** Returns current draw progress (0–1). */
|
|
17
|
+
getProgress: () => number;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
interface ScrollHorizontalOptions {
|
|
21
|
+
/**
|
|
22
|
+
* Total horizontal travel distance in pixels.
|
|
23
|
+
* Default: `track.scrollWidth - window.innerWidth` (full content width minus viewport).
|
|
24
|
+
*/
|
|
25
|
+
distance?: number;
|
|
26
|
+
/**
|
|
27
|
+
* Trigger window for the scroll → horizontal mapping.
|
|
28
|
+
* Default: `{ start: 'top top', end: 'bottom bottom' }` — full container height.
|
|
29
|
+
*/
|
|
30
|
+
trigger?: TriggerConfig;
|
|
31
|
+
/** Easing for the horizontal movement. Default: `'linear'` (scrub feel). */
|
|
32
|
+
easing?: EasingName | ((t: number) => number);
|
|
33
|
+
/** Custom scroll container. Default: window. */
|
|
34
|
+
scrollContainer?: string | Element;
|
|
35
|
+
onProgress?: (progress: number) => void;
|
|
36
|
+
}
|
|
37
|
+
interface ScrollHorizontalInstance extends ScrollDrawInstance {
|
|
38
|
+
/** Recalculate travel distance after layout change. */
|
|
39
|
+
refresh: () => void;
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* Drive horizontal movement (translateX) from vertical scroll.
|
|
43
|
+
*
|
|
44
|
+
* The Apple / Stripe "scroll to reveal horizontal sections" pattern.
|
|
45
|
+
* You handle the sticky + overflow CSS; `scrollHorizontal` drives the translateX.
|
|
46
|
+
*
|
|
47
|
+
* Minimal CSS setup:
|
|
48
|
+
* .outer { height: 400vh; }
|
|
49
|
+
* .sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
|
|
50
|
+
* .track { display: flex; width: max-content; }
|
|
51
|
+
*
|
|
52
|
+
* @example
|
|
53
|
+
* scrollHorizontal('.track', {
|
|
54
|
+
* distance: 3 * window.innerWidth,
|
|
55
|
+
* trigger: { start: 'top top', end: 'bottom bottom' },
|
|
56
|
+
* easing: 'linear',
|
|
57
|
+
* });
|
|
58
|
+
*/
|
|
59
|
+
declare function scrollHorizontal(track: string | Element, options?: ScrollHorizontalOptions): ScrollHorizontalInstance;
|
|
60
|
+
|
|
61
|
+
export { type ScrollHorizontalInstance, type ScrollHorizontalOptions, scrollHorizontal };
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
|
|
2
|
+
interface TriggerConfig {
|
|
3
|
+
start?: string;
|
|
4
|
+
end?: string;
|
|
5
|
+
}
|
|
6
|
+
interface ScrollDrawInstance {
|
|
7
|
+
destroy: () => void;
|
|
8
|
+
/** Reset and replay the animation from the beginning. */
|
|
9
|
+
replay: () => void;
|
|
10
|
+
/** Pause the animation at the current progress. */
|
|
11
|
+
pause: () => void;
|
|
12
|
+
/** Resume a paused animation. */
|
|
13
|
+
resume: () => void;
|
|
14
|
+
/** Jump to a specific progress value (0–1) and pause. */
|
|
15
|
+
seek: (progress: number) => void;
|
|
16
|
+
/** Returns current draw progress (0–1). */
|
|
17
|
+
getProgress: () => number;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
interface ScrollHorizontalOptions {
|
|
21
|
+
/**
|
|
22
|
+
* Total horizontal travel distance in pixels.
|
|
23
|
+
* Default: `track.scrollWidth - window.innerWidth` (full content width minus viewport).
|
|
24
|
+
*/
|
|
25
|
+
distance?: number;
|
|
26
|
+
/**
|
|
27
|
+
* Trigger window for the scroll → horizontal mapping.
|
|
28
|
+
* Default: `{ start: 'top top', end: 'bottom bottom' }` — full container height.
|
|
29
|
+
*/
|
|
30
|
+
trigger?: TriggerConfig;
|
|
31
|
+
/** Easing for the horizontal movement. Default: `'linear'` (scrub feel). */
|
|
32
|
+
easing?: EasingName | ((t: number) => number);
|
|
33
|
+
/** Custom scroll container. Default: window. */
|
|
34
|
+
scrollContainer?: string | Element;
|
|
35
|
+
onProgress?: (progress: number) => void;
|
|
36
|
+
}
|
|
37
|
+
interface ScrollHorizontalInstance extends ScrollDrawInstance {
|
|
38
|
+
/** Recalculate travel distance after layout change. */
|
|
39
|
+
refresh: () => void;
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* Drive horizontal movement (translateX) from vertical scroll.
|
|
43
|
+
*
|
|
44
|
+
* The Apple / Stripe "scroll to reveal horizontal sections" pattern.
|
|
45
|
+
* You handle the sticky + overflow CSS; `scrollHorizontal` drives the translateX.
|
|
46
|
+
*
|
|
47
|
+
* Minimal CSS setup:
|
|
48
|
+
* .outer { height: 400vh; }
|
|
49
|
+
* .sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
|
|
50
|
+
* .track { display: flex; width: max-content; }
|
|
51
|
+
*
|
|
52
|
+
* @example
|
|
53
|
+
* scrollHorizontal('.track', {
|
|
54
|
+
* distance: 3 * window.innerWidth,
|
|
55
|
+
* trigger: { start: 'top top', end: 'bottom bottom' },
|
|
56
|
+
* easing: 'linear',
|
|
57
|
+
* });
|
|
58
|
+
*/
|
|
59
|
+
declare function scrollHorizontal(track: string | Element, options?: ScrollHorizontalOptions): ScrollHorizontalInstance;
|
|
60
|
+
|
|
61
|
+
export { type ScrollHorizontalInstance, type ScrollHorizontalOptions, scrollHorizontal };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
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));}}}export{He as scrollHorizontal};
|
package/dist/index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
'use strict';function
|
|
2
|
-
<div style="position:absolute;${
|
|
3
|
-
<div style="position:absolute;${a?`left:${m}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${m}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(n),window.addEventListener("scroll",u,{passive:true}),u(),n}function Ge(e,t,r){let n=(t.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),u=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,i=>{let d=parseFloat(i),m=n[u++]??d;return String(+(d+(m-d)*r).toFixed(4))})}function st(e,t={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:r,...n}=t,u=r?{...Be[r],...n}:n,i=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:d="path, polyline, line, polygon, rect, circle",speed:m=1,fade:a=false,easing:f="linear",trigger:T={},stagger:F=0,direction:E="forward",once:X=false,debug:ce=false,axis:A="y",scrollContainer:$,autoReverse:c=false,delay:h=0,strokeColor:b,strokeWidth:N,fillOpacity:z,waypoints:_,velocityScale:B=false,threshold:oe=0,rootMargin:U="0px",repeat:Z=0,repeatDelay:J=0,morphTo:k,clip:K,autoplay:de=false,duration:ge=1e3,native:be=true,onProgress:g,onStart:R,onComplete:ue}=u,ie=K===true?"left":typeof K=="string"?K:false,ae=typeof f=="function"?f:te[f]??te.linear,Ae=he(T.start??"top bottom"),l=he(T.end??"bottom top"),p=typeof $=="string"?document.querySelector($):$??null,G=Array.isArray(b)?b[0]:null,C=Array.isArray(b)?b[1]:typeof b=="string"?b:null,H=Array.isArray(N)?N[0]:null,j=Array.isArray(N)?N[1]:typeof N=="number"?N:null,M=Array.isArray(z)?z[0]:null,I=Array.isArray(z)?z[1]:typeof z=="number"?z:null;function ne(o){let s=o*100;switch(ie){case "right":return `inset(0 0 0 ${100-s}%)`;case "top":return `inset(0 0 ${100-s}% 0)`;case "bottom":return `inset(${100-s}% 0 0 0)`;case "center":return `circle(${o*150}% at 50% 50%)`;default:return `inset(0 ${100-s}% 0 0)`}}let V=ie?[]:Array.from(e.querySelectorAll(d)),D=[],me=[],we=0,ve=0,Y=false,le=false,W=0,Ce=false,fe=-1,Le=-1,Q=false,Te=0,ye=0,Ee,Ve=null,Se=new Set,Ie=-1,Ue=performance.now();function ke(){return p?A==="x"?p.scrollLeft:p.scrollTop:A==="x"?window.scrollX:window.scrollY}function Ze(){return p?A==="x"?p.clientWidth:p.clientHeight:A==="x"?window.innerWidth:window.innerHeight}function Je(){let o=e.getBoundingClientRect(),s,v,O;if(p){let ee=p.getBoundingClientRect();s=A==="x"?o.left-ee.left+p.scrollLeft:o.top-ee.top+p.scrollTop,v=A==="x"?o.width:o.height,O=ke();}else s=A==="x"?o.left:o.top,v=A==="x"?o.width:o.height,O=ke();let se=xe({top:s,height:v},O,Ze(),Ae,l);we=se.tStart,ve=se.tEnd,ce&&process.env.NODE_ENV!=="production"&&(Ve?.remove(),Ve=Et(we,ve,A));}function ft(o,s){if(e.style.setProperty("--scroll-draw-progress",String(o)),ie){let v=s==="reverse"?1-o:o;e.style.clipPath=ne(v);return}V.forEach((v,O)=>{v.style.strokeDashoffset=s==="reverse"?`${D[O]*o}`:`${D[O]*(1-o)}`,a&&(v.style.opacity=s==="reverse"?`${1-o}`:`${o}`),G&&C?v.style.stroke=Pe(G,C,o):C&&(v.style.stroke=C),H!==null&&j!==null?v.style.strokeWidth=`${H+(j-H)*o}`:j!==null&&(v.style.strokeWidth=`${j}`),M!==null&&I!==null?v.style.fillOpacity=`${M+(I-M)*o}`:I!==null&&(v.style.fillOpacity=`${I}`),k&&v.tagName.toLowerCase()==="path"&&me[O]&&v.setAttribute("d",Ge(me[O],k,o));});}function De(){if(e.style.setProperty("--scroll-draw-progress","0"),ie){e.style.clipPath=ne(0);return}V.forEach((o,s)=>{o.style.strokeDasharray=`${D[s]}`,o.style.strokeDashoffset=E==="reverse"?"0":`${D[s]}`,a?o.style.opacity=E==="reverse"?"1":"0":o.style.opacity="",G&&(o.style.stroke=G),H!==null&&(o.style.strokeWidth=`${H}`),M!==null&&(o.style.fillOpacity=`${M}`),k&&o.tagName.toLowerCase()==="path"&&me[s]&&o.setAttribute("d",me[s]);});}if(V.forEach(o=>{vt(o);let s=Ne(o);D.push(s),o.tagName.toLowerCase()==="path"?me.push(o.getAttribute("d")??""):me.push(""),i?(o.style.strokeDasharray=`${s}`,o.style.strokeDashoffset=E==="reverse"?`${s}`:"0",a&&(o.style.opacity="1"),C&&(o.style.stroke=C),j!==null&&(o.style.strokeWidth=`${j}`),I!==null&&(o.style.fillOpacity=`${I}`),k&&o.tagName.toLowerCase()==="path"&&o.setAttribute("d",k)):(o.style.strokeDasharray=`${s}`,o.style.strokeDashoffset=E==="reverse"?"0":`${s}`,a?o.style.opacity=E==="reverse"?"1":"0":o.style.opacity="",G&&(o.style.stroke=G),H!==null&&(o.style.strokeWidth=`${H}`),M!==null&&(o.style.fillOpacity=`${M}`));}),ie){if(i)return e.style.clipPath=ne(1),ue?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=ne(0);}else if(i)return ue?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function pt(){return !(be===false||!wt()||!V.length||typeof f!="string"||!(f in ot)||ie||A!=="y"||p||m!==1||F!==0||X||c||B!==false||k||_||Z||h>0||g||R||ue||b!=null||N!=null||z!=null||(T.start??"top bottom").trim()!=="top bottom"||(T.end??"bottom top").trim()!=="bottom top")}function dt(){let o=`svg-scroll-draw-${++bt}`,s=E==="reverse"?"0":"var(--ssd-len)",v=E==="reverse"?"var(--ssd-len)":"0",O=`stroke-dashoffset:${s};`,se=`stroke-dashoffset:${v};`;a&&(O+=`opacity:${E==="reverse"?1:0};`,se+=`opacity:${E==="reverse"?0:1};`);let ee=document.createElement("style");ee.setAttribute("data-svg-scroll-draw",""),ee.textContent=`@keyframes ${o}{from{${O}}to{${se}}}.${o}{animation-name:${o};animation-duration:auto;animation-timing-function:${ot[f]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(ee);function w(y,x){y.style.setProperty("--ssd-len",String(D[x])),y.style.strokeDasharray=`${D[x]}`,y.style.strokeDashoffset="",y.style.opacity="",y.style.animationPlayState="",y.classList.add(o);}V.forEach(w);let P=false,q=-1;function S(){if(q>=0)return q;let y=e.getBoundingClientRect(),{tStart:x,tEnd:L}=xe({top:y.top,height:y.height},ke(),Ze(),Ae,l);return ae(re(ke(),x,L,m))}return {destroy(){V.forEach(y=>{y.classList.remove(o),y.style.removeProperty("--ssd-len"),y.style.animationPlayState="";}),ee.remove();},replay(){P=false,q=-1,V.forEach(w);},pause(){P=true,V.forEach(y=>{y.style.animationPlayState="paused";});},resume(){P&&(P=false,V.forEach(y=>{y.style.animationPlayState="running";}));},seek(y){let x=Math.min(1,Math.max(0,y));q=x,P=true,V.forEach((L,$e)=>{L.classList.remove(o),L.style.strokeDashoffset=E==="reverse"?`${D[$e]*x}`:`${D[$e]*(1-x)}`,a&&(L.style.opacity=E==="reverse"?`${1-x}`:`${x}`);});},getProgress(){return S()}}}if(pt())return dt();function gt(){let o=Math.max(1,ge),s=0,v=0;function O(S){let y=true;if(ie){let x=Math.min(1,Math.max(0,S/o)),L=ae(x);Te=L,e.style.setProperty("--scroll-draw-progress",String(L)),e.style.clipPath=ne(E==="reverse"?1-L:L),g?.(L),x<1&&(y=false);}else V.forEach((x,L)=>{let $e=L*F*o,Me=Math.min(1,Math.max(0,(S-$e)/o)),pe=ae(Me);x.style.strokeDashoffset=E==="reverse"?`${D[L]*pe}`:`${D[L]*(1-pe)}`,a&&(x.style.opacity=E==="reverse"?`${1-pe}`:`${pe}`),G&&C?x.style.stroke=Pe(G,C,pe):C&&(x.style.stroke=C),H!==null&&j!==null?x.style.strokeWidth=`${H+(j-H)*pe}`:j!==null&&(x.style.strokeWidth=`${j}`),M!==null&&I!==null?x.style.fillOpacity=`${M+(I-M)*pe}`:I!==null&&(x.style.fillOpacity=`${I}`),k&&x.tagName.toLowerCase()==="path"&&me[L]&&x.setAttribute("d",Ge(me[L],k,pe)),L===0&&(g?.(pe),e.style.setProperty("--scroll-draw-progress",String(pe))),Me<1&&(y=false);});if(_){let x=Math.min(1,Math.max(0,S/o)),L=ae(x);for(let $e in _){let Me=parseFloat($e);L>=Me&&!Se.has(Me)&&(Se.add(Me),_[$e]?.());}}return y}function se(S){if(Q)return;let y=S-s;le||(le=true,R?.());let x=O(y);if(x&&!Y){Y=true,O(o*(1+Math.max(0,V.length-1)*F)),ue?.(),ye<(Z==="infinite"?1/0:Z??0)&&(ye++,Ee=setTimeout(()=>{s=performance.now(),le=false,Y=false,Se.clear(),De(),W=requestAnimationFrame(se);},J));return}x||(W=requestAnimationFrame(se));}function ee(){cancelAnimationFrame(W),clearTimeout(Ee),s=performance.now(),v=0,Q=false,le=false,Y=false,ye=0,Se.clear(),De(),W=requestAnimationFrame(se);}let w=new IntersectionObserver(S=>{S.forEach(y=>{y.isIntersecting&&!(X&&Y)?ee():!y.isIntersecting&&!X&&!Y&&(cancelAnimationFrame(W),clearTimeout(Ee),s=null);});},{root:p??null,threshold:oe,rootMargin:U}),P;function q(){clearTimeout(P),P=setTimeout(()=>{V.forEach((S,y)=>{D[y]=Ne(S),S.style.strokeDasharray=`${D[y]}`;});},150);}return window.addEventListener("resize",q),window.addEventListener("orientationchange",q),h>0?setTimeout(()=>w.observe(e),h):w.observe(e),{destroy(){cancelAnimationFrame(W),clearTimeout(Ee),w.disconnect(),window.removeEventListener("resize",q),window.removeEventListener("orientationchange",q),clearTimeout(P);},replay(){ye=0,ee();},pause(){Q||(Q=true,v=performance.now()-s,cancelAnimationFrame(W));},resume(){Q&&(Q=false,s=performance.now()-v,W=requestAnimationFrame(se));},seek(S){let y=Math.min(1,Math.max(0,S));Te=y,Q=true,v=y*o,s=performance.now()-v,cancelAnimationFrame(W),O(v);},getProgress(){return Te}}}if(de)return gt();Je();function Oe(){if(!Ce||Q)return;let o=performance.now(),s=ke(),v=m;if(B!==false){let w=o-Ue,P=w>0?Math.abs(s-(Ie<0?s:Ie))/w:0;v=m*Math.max(.2,1+P*(typeof B=="number"?B:1)*.04);}Ie=s,Ue=o;let O=c?Le===-1||s>=Le?"forward":"reverse":E;Le=s;let se=ve-we,ee=true;if(ie){let w=ae(re(s,we,ve,v));X&&!c&&(fe=Math.max(fe,w),w=fe),Te=w,e.style.setProperty("--scroll-draw-progress",String(w));let P=O==="reverse"?1-w:w;e.style.clipPath=ne(P),g?.(w),!le&&re(s,we,ve,v)>0&&(le=true,R?.()),w>=1&&!Y?(Y=true,ue?.(),ye<(Z==="infinite"?1/0:Z??0)&&(ye++,Ee=setTimeout(()=>{fe=-1,le=false,Y=false,e.style.clipPath=ne(0);},J))):w<1&&!X&&(Y=false),W=requestAnimationFrame(Oe);return}if(V.forEach((w,P)=>{let q=P*F*se,S=ae(re(s,we+q,ve+q,v));X&&!c&&(fe=Math.max(fe,S),S=fe),Te=S,w.style.strokeDashoffset=O==="reverse"?`${D[P]*S}`:`${D[P]*(1-S)}`,a&&(w.style.opacity=O==="reverse"?`${1-S}`:`${S}`),G&&C?w.style.stroke=Pe(G,C,S):C&&(w.style.stroke=C),H!==null&&j!==null?w.style.strokeWidth=`${H+(j-H)*S}`:j!==null&&(w.style.strokeWidth=`${j}`),M!==null&&I!==null?w.style.fillOpacity=`${M+(I-M)*S}`:I!==null&&(w.style.fillOpacity=`${I}`),k&&w.tagName.toLowerCase()==="path"&&me[P]&&w.setAttribute("d",Ge(me[P],k,S)),P===0&&(g?.(S),e.style.setProperty("--scroll-draw-progress",String(S))),S<1&&(ee=false);}),_){let w=ae(re(s,we,ve,v));for(let P in _){let q=parseFloat(P);w>=q&&!Se.has(q)&&(Se.add(q),_[P]?.());}}!le&&re(s,we,ve,v)>0&&(le=true,R?.()),ee&&!Y?(Y=true,ue?.(),ye<(Z==="infinite"?1/0:Z??0)&&(ye++,Ee=setTimeout(()=>{fe=-1,le=false,Y=false,Se.clear(),De();},J))):!ee&&!X&&(Y=false),W=requestAnimationFrame(Oe);}let We=new IntersectionObserver(o=>{o.forEach(s=>{Ce=s.isIntersecting,Ce&&!Q?W=requestAnimationFrame(Oe):cancelAnimationFrame(W);});},{root:p??null,threshold:oe,rootMargin:U}),_e;function Fe(){clearTimeout(_e),_e=setTimeout(()=>{V.forEach((o,s)=>{D[s]=Ne(o),o.style.strokeDasharray=`${D[s]}`;}),Je();},150);}return window.addEventListener("resize",Fe),window.addEventListener("orientationchange",Fe),h>0?setTimeout(()=>We.observe(e),h):We.observe(e),{destroy(){cancelAnimationFrame(W),clearTimeout(Ee),We.disconnect(),window.removeEventListener("resize",Fe),window.removeEventListener("orientationchange",Fe),clearTimeout(_e),Ve?.remove();},replay(){fe=-1,Le=-1,Ie=-1,le=false,Y=false,ye=0,Q=false,Se.clear(),clearTimeout(Ee),De();},pause(){Q=true,cancelAnimationFrame(W);},resume(){Q&&(Q=false,Ce&&(W=requestAnimationFrame(Oe)));},seek(o){let s=Math.min(1,Math.max(0,o));Te=s,fe=s,Q=true,cancelAnimationFrame(W),ft(s,E);},getProgress(){return Te}}}var it=new Map;function Re(e,t){it.set(e,t);}function He(e){it.delete(e);}function St(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function at(e){let t=[],r=/([\w]+)\(([^)]*)\)/g,n;for(;(n=r.exec(e))!==null;){let u=[],i=[],d=n[2].trim();if(d)for(let m of d.split(/[\s,]+/)){let a=m.match(/^([-+]?[\d.eE]+)(.*)$/);u.push(a?parseFloat(a[1]):0),i.push(a?a[2]:"");}t.push({fn:n[1],nums:u,units:i});}return t}function xt(e,t,r){let n=at(e),u=at(t);return n.length===0||n.length!==u.length?r<1?e:t:n.map((i,d)=>{let m=u[d];return i.fn!==m.fn||i.nums.length!==m.nums.length?r<1?`${i.fn}(${i.nums.map((a,f)=>`${a}${i.units[f]}`).join(", ")})`:`${m.fn}(${m.nums.map((a,f)=>`${a}${m.units[f]}`).join(", ")})`:`${i.fn}(${i.nums.map((a,f)=>`${a+(m.nums[f]-a)*r}${i.units[f]}`).join(", ")})`}).join(" ")}function lt(e,t,r){if(typeof e=="number"&&typeof t=="number")return String(e+(t-e)*r);let n=String(e),u=String(t);if(St(n))return Pe(n,u,r);if(n.includes("("))return xt(n,u,r);let i=n.match(/^([-+]?[\d.]+)(.*)$/),d=u.match(/^([-+]?[\d.]+)(.*)$/);if(i&&d){let m=parseFloat(i[1]),a=parseFloat(d[1]);return `${m+(a-m)*r}${i[2]||d[2]}`}return r<1?n:u}function At(e){return e.replace(/([A-Z])/g,t=>`-${t.toLowerCase()}`)}var ct={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},Tt=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),$t=0;function Mt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function ut(e,t){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let{props:n,trigger:u={},easing:i="ease-out",speed:d=1,once:m=false,axis:a="y",scrollContainer:f,native:T=true,onProgress:F,onComplete:E}=t,X=window.matchMedia("(prefers-reduced-motion: reduce)").matches,ce=typeof i=="function"?i:te[i]??te["ease-out"],A=he(u.start??"top bottom"),$=he(u.end??"bottom top"),c=typeof f=="string"?document.querySelector(f):f??null,h=Object.entries(n).map(([l,p])=>({prop:At(l),from:Array.isArray(p)?p[0]:"",to:Array.isArray(p)?p[1]:p}));function b(){let l=window.getComputedStyle(e);for(let p of h)p.from===""&&(p.from=l.getPropertyValue(p.prop).trim()||"0");}function N(){for(let l of h)e.style.setProperty(l.prop,String(l.to));}if(X)return N(),E?.(),r;b();function z(){if(!T||!Mt()||typeof i!="string"||!(i in ct)||a!=="y"||c||m||d!==1||F||E||(u.start??"top bottom").trim()!=="top bottom"||(u.end??"bottom top").trim()!=="bottom top")return false;for(let l of h)if(!Tt.has(l.prop))return false;return true}function _(){let l=`ssd-a-${++$t}`,p=h.map(M=>`${M.prop}:${M.from}`).join(";"),G=h.map(M=>`${M.prop}:${M.to}`).join(";"),C=document.createElement("style");C.setAttribute("data-ssd-animate",""),C.textContent=`@keyframes ${l}{from{${p}}to{${G}}}.${l}{animation-name:${l};animation-duration:auto;animation-timing-function:${ct[i]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(C),e.classList.add(l);let H=()=>a==="x"?window.scrollX:window.scrollY,j=()=>a==="x"?window.innerWidth:window.innerHeight;return {destroy(){e.classList.remove(l),C.remove();},replay(){e.classList.remove(l),e.offsetWidth,e.classList.add(l);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(M){let I=Math.min(1,Math.max(0,M));e.classList.remove(l);for(let ne of h)e.style.setProperty(ne.prop,lt(ne.from,ne.to,I));},getProgress(){let M=e.getBoundingClientRect(),I=H(),ne=j(),{tStart:V,tEnd:D}=xe({top:M.top,height:M.height},I,ne,A,$);return ce(re(I,V,D,d))}}}if(z())return _();let B=0,oe=0,U=0,Z=false,J=false,k=-1,K=0,de=false,ge=()=>c?a==="x"?c.scrollLeft:c.scrollTop:a==="x"?window.scrollX:window.scrollY,be=()=>c?a==="x"?c.clientWidth:c.clientHeight:a==="x"?window.innerWidth:window.innerHeight;function g(){let l=e.getBoundingClientRect(),p,G;if(c){let H=c.getBoundingClientRect();p=a==="x"?l.left-H.left+c.scrollLeft:l.top-H.top+c.scrollTop,G=a==="x"?l.width:l.height;}else p=a==="x"?l.left:l.top,G=a==="x"?l.width:l.height;let C=xe({top:p,height:G},ge(),be(),A,$);B=C.tStart,oe=C.tEnd;}function R(l){e.style.setProperty("--scroll-draw-progress",String(l));for(let p of h)e.style.setProperty(p.prop,lt(p.from,p.to,l));F?.(l);}function ue(){if(!Z||J)return;let l=ce(re(ge(),B,oe,d));m&&(k=Math.max(k,l),l=k),K=l,R(l),l>=1&&!de?(de=true,E?.()):l<1&&!m&&(de=false),U=requestAnimationFrame(ue);}g();{let l=ce(re(ge(),B,oe,d));m&&l>0&&(k=l),K=l,R(l);}let ie=new IntersectionObserver(l=>{l.forEach(p=>{Z=p.isIntersecting,Z&&!J?U=requestAnimationFrame(ue):cancelAnimationFrame(U);});},{root:c??null}),ae;function Ae(){clearTimeout(ae),ae=setTimeout(g,150);}return window.addEventListener("resize",Ae),window.addEventListener("orientationchange",Ae),ie.observe(e),Re(e,{type:"animate",getProgress:()=>K,getTrigger:()=>({tStart:B,tEnd:oe})}),{destroy(){cancelAnimationFrame(U),ie.disconnect(),window.removeEventListener("resize",Ae),window.removeEventListener("orientationchange",Ae),clearTimeout(ae),He(e);},replay(){k=-1,de=false,K=0,J=false,R(0);},pause(){J=true,cancelAnimationFrame(U);},resume(){J&&(J=false,Z&&(U=requestAnimationFrame(ue)));},seek(l){let p=Math.min(1,Math.max(0,l));K=p,k=p,J=true,cancelAnimationFrame(U),R(p);},getProgress(){return K}}}var qe={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Pt(e,t){if(typeof window>"u")return qe;let r=typeof e=="string"?document.querySelector(e):e;return r?ut(r,t):(process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] scrollAnimate: element not found:",e),qe)}function kt(e,t={}){if(typeof window>"u")return qe;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),qe;let{speed:n=.3,axis:u="y",easing:i="linear",trigger:d,onProgress:m}=t,a=r.getBoundingClientRect(),f=u==="x"?a.width:a.height,T=n*f;return ut(r,{props:u==="x"?{transform:["translateX(0px)",`translateX(${-T}px)`]}:{transform:["translateY(0px)",`translateY(${-T}px)`]},trigger:d??{start:"top bottom",end:"bottom top"},easing:i,native:false,onProgress:m})}var je={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Ct(e,t){if(typeof window>"u")return je;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] scrollCounter: element not found:",e),je;let n=r,{from:u=0,to:i,format:d,easing:m="ease-out",trigger:a={},once:f=true,decimals:T,onComplete:F}=t,E=T!==void 0?g=>g.toFixed(T):d??(g=>String(Math.round(g))),X=typeof m=="function"?m:te[m]??te["ease-out"],ce=he(a.start??"top 80%"),A=he(a.end??"top 20%");if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return n.textContent=E(i),F?.(),je;n.textContent=E(u);let c=0,h=0,b=0,N=false,z=false,_=-1,B=0,oe=false,U=()=>window.scrollY,Z=()=>window.innerHeight;function J(){let g=n.getBoundingClientRect(),R=xe({top:g.top,height:g.height},U(),Z(),ce,A);c=R.tStart,h=R.tEnd;}function k(g){n.textContent=E(u+(i-u)*g),n.style.setProperty("--scroll-draw-progress",String(g));}function K(){if(!N||z)return;let g=X(re(U(),c,h,1));f&&(_=Math.max(_,g),g=_),B=g,k(g),g>=1&&!oe?(oe=true,F?.()):g<1&&!f&&(oe=false),b=requestAnimationFrame(K);}J();{let g=X(re(U(),c,h,1));f&&g>0&&(_=g),B=g,k(g);}let de=new IntersectionObserver(g=>{g.forEach(R=>{N=R.isIntersecting,N&&!z?b=requestAnimationFrame(K):cancelAnimationFrame(b);});}),ge;function be(){clearTimeout(ge),ge=setTimeout(J,150);}return window.addEventListener("resize",be),window.addEventListener("orientationchange",be),de.observe(n),Re(n,{type:"counter",getProgress:()=>B,getTrigger:()=>({tStart:c,tEnd:h})}),{destroy(){cancelAnimationFrame(b),de.disconnect(),window.removeEventListener("resize",be),window.removeEventListener("orientationchange",be),clearTimeout(ge),He(n);},replay(){_=-1,oe=false,B=0,z=false,k(0);},pause(){z=true,cancelAnimationFrame(b);},resume(){z&&(z=false,N&&(b=requestAnimationFrame(K)));},seek(g){let R=Math.min(1,Math.max(0,g));B=R,_=R,z=true,cancelAnimationFrame(b),k(R);},getProgress(){return B}}}var mt="http://www.w3.org/2000/svg",Lt="cinematic-photo",Xe=e=>e<0?0:e>1?1:e;function ze(e){let t=parseFloat(e);return Number.isFinite(t)?Xe(t/100):0}function It(e){return te[e]??te.linear}var Dt={destroy:()=>{},getProgress:()=>0},Ye=class{constructor(t){if(typeof document>"u"){this.mount=null;return}this.mount=typeof t.wrapper=="string"?document.querySelector(t.wrapper):t.wrapper,!this.mount&&process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] Cinematic: wrapper not found:",t.wrapper);}loadStory(t){let r=this.mount;if(typeof window>"u"||!r)return Dt;r.style.position="relative",r.style.height=t.totalHeight,r.style.display="block";let n=document.createElement("div");n.setAttribute("data-cinematic-stage",""),n.style.cssText="position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:block;",r.appendChild(n);let u=[];for(let A of t.scenes){if(A.background){let c=document.createElement("img");c.id=Lt,c.src=A.background,c.alt="",c.style.cssText="position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;",n.appendChild(c);}let $=A.animations.filter(c=>c.type==="draw");if($.length){let c=document.createElementNS(mt,"svg");c.setAttribute("viewBox",`0 0 ${t.canvas.width} ${t.canvas.height}`),c.setAttribute("preserveAspectRatio","xMidYMid meet"),c.style.cssText="position:absolute;inset:0;width:100%;height:100%;overflow:visible;",n.appendChild(c);for(let h of $){let b=document.createElementNS(mt,"path");b.id=h.target.replace(/^#/,""),b.setAttribute("d",h.d),b.setAttribute("fill","none"),b.setAttribute("stroke",h.stroke),b.setAttribute("stroke-width",String(h.strokeWidth)),b.setAttribute("stroke-linecap","round"),b.setAttribute("stroke-linejoin","round");let N=h.length||b.getTotalLength?.()||0;b.style.strokeDasharray=String(N),b.style.strokeDashoffset=String(N),c.appendChild(b),u.push({kind:"draw",el:b,start:ze(h.start),end:ze(h.end),ease:It(h.easing),length:N});}}for(let c of A.animations){if(c.type!=="fade")continue;let h=n.querySelector(c.target)??document.querySelector(c.target);h&&(h.style.opacity=String(c.from),u.push({kind:"fade",el:h,start:ze(c.start),end:ze(c.end),ease:te["ease-in-out"]??te.linear,from:c.from,to:c.to}));}}let i=0,d=()=>{let A=r.offsetHeight-window.innerHeight;return A<=0?r.getBoundingClientRect().top<=0?1:0:Xe(-r.getBoundingClientRect().top/A)},m=A=>{for(let $ of u){let c=$.end-$.start,h=c<=0?A>=$.end?1:0:Xe((A-$.start)/c),b=$.ease(h);$.kind==="draw"?$.el.style.strokeDashoffset=String($.length*(1-b)):$.el.style.opacity=String($.from+($.to-$.from)*b);}};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return m(1),{destroy:()=>{},getProgress:()=>1};let a=0,f=false,T=false,F=()=>{i=d(),m(i),f&&(a=requestAnimationFrame(F));},E=()=>{f||(f=true,a=requestAnimationFrame(F));},X=()=>{f=false,cancelAnimationFrame(a);},ce=new IntersectionObserver(A=>{for(let $ of A)T=$.isIntersecting,T?E():X();},{threshold:0});return ce.observe(n),i=d(),m(i),{destroy(){X(),ce.disconnect();},getProgress:()=>i}}};function Ut(e,t){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let n=typeof e=="string"?document.querySelector(e):e;return n?st(n,t):(console.warn("[svg-scroll-draw] Container not found:",e),r)}
|
|
4
|
-
exports.Cinematic=
|
|
1
|
+
'use strict';function Et({tension:e=2.5,friction:t=2.2}={}){return r=>1-Math.cos(r*Math.PI*e)*Math.pow(1-r,t)}function it({bounces:e=3,decay:t=.5}={}){let r=Math.max(1,Math.round(e)),n=Math.max(.01,Math.min(.99,t)),u=Math.sqrt(n),a=0,h=[];for(let p=0;p<r;p++){let x=Math.pow(u,p);h.push(x),a+=x;}let f=[0],l=0;for(let p=0;p<r;p++)l+=h[p]/a,f.push(l);return p=>{if(p<=0)return 0;if(p>=1)return 1;for(let x=0;x<r;x++)if(p<=f[x+1]){let F=(p-f[x])/(f[x+1]-f[x]);if(x===0)return F*(2-F);let E=1-Math.pow(n,x);return E+(1-E)*(2*F-1)*(2*F-1)}return 1}}function at({amplitude:e=1,period:t=.4}={}){let r=Math.max(1,e),n=Math.max(.1,t),u=r<=1?n/4:n/(2*Math.PI)*Math.asin(1/r);return a=>a<=0?0:a>=1?1:r*Math.pow(2,-10*a)*Math.sin((a-u)*(2*Math.PI)/n)+1}var te={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:it(),elastic:at()};function be(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 nt(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 ot(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 Ve(e){let t=e.tagName.toLowerCase();if(t==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),n=parseFloat(e.getAttribute("height")??"0");return 2*(r+n)}if(t==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function St(e,t,r){return Math.min(r,Math.max(t,e))}function re(e,t,r,n){return r===t?0:St((e-t)/(r-t)*n,0,1)}function xe(e,t,r,n,u){let a=nt(e.top,e.height,t,n.element)-ot(n.viewport,r),h=nt(e.top,e.height,t,u.element)-ot(u.viewport,r);return {tStart:a,tEnd:h}}function st(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 Le(e,t,r){let n=st(e),u=st(t);return !n||!u?e:`rgb(${Math.round(n[0]+(u[0]-n[0])*r)},${Math.round(n[1]+(u[1]-n[1])*r)},${Math.round(n[2]+(u[2]-n[2])*r)})`}var Ue={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}};function lt(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}var ct={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},xt=0;function At(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function Tt(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?lt("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&<("Element has a fill \u2014 it may obscure the stroke animation.",e);}function $t(e,t,r){let n=document.createElement("div");n.setAttribute("data-svg-scroll-draw-debug",""),n.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function u(){let a=r==="x"?window.scrollX:window.scrollY,h=e-a,f=t-a,l=r==="x";n.innerHTML=`
|
|
2
|
+
<div style="position:absolute;${l?`left:${h}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${h}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;${l?`left:${f}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${f}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(n),window.addEventListener("scroll",u,{passive:true}),u(),n}function Ze(e,t,r){let n=(t.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),u=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,a=>{let h=parseFloat(a),f=n[u++]??h;return String(+(h+(f-h)*r).toFixed(4))})}function ut(e,t={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:r,...n}=t,u=r?{...Ue[r],...n}:n,a=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:h="path, polyline, line, polygon, rect, circle",speed:f=1,fade:l=false,easing:p="linear",trigger:x={},stagger:F=0,direction:E="forward",once:W=false,debug:ge=false,axis:S="y",scrollContainer:M,autoReverse:d=false,delay:A=0,strokeColor:b,strokeWidth:R,fillOpacity:z,waypoints:T,velocityScale:H=false,threshold:ye=0,rootMargin:we="0px",repeat:ae=0,repeatDelay:ve=0,morphTo:P,clip:U,autoplay:se=false,duration:ce=1e3,native:Z=true,onProgress:g,onStart:N,onComplete:le,onEnter:ue,onLeave:Me,onEnterBack:Ie,onLeaveBack:Pe}=u,me=U===true?"left":typeof U=="string"?U:false,fe=typeof p=="function"?p:te[p]??te.linear,Ae=be(x.start??"top bottom"),Oe=be(x.end??"bottom top"),_=typeof M=="string"?document.querySelector(M):M??null,ne=Array.isArray(b)?b[0]:null,V=Array.isArray(b)?b[1]:typeof b=="string"?b:null,B=Array.isArray(R)?R[0]:null,s=Array.isArray(R)?R[1]:typeof R=="number"?R:null,m=Array.isArray(z)?z[0]:null,k=Array.isArray(z)?z[1]:typeof z=="number"?z:null;function G(o){let i=o*100;switch(me){case "right":return `inset(0 0 0 ${100-i}%)`;case "top":return `inset(0 0 ${100-i}% 0)`;case "bottom":return `inset(${100-i}% 0 0 0)`;case "center":return `circle(${o*150}% at 50% 50%)`;default:return `inset(0 ${100-i}% 0 0)`}}let $=me?[]:Array.from(e.querySelectorAll(h)),D=[],C=[],Y=0,J=0,j=false,oe=false,X=0,Fe=false,pe=-1,Ne=-1,K=false,Te=0,he=0,Ee,je=null,Se=new Set,Re=-1,et=performance.now(),ke=NaN;function De(){return _?S==="x"?_.scrollLeft:_.scrollTop:S==="x"?window.scrollX:window.scrollY}function tt(){return _?S==="x"?_.clientWidth:_.clientHeight:S==="x"?window.innerWidth:window.innerHeight}function rt(){let o=e.getBoundingClientRect(),i,w,q;if(_){let ee=_.getBoundingClientRect();i=S==="x"?o.left-ee.left+_.scrollLeft:o.top-ee.top+_.scrollTop,w=S==="x"?o.width:o.height,q=De();}else i=S==="x"?o.left:o.top,w=S==="x"?o.width:o.height,q=De();let Q=xe({top:i,height:w},q,tt(),Ae,Oe);Y=Q.tStart,J=Q.tEnd,ge&&process.env.NODE_ENV!=="production"&&(je?.remove(),je=$t(Y,J,S));}function ht(o,i){if(e.style.setProperty("--scroll-draw-progress",String(o)),me){let w=i==="reverse"?1-o:o;e.style.clipPath=G(w);return}$.forEach((w,q)=>{w.style.strokeDashoffset=i==="reverse"?`${D[q]*o}`:`${D[q]*(1-o)}`,l&&(w.style.opacity=i==="reverse"?`${1-o}`:`${o}`),ne&&V?w.style.stroke=Le(ne,V,o):V&&(w.style.stroke=V),B!==null&&s!==null?w.style.strokeWidth=`${B+(s-B)*o}`:s!==null&&(w.style.strokeWidth=`${s}`),m!==null&&k!==null?w.style.fillOpacity=`${m+(k-m)*o}`:k!==null&&(w.style.fillOpacity=`${k}`),P&&w.tagName.toLowerCase()==="path"&&C[q]&&w.setAttribute("d",Ze(C[q],P,o));});}function He(){if(e.style.setProperty("--scroll-draw-progress","0"),me){e.style.clipPath=G(0);return}$.forEach((o,i)=>{o.style.strokeDasharray=`${D[i]}`,o.style.strokeDashoffset=E==="reverse"?"0":`${D[i]}`,l?o.style.opacity=E==="reverse"?"1":"0":o.style.opacity="",ne&&(o.style.stroke=ne),B!==null&&(o.style.strokeWidth=`${B}`),m!==null&&(o.style.fillOpacity=`${m}`),P&&o.tagName.toLowerCase()==="path"&&C[i]&&o.setAttribute("d",C[i]);});}if($.forEach(o=>{Tt(o);let i=Ve(o);D.push(i),o.tagName.toLowerCase()==="path"?C.push(o.getAttribute("d")??""):C.push(""),a?(o.style.strokeDasharray=`${i}`,o.style.strokeDashoffset=E==="reverse"?`${i}`:"0",l&&(o.style.opacity="1"),V&&(o.style.stroke=V),s!==null&&(o.style.strokeWidth=`${s}`),k!==null&&(o.style.fillOpacity=`${k}`),P&&o.tagName.toLowerCase()==="path"&&o.setAttribute("d",P)):(o.style.strokeDasharray=`${i}`,o.style.strokeDashoffset=E==="reverse"?"0":`${i}`,l?o.style.opacity=E==="reverse"?"1":"0":o.style.opacity="",ne&&(o.style.stroke=ne),B!==null&&(o.style.strokeWidth=`${B}`),m!==null&&(o.style.fillOpacity=`${m}`));}),me){if(a)return e.style.clipPath=G(1),le?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=G(0);}else if(a)return le?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function bt(){return !(Z===false||!At()||!$.length||typeof p!="string"||!(p in ct)||me||S!=="y"||_||f!==1||F!==0||W||d||H!==false||P||T||ae||A>0||g||N||le||ue||Me||Ie||Pe||b!=null||R!=null||z!=null||(x.start??"top bottom").trim()!=="top bottom"||(x.end??"bottom top").trim()!=="bottom top")}function wt(){let o=`svg-scroll-draw-${++xt}`,i=E==="reverse"?"0":"var(--ssd-len)",w=E==="reverse"?"var(--ssd-len)":"0",q=`stroke-dashoffset:${i};`,Q=`stroke-dashoffset:${w};`;l&&(q+=`opacity:${E==="reverse"?1:0};`,Q+=`opacity:${E==="reverse"?0:1};`);let ee=document.createElement("style");ee.setAttribute("data-svg-scroll-draw",""),ee.textContent=`@keyframes ${o}{from{${q}}to{${Q}}}.${o}{animation-name:${o};animation-duration:auto;animation-timing-function:${ct[p]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(ee);function ie(c,v){c.style.setProperty("--ssd-len",String(D[v])),c.style.strokeDasharray=`${D[v]}`,c.style.strokeDashoffset="",c.style.opacity="",c.style.animationPlayState="",c.classList.add(o);}$.forEach(ie);let y=false,L=-1;function I(){if(L>=0)return L;let c=e.getBoundingClientRect(),{tStart:v,tEnd:O}=xe({top:c.top,height:c.height},De(),tt(),Ae,Oe);return fe(re(De(),v,O,f))}return {destroy(){$.forEach(c=>{c.classList.remove(o),c.style.removeProperty("--ssd-len"),c.style.animationPlayState="";}),ee.remove();},replay(){y=false,L=-1,$.forEach(ie);},pause(){y=true,$.forEach(c=>{c.style.animationPlayState="paused";});},resume(){y&&(y=false,$.forEach(c=>{c.style.animationPlayState="running";}));},seek(c){let v=Math.min(1,Math.max(0,c));L=v,y=true,$.forEach((O,$e)=>{O.classList.remove(o),O.style.strokeDashoffset=E==="reverse"?`${D[$e]*v}`:`${D[$e]*(1-v)}`,l&&(O.style.opacity=E==="reverse"?`${1-v}`:`${v}`);});},getProgress(){return I()}}}if(bt())return wt();function vt(){let o=Math.max(1,ce),i=0,w=0;function q(I){let c=true;if(me){let v=Math.min(1,Math.max(0,I/o)),O=fe(v);Te=O,e.style.setProperty("--scroll-draw-progress",String(O)),e.style.clipPath=G(E==="reverse"?1-O:O),g?.(O),v<1&&(c=false);}else $.forEach((v,O)=>{let $e=O*F*o,Ce=Math.min(1,Math.max(0,(I-$e)/o)),de=fe(Ce);v.style.strokeDashoffset=E==="reverse"?`${D[O]*de}`:`${D[O]*(1-de)}`,l&&(v.style.opacity=E==="reverse"?`${1-de}`:`${de}`),ne&&V?v.style.stroke=Le(ne,V,de):V&&(v.style.stroke=V),B!==null&&s!==null?v.style.strokeWidth=`${B+(s-B)*de}`:s!==null&&(v.style.strokeWidth=`${s}`),m!==null&&k!==null?v.style.fillOpacity=`${m+(k-m)*de}`:k!==null&&(v.style.fillOpacity=`${k}`),P&&v.tagName.toLowerCase()==="path"&&C[O]&&v.setAttribute("d",Ze(C[O],P,de)),O===0&&(g?.(de),e.style.setProperty("--scroll-draw-progress",String(de))),Ce<1&&(c=false);});if(T){let v=Math.min(1,Math.max(0,I/o)),O=fe(v);for(let $e in T){let Ce=parseFloat($e);O>=Ce&&!Se.has(Ce)&&(Se.add(Ce),T[$e]?.());}}return c}function Q(I){if(K)return;let c=I-i;oe||(oe=true,N?.());let v=q(c);if(v&&!j){j=true,q(o*(1+Math.max(0,$.length-1)*F)),le?.(),he<(ae==="infinite"?1/0:ae??0)&&(he++,Ee=setTimeout(()=>{i=performance.now(),oe=false,j=false,Se.clear(),He(),X=requestAnimationFrame(Q);},ve));return}v||(X=requestAnimationFrame(Q));}function ee(){cancelAnimationFrame(X),clearTimeout(Ee),i=performance.now(),w=0,K=false,oe=false,j=false,he=0,Se.clear(),He(),X=requestAnimationFrame(Q);}let ie=new IntersectionObserver(I=>{I.forEach(c=>{c.isIntersecting&&!(W&&j)?ee():!c.isIntersecting&&!W&&!j&&(cancelAnimationFrame(X),clearTimeout(Ee),i=null);});},{root:_??null,threshold:ye,rootMargin:we}),y;function L(){clearTimeout(y),y=setTimeout(()=>{$.forEach((I,c)=>{D[c]=Ve(I),I.style.strokeDasharray=`${D[c]}`;});},150);}return window.addEventListener("resize",L),window.addEventListener("orientationchange",L),A>0?setTimeout(()=>ie.observe(e),A):ie.observe(e),{destroy(){cancelAnimationFrame(X),clearTimeout(Ee),ie.disconnect(),window.removeEventListener("resize",L),window.removeEventListener("orientationchange",L),clearTimeout(y);},replay(){he=0,ee();},pause(){K||(K=true,w=performance.now()-i,cancelAnimationFrame(X));},resume(){K&&(K=false,i=performance.now()-w,X=requestAnimationFrame(Q));},seek(I){let c=Math.min(1,Math.max(0,I));Te=c,K=true,w=c*o,i=performance.now()-w,cancelAnimationFrame(X),q(w);},getProgress(){return Te}}}if(se)return vt();rt();function qe(){if(!Fe||K)return;let o=performance.now(),i=De(),w=f;if(H!==false){let y=o-et,L=y>0?Math.abs(i-(Re<0?i:Re))/y:0;w=f*Math.max(.2,1+L*(typeof H=="number"?H:1)*.04);}Re=i,et=o;let q=d?Ne===-1||i>=Ne?"forward":"reverse":E;Ne=i;let Q=J-Y,ee=true,ie=Q===0?0:(i-Y)/Q;if(isNaN(ke)||(ke<=0&&ie>0?ue?.():ke>0&&ie<=0&&Pe?.(),ke<1&&ie>=1?Me?.():ke>=1&&ie<1&&Ie?.()),ke=ie,me){let y=fe(re(i,Y,J,w));W&&!d&&(pe=Math.max(pe,y),y=pe),Te=y,e.style.setProperty("--scroll-draw-progress",String(y));let L=q==="reverse"?1-y:y;e.style.clipPath=G(L),g?.(y),!oe&&re(i,Y,J,w)>0&&(oe=true,N?.()),y>=1&&!j?(j=true,le?.(),he<(ae==="infinite"?1/0:ae??0)&&(he++,Ee=setTimeout(()=>{pe=-1,oe=false,j=false,e.style.clipPath=G(0);},ve))):y<1&&!W&&(j=false),X=requestAnimationFrame(qe);return}if($.forEach((y,L)=>{let I=L*F*Q,c=fe(re(i,Y+I,J+I,w));W&&!d&&(pe=Math.max(pe,c),c=pe),Te=c,y.style.strokeDashoffset=q==="reverse"?`${D[L]*c}`:`${D[L]*(1-c)}`,l&&(y.style.opacity=q==="reverse"?`${1-c}`:`${c}`),ne&&V?y.style.stroke=Le(ne,V,c):V&&(y.style.stroke=V),B!==null&&s!==null?y.style.strokeWidth=`${B+(s-B)*c}`:s!==null&&(y.style.strokeWidth=`${s}`),m!==null&&k!==null?y.style.fillOpacity=`${m+(k-m)*c}`:k!==null&&(y.style.fillOpacity=`${k}`),P&&y.tagName.toLowerCase()==="path"&&C[L]&&y.setAttribute("d",Ze(C[L],P,c)),L===0&&(g?.(c),e.style.setProperty("--scroll-draw-progress",String(c))),c<1&&(ee=false);}),T){let y=fe(re(i,Y,J,w));for(let L in T){let I=parseFloat(L);y>=I&&!Se.has(I)&&(Se.add(I),T[L]?.());}}!oe&&re(i,Y,J,w)>0&&(oe=true,N?.()),ee&&!j?(j=true,le?.(),he<(ae==="infinite"?1/0:ae??0)&&(he++,Ee=setTimeout(()=>{pe=-1,oe=false,j=false,Se.clear(),He();},ve))):!ee&&!W&&(j=false),X=requestAnimationFrame(qe);}let Xe=new IntersectionObserver(o=>{o.forEach(i=>{Fe=i.isIntersecting,Fe&&!K?X=requestAnimationFrame(qe):cancelAnimationFrame(X);});},{root:_??null,threshold:ye,rootMargin:we}),Ye;function ze(){clearTimeout(Ye),Ye=setTimeout(()=>{$.forEach((o,i)=>{D[i]=Ve(o),o.style.strokeDasharray=`${D[i]}`;}),rt();},150);}return window.addEventListener("resize",ze),window.addEventListener("orientationchange",ze),A>0?setTimeout(()=>Xe.observe(e),A):Xe.observe(e),{destroy(){cancelAnimationFrame(X),clearTimeout(Ee),Xe.disconnect(),window.removeEventListener("resize",ze),window.removeEventListener("orientationchange",ze),clearTimeout(Ye),je?.remove();},replay(){pe=-1,Ne=-1,Re=-1,oe=false,j=false,he=0,K=false,Se.clear(),clearTimeout(Ee),He();},pause(){K=true,cancelAnimationFrame(X);},resume(){K&&(K=false,Fe&&(X=requestAnimationFrame(qe)));},seek(o){let i=Math.min(1,Math.max(0,o));Te=i,pe=i,K=true,cancelAnimationFrame(X),ht(i,E);},getProgress(){return Te}}}var mt=new Map;function Be(e,t){mt.set(e,t);}function We(e){mt.delete(e);}function Mt(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function ft(e){let t=[],r=/([\w]+)\(([^)]*)\)/g,n;for(;(n=r.exec(e))!==null;){let u=[],a=[],h=n[2].trim();if(h)for(let f of h.split(/[\s,]+/)){let l=f.match(/^([-+]?[\d.eE]+)(.*)$/);u.push(l?parseFloat(l[1]):0),a.push(l?l[2]:"");}t.push({fn:n[1],nums:u,units:a});}return t}function Pt(e,t,r){let n=ft(e),u=ft(t);return n.length===0||n.length!==u.length?r<1?e:t:n.map((a,h)=>{let f=u[h];return a.fn!==f.fn||a.nums.length!==f.nums.length?r<1?`${a.fn}(${a.nums.map((l,p)=>`${l}${a.units[p]}`).join(", ")})`:`${f.fn}(${f.nums.map((l,p)=>`${l}${f.units[p]}`).join(", ")})`:`${a.fn}(${a.nums.map((l,p)=>`${l+(f.nums[p]-l)*r}${a.units[p]}`).join(", ")})`}).join(" ")}function pt(e,t,r){if(typeof e=="number"&&typeof t=="number")return String(e+(t-e)*r);let n=String(e),u=String(t);if(Mt(n))return Le(n,u,r);if(n.includes("("))return Pt(n,u,r);let a=n.match(/^([-+]?[\d.]+)(.*)$/),h=u.match(/^([-+]?[\d.]+)(.*)$/);if(a&&h){let f=parseFloat(a[1]),l=parseFloat(h[1]);return `${f+(l-f)*r}${a[2]||h[2]}`}return r<1?n:u}function kt(e){return e.replace(/([A-Z])/g,t=>`-${t.toLowerCase()}`)}var dt={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},Ct=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),Lt=0;function It(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function gt(e,t){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let{props:n,trigger:u={},easing:a="ease-out",speed:h=1,once:f=false,axis:l="y",scrollContainer:p,native:x=true,velocityScale:F=false,onProgress:E,onComplete:W,onEnter:ge,onLeave:S,onEnterBack:M,onLeaveBack:d}=t,A=window.matchMedia("(prefers-reduced-motion: reduce)").matches,b=typeof a=="function"?a:te[a]??te["ease-out"],R=be(u.start??"top bottom"),z=be(u.end??"bottom top"),T=typeof p=="string"?document.querySelector(p):p??null,H=Object.entries(n).map(([s,m])=>({prop:kt(s),from:Array.isArray(m)?m[0]:"",to:Array.isArray(m)?m[1]:m}));function ye(){let s=window.getComputedStyle(e);for(let m of H)m.from===""&&(m.from=s.getPropertyValue(m.prop).trim()||"0");}function we(){for(let s of H)e.style.setProperty(s.prop,String(s.to));}if(A)return we(),W?.(),r;ye();function ae(){if(!x||!It()||typeof a!="string"||!(a in dt)||l!=="y"||T||f||h!==1||E||W||ge||S||M||d||F!==false||(u.start??"top bottom").trim()!=="top bottom"||(u.end??"bottom top").trim()!=="bottom top")return false;for(let s of H)if(!Ct.has(s.prop))return false;return true}function ve(){let s=`ssd-a-${++Lt}`,m=H.map(C=>`${C.prop}:${C.from}`).join(";"),k=H.map(C=>`${C.prop}:${C.to}`).join(";"),G=document.createElement("style");G.setAttribute("data-ssd-animate",""),G.textContent=`@keyframes ${s}{from{${m}}to{${k}}}.${s}{animation-name:${s};animation-duration:auto;animation-timing-function:${dt[a]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(G),e.classList.add(s);let $=()=>l==="x"?window.scrollX:window.scrollY,D=()=>l==="x"?window.innerWidth:window.innerHeight;return {destroy(){e.classList.remove(s),G.remove();},replay(){e.classList.remove(s),e.offsetWidth,e.classList.add(s);},pause(){e.style.animationPlayState="paused";},resume(){e.style.animationPlayState="";},seek(C){let Y=Math.min(1,Math.max(0,C));e.classList.remove(s);for(let J of H)e.style.setProperty(J.prop,pt(J.from,J.to,Y));},getProgress(){let C=e.getBoundingClientRect(),Y=$(),J=D(),{tStart:j,tEnd:oe}=xe({top:C.top,height:C.height},Y,J,R,z);return b(re(Y,j,oe,h))}}}if(ae())return ve();let P=0,U=0,se=0,ce=false,Z=false,g=-1,N=0,le=false,ue=NaN,Me=-1,Ie=0,Pe=()=>T?l==="x"?T.scrollLeft:T.scrollTop:l==="x"?window.scrollX:window.scrollY,me=()=>T?l==="x"?T.clientWidth:T.clientHeight:l==="x"?window.innerWidth:window.innerHeight;function fe(){let s=e.getBoundingClientRect(),m,k;if(T){let $=T.getBoundingClientRect();m=l==="x"?s.left-$.left+T.scrollLeft:s.top-$.top+T.scrollTop,k=l==="x"?s.width:s.height;}else m=l==="x"?s.left:s.top,k=l==="x"?s.width:s.height;let G=xe({top:m,height:k},Pe(),me(),R,z);P=G.tStart,U=G.tEnd;}function Ae(s){e.style.setProperty("--scroll-draw-progress",String(s));for(let m of H)e.style.setProperty(m.prop,pt(m.from,m.to,s));E?.(s);}function Oe(s){if(isNaN(ue)){ue=s;return}ue<=0&&s>0?ge?.():ue>0&&s<=0&&d?.(),ue<1&&s>=1?S?.():ue>=1&&s<1&&M?.(),ue=s;}function _(){if(!ce||Z)return;let s=performance.now(),m=Pe(),k=h;if(F!==false){let D=s-Ie,C=D>0?Math.abs(m-(Me<0?m:Me))/D:0;k=h*Math.max(.2,1+C*(typeof F=="number"?F:1)*.04);}Me=m,Ie=s;let G=U===P?0:(m-P)/(U-P);Oe(G);let $=b(re(m,P,U,k));f&&(g=Math.max(g,$),$=g),N=$,Ae($),$>=1&&!le?(le=true,W?.()):$<1&&!f&&(le=false),se=requestAnimationFrame(_);}fe();{let s=b(re(Pe(),P,U,h));f&&s>0&&(g=s),N=s,Ae(s);}let ne=new IntersectionObserver(s=>{s.forEach(m=>{ce=m.isIntersecting,ce&&!Z?se=requestAnimationFrame(_):cancelAnimationFrame(se);});},{root:T??null}),V;function B(){clearTimeout(V),V=setTimeout(fe,150);}return window.addEventListener("resize",B),window.addEventListener("orientationchange",B),ne.observe(e),Be(e,{type:"animate",getProgress:()=>N,getTrigger:()=>({tStart:P,tEnd:U})}),{destroy(){cancelAnimationFrame(se),ne.disconnect(),window.removeEventListener("resize",B),window.removeEventListener("orientationchange",B),clearTimeout(V),We(e);},replay(){g=-1,le=false,N=0,Z=false,Ae(0);},pause(){Z=true,cancelAnimationFrame(se);},resume(){Z&&(Z=false,ce&&(se=requestAnimationFrame(_)));},seek(s){let m=Math.min(1,Math.max(0,s));N=m,g=m,Z=true,cancelAnimationFrame(se),Ae(m);},getProgress(){return N}}}var _e={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Dt(e,t){if(typeof window>"u")return _e;let r=typeof e=="string"?document.querySelector(e):e;return r?gt(r,t):(process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] scrollAnimate: element not found:",e),_e)}function Ot(e,t={}){if(typeof window>"u")return _e;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),_e;let{speed:n=.3,axis:u="y",easing:a="linear",trigger:h,onProgress:f}=t,l=r.getBoundingClientRect(),p=u==="x"?l.width:l.height,x=n*p;return gt(r,{props:u==="x"?{transform:["translateX(0px)",`translateX(${-x}px)`]}:{transform:["translateY(0px)",`translateY(${-x}px)`]},trigger:h??{start:"top bottom",end:"bottom top"},easing:a,native:false,onProgress:f})}var Je={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Ft(e,t){if(typeof window>"u")return Je;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] scrollCounter: element not found:",e),Je;let n=r,{from:u=0,to:a,format:h,easing:f="ease-out",trigger:l={},once:p=true,decimals:x,onComplete:F}=t,E=x!==void 0?g=>g.toFixed(x):h??(g=>String(Math.round(g))),W=typeof f=="function"?f:te[f]??te["ease-out"],ge=be(l.start??"top 80%"),S=be(l.end??"top 20%");if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return n.textContent=E(a),F?.(),Je;n.textContent=E(u);let d=0,A=0,b=0,R=false,z=false,T=-1,H=0,ye=false,we=()=>window.scrollY,ae=()=>window.innerHeight;function ve(){let g=n.getBoundingClientRect(),N=xe({top:g.top,height:g.height},we(),ae(),ge,S);d=N.tStart,A=N.tEnd;}function P(g){n.textContent=E(u+(a-u)*g),n.style.setProperty("--scroll-draw-progress",String(g));}function U(){if(!R||z)return;let g=W(re(we(),d,A,1));p&&(T=Math.max(T,g),g=T),H=g,P(g),g>=1&&!ye?(ye=true,F?.()):g<1&&!p&&(ye=false),b=requestAnimationFrame(U);}ve();{let g=W(re(we(),d,A,1));p&&g>0&&(T=g),H=g,P(g);}let se=new IntersectionObserver(g=>{g.forEach(N=>{R=N.isIntersecting,R&&!z?b=requestAnimationFrame(U):cancelAnimationFrame(b);});}),ce;function Z(){clearTimeout(ce),ce=setTimeout(ve,150);}return window.addEventListener("resize",Z),window.addEventListener("orientationchange",Z),se.observe(n),Be(n,{type:"counter",getProgress:()=>H,getTrigger:()=>({tStart:d,tEnd:A})}),{destroy(){cancelAnimationFrame(b),se.disconnect(),window.removeEventListener("resize",Z),window.removeEventListener("orientationchange",Z),clearTimeout(ce),We(n);},replay(){T=-1,ye=false,H=0,z=false,P(0);},pause(){z=true,cancelAnimationFrame(b);},resume(){z&&(z=false,R&&(b=requestAnimationFrame(U)));},seek(g){let N=Math.min(1,Math.max(0,g));H=N,T=N,z=true,cancelAnimationFrame(b),P(N);},getProgress(){return H}}}var yt="http://www.w3.org/2000/svg",Nt="cinematic-photo",Ke=e=>e<0?0:e>1?1:e;function Ge(e){let t=parseFloat(e);return Number.isFinite(t)?Ke(t/100):0}function Rt(e){return te[e]??te.linear}var Ht={destroy:()=>{},getProgress:()=>0},Qe=class{constructor(t){if(typeof document>"u"){this.mount=null;return}this.mount=typeof t.wrapper=="string"?document.querySelector(t.wrapper):t.wrapper,!this.mount&&process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] Cinematic: wrapper not found:",t.wrapper);}loadStory(t){let r=this.mount;if(typeof window>"u"||!r)return Ht;r.style.position="relative",r.style.height=t.totalHeight,r.style.display="block";let n=document.createElement("div");n.setAttribute("data-cinematic-stage",""),n.style.cssText="position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:block;",r.appendChild(n);let u=[];for(let S of t.scenes){if(S.background){let d=document.createElement("img");d.id=Nt,d.src=S.background,d.alt="",d.style.cssText="position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;",n.appendChild(d);}let M=S.animations.filter(d=>d.type==="draw");if(M.length){let d=document.createElementNS(yt,"svg");d.setAttribute("viewBox",`0 0 ${t.canvas.width} ${t.canvas.height}`),d.setAttribute("preserveAspectRatio","xMidYMid meet"),d.style.cssText="position:absolute;inset:0;width:100%;height:100%;overflow:visible;",n.appendChild(d);for(let A of M){let b=document.createElementNS(yt,"path");b.id=A.target.replace(/^#/,""),b.setAttribute("d",A.d),b.setAttribute("fill","none"),b.setAttribute("stroke",A.stroke),b.setAttribute("stroke-width",String(A.strokeWidth)),b.setAttribute("stroke-linecap","round"),b.setAttribute("stroke-linejoin","round");let R=A.length||b.getTotalLength?.()||0;b.style.strokeDasharray=String(R),b.style.strokeDashoffset=String(R),d.appendChild(b),u.push({kind:"draw",el:b,start:Ge(A.start),end:Ge(A.end),ease:Rt(A.easing),length:R});}}for(let d of S.animations){if(d.type!=="fade")continue;let A=n.querySelector(d.target)??document.querySelector(d.target);A&&(A.style.opacity=String(d.from),u.push({kind:"fade",el:A,start:Ge(d.start),end:Ge(d.end),ease:te["ease-in-out"]??te.linear,from:d.from,to:d.to}));}}let a=0,h=()=>{let S=r.offsetHeight-window.innerHeight;return S<=0?r.getBoundingClientRect().top<=0?1:0:Ke(-r.getBoundingClientRect().top/S)},f=S=>{for(let M of u){let d=M.end-M.start,A=d<=0?S>=M.end?1:0:Ke((S-M.start)/d),b=M.ease(A);M.kind==="draw"?M.el.style.strokeDashoffset=String(M.length*(1-b)):M.el.style.opacity=String(M.from+(M.to-M.from)*b);}};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return f(1),{destroy:()=>{},getProgress:()=>1};let l=0,p=false,x=false,F=()=>{a=h(),f(a),p&&(l=requestAnimationFrame(F));},E=()=>{p||(p=true,l=requestAnimationFrame(F));},W=()=>{p=false,cancelAnimationFrame(l);},ge=new IntersectionObserver(S=>{for(let M of S)x=M.isIntersecting,x?E():W();},{threshold:0});return ge.observe(n),a=h(),f(a),{destroy(){W(),ge.disconnect();},getProgress:()=>a}}};function er(e,t){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let n=typeof e=="string"?document.querySelector(e):e;return n?ut(n,t):(console.warn("[svg-scroll-draw] Container not found:",e),r)}
|
|
4
|
+
exports.Cinematic=Qe;exports.PRESETS=Ue;exports.createBounce=it;exports.createElastic=at;exports.createSpring=Et;exports.scrollAnimate=Dt;exports.scrollCounter=Ft;exports.scrollDraw=er;exports.scrollParallax=Ot;
|
package/dist/index.d.mts
CHANGED
|
@@ -71,6 +71,14 @@ interface ScrollDrawOptions {
|
|
|
71
71
|
onProgress?: (alpha: number) => void;
|
|
72
72
|
onStart?: () => void;
|
|
73
73
|
onComplete?: () => void;
|
|
74
|
+
/** Fires when scroll position enters the trigger zone (scrolling forward). */
|
|
75
|
+
onEnter?: () => void;
|
|
76
|
+
/** Fires when scroll position exits the trigger zone at the end (scrolling forward). */
|
|
77
|
+
onLeave?: () => void;
|
|
78
|
+
/** Fires when scroll position re-enters the trigger zone from the end (scrolling back). */
|
|
79
|
+
onEnterBack?: () => void;
|
|
80
|
+
/** Fires when scroll position exits the trigger zone at the start (scrolling back). */
|
|
81
|
+
onLeaveBack?: () => void;
|
|
74
82
|
/**
|
|
75
83
|
* Trigger the animation when the element enters the viewport instead of
|
|
76
84
|
* tying it to scroll position. The draw runs over `duration` milliseconds,
|
|
@@ -181,8 +189,22 @@ interface ScrollAnimateOptions {
|
|
|
181
189
|
axis?: 'x' | 'y';
|
|
182
190
|
scrollContainer?: string | Element;
|
|
183
191
|
native?: boolean;
|
|
192
|
+
/**
|
|
193
|
+
* Scale animation speed by scroll velocity — faster scrolling = faster animation.
|
|
194
|
+
* Pass `true` for default sensitivity (1) or a number to control it.
|
|
195
|
+
* Higher values = more dramatic speed-up. Default sensitivity: 1.
|
|
196
|
+
*/
|
|
197
|
+
velocityScale?: boolean | number;
|
|
184
198
|
onProgress?: (alpha: number) => void;
|
|
185
199
|
onComplete?: () => void;
|
|
200
|
+
/** Fires when scroll enters the trigger zone (scrolling forward). */
|
|
201
|
+
onEnter?: () => void;
|
|
202
|
+
/** Fires when scroll exits the trigger zone at the end (scrolling forward). */
|
|
203
|
+
onLeave?: () => void;
|
|
204
|
+
/** Fires when scroll re-enters the trigger zone from the end (scrolling back). */
|
|
205
|
+
onEnterBack?: () => void;
|
|
206
|
+
/** Fires when scroll exits the trigger zone at the start (scrolling back). */
|
|
207
|
+
onLeaveBack?: () => void;
|
|
186
208
|
}
|
|
187
209
|
interface ScrollParallaxOptions {
|
|
188
210
|
speed?: number;
|
package/dist/index.d.ts
CHANGED
|
@@ -71,6 +71,14 @@ interface ScrollDrawOptions {
|
|
|
71
71
|
onProgress?: (alpha: number) => void;
|
|
72
72
|
onStart?: () => void;
|
|
73
73
|
onComplete?: () => void;
|
|
74
|
+
/** Fires when scroll position enters the trigger zone (scrolling forward). */
|
|
75
|
+
onEnter?: () => void;
|
|
76
|
+
/** Fires when scroll position exits the trigger zone at the end (scrolling forward). */
|
|
77
|
+
onLeave?: () => void;
|
|
78
|
+
/** Fires when scroll position re-enters the trigger zone from the end (scrolling back). */
|
|
79
|
+
onEnterBack?: () => void;
|
|
80
|
+
/** Fires when scroll position exits the trigger zone at the start (scrolling back). */
|
|
81
|
+
onLeaveBack?: () => void;
|
|
74
82
|
/**
|
|
75
83
|
* Trigger the animation when the element enters the viewport instead of
|
|
76
84
|
* tying it to scroll position. The draw runs over `duration` milliseconds,
|
|
@@ -181,8 +189,22 @@ interface ScrollAnimateOptions {
|
|
|
181
189
|
axis?: 'x' | 'y';
|
|
182
190
|
scrollContainer?: string | Element;
|
|
183
191
|
native?: boolean;
|
|
192
|
+
/**
|
|
193
|
+
* Scale animation speed by scroll velocity — faster scrolling = faster animation.
|
|
194
|
+
* Pass `true` for default sensitivity (1) or a number to control it.
|
|
195
|
+
* Higher values = more dramatic speed-up. Default sensitivity: 1.
|
|
196
|
+
*/
|
|
197
|
+
velocityScale?: boolean | number;
|
|
184
198
|
onProgress?: (alpha: number) => void;
|
|
185
199
|
onComplete?: () => void;
|
|
200
|
+
/** Fires when scroll enters the trigger zone (scrolling forward). */
|
|
201
|
+
onEnter?: () => void;
|
|
202
|
+
/** Fires when scroll exits the trigger zone at the end (scrolling forward). */
|
|
203
|
+
onLeave?: () => void;
|
|
204
|
+
/** Fires when scroll re-enters the trigger zone from the end (scrolling back). */
|
|
205
|
+
onEnterBack?: () => void;
|
|
206
|
+
/** Fires when scroll exits the trigger zone at the start (scrolling back). */
|
|
207
|
+
onLeaveBack?: () => void;
|
|
186
208
|
}
|
|
187
209
|
interface ScrollParallaxOptions {
|
|
188
210
|
speed?: number;
|