svg-scroll-draw 2.18.1 → 2.19.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/README.md +10 -10
- package/dist/angular/index.cjs +3 -3
- package/dist/angular/index.d.mts +3 -3
- package/dist/angular/index.d.ts +3 -3
- package/dist/angular/index.mjs +1 -1
- package/dist/astro/index.cjs +3 -3
- package/dist/astro/index.d.mts +6 -5
- package/dist/astro/index.d.ts +6 -5
- package/dist/astro/index.mjs +1 -1
- package/dist/cdn/svg-scroll-draw.dev.global.js +133 -31
- package/dist/cdn/svg-scroll-draw.global.js +3 -3
- package/dist/chunk-7SBTYJGH.mjs +1 -0
- package/dist/chunk-A4JCC3QQ.mjs +1 -0
- package/dist/chunk-BFX2CSQ3.mjs +1 -0
- package/dist/chunk-I45LCJUP.mjs +1 -0
- package/dist/{chunk-DIMNQPW5.mjs → chunk-JPK2NJWO.mjs} +1 -1
- package/dist/chunk-KHQ7OGQK.mjs +1 -0
- package/dist/chunk-MTEGM4RR.mjs +1 -0
- package/dist/chunk-PKHX3HSS.mjs +1 -0
- package/dist/chunk-WHFRS7IP.mjs +3 -0
- package/dist/{engine-6AXEX8CL.d.ts → engine-C9LKls__.d.ts} +1 -1
- package/dist/{engine-Ci08nM91.d.mts → engine-CvzRSkuk.d.mts} +1 -1
- package/dist/group/index.cjs +2 -2
- package/dist/group/index.d.mts +3 -3
- package/dist/group/index.d.ts +3 -3
- package/dist/group/index.mjs +1 -1
- package/dist/horizontal/index.cjs +1 -1
- package/dist/horizontal/index.d.mts +1 -1
- package/dist/horizontal/index.d.ts +1 -1
- package/dist/horizontal/index.mjs +1 -1
- package/dist/{index-BDGQEK6X.d.mts → index-BlIjovDN.d.mts} +1 -1
- package/dist/{index-DxjUOIbK.d.ts → index-DZjvLJcU.d.ts} +1 -1
- package/dist/{index-BVuNgQSd.d.ts → index-G3VfLIN8.d.ts} +2 -2
- package/dist/{index-CGR7pSOR.d.mts → index-Zxa5HIes.d.mts} +2 -2
- package/dist/index.cjs +4 -4
- package/dist/index.d.mts +6 -6
- package/dist/index.d.ts +6 -6
- package/dist/index.mjs +1 -1
- package/dist/nuxt/index.cjs +3 -3
- package/dist/nuxt/index.d.mts +3 -3
- package/dist/nuxt/index.d.ts +3 -3
- package/dist/nuxt/index.mjs +1 -1
- package/dist/pin/index.cjs +1 -1
- package/dist/pin/index.mjs +1 -1
- package/dist/progress/index.cjs +1 -1
- package/dist/progress/index.d.mts +1 -1
- package/dist/progress/index.d.ts +1 -1
- package/dist/progress/index.mjs +1 -1
- package/dist/react/index.cjs +3 -3
- package/dist/react/index.d.mts +16 -13
- package/dist/react/index.d.ts +16 -13
- package/dist/react/index.mjs +1 -1
- package/dist/reveal/index.cjs +1 -1
- package/dist/reveal/index.d.mts +1 -1
- package/dist/reveal/index.d.ts +1 -1
- package/dist/reveal/index.mjs +1 -1
- package/dist/{scroll-draw-CNlq4Z_L.d.mts → scroll-draw-B4CadBz0.d.mts} +1 -1
- package/dist/{scroll-draw-BlJfbTDv.d.ts → scroll-draw-Cs6Z5ype.d.ts} +1 -1
- package/dist/snap/index.d.mts +1 -1
- package/dist/snap/index.d.ts +1 -1
- package/dist/solid/index.cjs +2 -2
- package/dist/solid/index.d.mts +3 -3
- package/dist/solid/index.d.ts +3 -3
- package/dist/solid/index.mjs +1 -1
- package/dist/svelte/index.cjs +2 -2
- package/dist/svelte/index.d.mts +3 -3
- package/dist/svelte/index.d.ts +3 -3
- package/dist/svelte/index.mjs +1 -1
- package/dist/text/index.cjs +1 -1
- package/dist/text/index.d.mts +1 -1
- package/dist/text/index.d.ts +1 -1
- package/dist/text/index.mjs +1 -1
- package/dist/timeline/index.cjs +11 -11
- package/dist/timeline/index.d.mts +1 -1
- package/dist/timeline/index.d.ts +1 -1
- package/dist/timeline/index.mjs +4 -4
- package/dist/{types-DHU1zNEw.d.mts → types-B0YM4nQP.d.mts} +6 -1
- package/dist/{types-DHU1zNEw.d.ts → types-B0YM4nQP.d.ts} +6 -1
- package/dist/video/index.cjs +1 -1
- package/dist/video/index.d.mts +1 -1
- package/dist/video/index.d.ts +1 -1
- package/dist/video/index.mjs +1 -1
- package/dist/vue/index.cjs +3 -3
- package/dist/vue/index.d.mts +5 -83
- package/dist/vue/index.d.ts +5 -83
- package/dist/vue/index.mjs +1 -1
- package/dist/web-component/index.cjs +3 -3
- package/dist/web-component/index.mjs +1 -1
- package/package.json +1 -1
- package/dist/chunk-4MH5SQTH.mjs +0 -1
- package/dist/chunk-CTVQDBD3.mjs +0 -1
- package/dist/chunk-KBFWDHF4.mjs +0 -1
- package/dist/chunk-LINFV2GK.mjs +0 -3
- package/dist/chunk-PEFR3ZB7.mjs +0 -1
- package/dist/chunk-QJ4H2HW3.mjs +0 -1
- package/dist/chunk-SNCRC6BA.mjs +0 -1
- package/dist/chunk-TIRZOSQ4.mjs +0 -1
package/dist/vue/index.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as vue from 'vue';
|
|
2
2
|
import { Ref } from 'vue';
|
|
3
|
-
import { a as ScrollDrawOptions } from '../types-
|
|
4
|
-
import { S as ScrollAnimateOptions } from '../engine-
|
|
5
|
-
import { S as ScrollCounterOptions } from '../index-
|
|
3
|
+
import { a as ScrollDrawOptions } from '../types-B0YM4nQP.js';
|
|
4
|
+
import { S as ScrollAnimateOptions } from '../engine-C9LKls__.js';
|
|
5
|
+
import { S as ScrollCounterOptions } from '../index-DZjvLJcU.js';
|
|
6
6
|
import { ScrollVideoOptions } from '../video/index.js';
|
|
7
7
|
import { ScrollTextOptions } from '../text/index.js';
|
|
8
8
|
|
|
@@ -15,87 +15,9 @@ type MaybeRefOrGetter<T> = T | Ref<T> | (() => T);
|
|
|
15
15
|
*/
|
|
16
16
|
declare function useScrollDraw(options?: MaybeRefOrGetter<ScrollDrawOptions>): Ref<HTMLElement | null, HTMLElement | null>;
|
|
17
17
|
/** Component — wraps children in a <div> and initialises the engine. */
|
|
18
|
-
declare const ScrollDraw: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
19
|
-
selector: {
|
|
20
|
-
type: StringConstructor;
|
|
21
|
-
};
|
|
22
|
-
speed: {
|
|
23
|
-
type: NumberConstructor;
|
|
24
|
-
};
|
|
25
|
-
fade: {
|
|
26
|
-
type: BooleanConstructor;
|
|
27
|
-
};
|
|
28
|
-
stagger: {
|
|
29
|
-
type: NumberConstructor;
|
|
30
|
-
};
|
|
31
|
-
easing: {
|
|
32
|
-
type: (StringConstructor | FunctionConstructor)[];
|
|
33
|
-
};
|
|
34
|
-
direction: {
|
|
35
|
-
type: () => "forward" | "reverse";
|
|
36
|
-
};
|
|
37
|
-
trigger: {
|
|
38
|
-
type: ObjectConstructor;
|
|
39
|
-
};
|
|
40
|
-
onProgress: {
|
|
41
|
-
type: FunctionConstructor;
|
|
42
|
-
};
|
|
43
|
-
onStart: {
|
|
44
|
-
type: FunctionConstructor;
|
|
45
|
-
};
|
|
46
|
-
onComplete: {
|
|
47
|
-
type: FunctionConstructor;
|
|
48
|
-
};
|
|
49
|
-
once: {
|
|
50
|
-
type: BooleanConstructor;
|
|
51
|
-
};
|
|
52
|
-
debug: {
|
|
53
|
-
type: BooleanConstructor;
|
|
54
|
-
};
|
|
55
|
-
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
18
|
+
declare const ScrollDraw: vue.DefineComponent<vue.ExtractPropTypes<Record<keyof ScrollDrawOptions, null>>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
56
19
|
[key: string]: any;
|
|
57
|
-
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
58
|
-
selector: {
|
|
59
|
-
type: StringConstructor;
|
|
60
|
-
};
|
|
61
|
-
speed: {
|
|
62
|
-
type: NumberConstructor;
|
|
63
|
-
};
|
|
64
|
-
fade: {
|
|
65
|
-
type: BooleanConstructor;
|
|
66
|
-
};
|
|
67
|
-
stagger: {
|
|
68
|
-
type: NumberConstructor;
|
|
69
|
-
};
|
|
70
|
-
easing: {
|
|
71
|
-
type: (StringConstructor | FunctionConstructor)[];
|
|
72
|
-
};
|
|
73
|
-
direction: {
|
|
74
|
-
type: () => "forward" | "reverse";
|
|
75
|
-
};
|
|
76
|
-
trigger: {
|
|
77
|
-
type: ObjectConstructor;
|
|
78
|
-
};
|
|
79
|
-
onProgress: {
|
|
80
|
-
type: FunctionConstructor;
|
|
81
|
-
};
|
|
82
|
-
onStart: {
|
|
83
|
-
type: FunctionConstructor;
|
|
84
|
-
};
|
|
85
|
-
onComplete: {
|
|
86
|
-
type: FunctionConstructor;
|
|
87
|
-
};
|
|
88
|
-
once: {
|
|
89
|
-
type: BooleanConstructor;
|
|
90
|
-
};
|
|
91
|
-
debug: {
|
|
92
|
-
type: BooleanConstructor;
|
|
93
|
-
};
|
|
94
|
-
}>> & Readonly<{}>, {
|
|
95
|
-
fade: boolean;
|
|
96
|
-
once: boolean;
|
|
97
|
-
debug: boolean;
|
|
98
|
-
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
20
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<Record<keyof ScrollDrawOptions, null>>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
99
21
|
/**
|
|
100
22
|
* Composable — call with a full options object and bind the returned ref to
|
|
101
23
|
* whichever element you want to animate.
|
package/dist/vue/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{d as ScrollAnimate,f as ScrollCounter,b as ScrollDraw,j as ScrollText,h as ScrollVideo,c as useScrollAnimate,e as useScrollCounter,a as useScrollDraw,i as useScrollText,g as useScrollVideo}from'../chunk-
|
|
1
|
+
export{d as ScrollAnimate,f as ScrollCounter,b as ScrollDraw,j as ScrollText,h as ScrollVideo,c as useScrollAnimate,e as useScrollCounter,a as useScrollDraw,i as useScrollText,g as useScrollVideo}from'../chunk-PKHX3HSS.mjs';import'../chunk-XSVTHCLO.mjs';import'../chunk-7SBTYJGH.mjs';import'../chunk-I45LCJUP.mjs';import'../chunk-KHQ7OGQK.mjs';import'../chunk-BFX2CSQ3.mjs';import'../chunk-WHFRS7IP.mjs';import'../chunk-OJFWQ6CU.mjs';import'../chunk-YWKPTYSG.mjs';import'../chunk-YZV4Z3EQ.mjs';import'../chunk-A4JCC3QQ.mjs';import'../chunk-DM6EDKWH.mjs';import'../chunk-4DOJSIEQ.mjs';import'../chunk-BCV4RAIX.mjs';import'../chunk-LFSU6LR3.mjs';
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
'use strict';function
|
|
2
|
-
<div style="position:absolute;${
|
|
3
|
-
<div style="position:absolute;${E?`left:${w}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${w}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",c,{passive:true}),c(),{el:n,destroy(){window.removeEventListener("scroll",c),n.remove();}}}var vt=/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,Et=/[MmLlHhVvCcSsQqTtAaZz]/g;function Ht(e,r,s){if(!Se)return;let n=(e.match(Et)??[]).join("").toUpperCase(),c=(r.match(Et)??[]).join("").toUpperCase(),f=(e.match(vt)??[]).length,g=(r.match(vt)??[]).length;if(n!==c){de(`morphTo: command sequence differs (${n||"\u2205"} \u2192 ${c||"\u2205"}). Interpolation is coordinate-for-coordinate, so the result will not reach the target shape. Redraw both paths with the same commands.`,s);return}f!==g&&de(`morphTo: coordinate count differs (${f} \u2192 ${g}). Extra coordinates are ignored and missing ones hold their start value, so the result will not reach the target shape.`,s);}function Ge(e,r,s){let n=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),c=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,f=>{let g=parseFloat(f),w=n[c++]??g;return String(+(g+(w-g)*s).toFixed(4))})}function St(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:s,...n}=r,c=s?{...ft[s],...n}:n,f=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:g="path, polyline, line, polygon, rect, circle",speed:w=1,fade:E=false,easing:v="linear",trigger:$={},stagger:B=0,direction:h="forward",once:ee=false,debug:$t=false,axis:te="y",scrollContainer:Oe,autoReverse:$e=false,delay:ye=0,strokeColor:re,strokeWidth:ne,fillOpacity:se,waypoints:oe,velocityScale:ge=false,threshold:qe=0,rootMargin:Be="0px",repeat:ie=0,repeatDelay:Re=0,morphTo:I,clip:Ie,autoplay:xt=false,duration:Tt=1e3,native:At=true,onProgress:he,onStart:xe,onComplete:ce,onEnter:Ue,onLeave:je,onEnterBack:Qe,onLeaveBack:Xe}=c,X=Ie===true?"left":typeof Ie=="string"?Ie:false,ae=typeof v=="function"?v:Ee[v]??Ee.linear,Ye=He($.start??"top bottom"),Ke=He($.end??"bottom top"),z=typeof Oe=="string"?document.querySelector(Oe):Oe??null,H=Array.isArray(re)?re[0]:null,L=Array.isArray(re)?re[1]:typeof re=="string"?re:null,O=Array.isArray(ne)?ne[0]:null,D=Array.isArray(ne)?ne[1]:typeof ne=="number"?ne:null,R=Array.isArray(se)?se[0]:null,P=Array.isArray(se)?se[1]:typeof se=="number"?se:null;function le(t){let o=t*100;switch(X){case "right":return `inset(0 0 0 ${100-o}%)`;case "top":return `inset(0 0 ${100-o}% 0)`;case "bottom":return `inset(${100-o}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-o}% 0 0)`}}let S=X?[]:Array.from(e.querySelectorAll(g)),p=[],_=[],W=0,U=0,A=false,N=false,M=0,fe=false,Y=-1,be=[],Te=-1,k=false,G=0,j=0,K,_e=null;function Ze(){_e?.destroy(),_e=null;}let Z=new Set,Je=NaN,J=true,Ae=-1,et=performance.now(),me=NaN;function Fe(){return z?te==="x"?z.scrollLeft:z.scrollTop:te==="x"?window.scrollX:window.scrollY}function tt(){return z?te==="x"?z.clientWidth:z.clientHeight:te==="x"?window.innerWidth:window.innerHeight}function rt(){let t=ut(e,z,te);return We(t,t.scroll,tt(),Ye,Ke)}function nt(){(({tStart:W,tEnd:U}=rt())),$t&&Se&&(Ze(),_e=zt(W,U,te));}function Ne(t,o=rt){gt(e,{type:"draw",getProgress:()=>t.getProgress(),getTrigger:o});let l=t.destroy;return t.destroy=()=>{l.call(t),ht(e);},t}function Mt(t,o){if(e.style.setProperty("--scroll-draw-progress",String(t)),X){let l=o==="reverse"?1-t:t;e.style.clipPath=le(l);return}S.forEach((l,x)=>{l.style.strokeDashoffset=o==="reverse"?`${p[x]*t}`:`${p[x]*(1-t)}`,E&&(l.style.opacity=o==="reverse"?`${1-t}`:`${t}`),H&&L?l.style.stroke=Ce(H,L,t):L&&(l.style.stroke=L),O!==null&&D!==null?l.style.strokeWidth=`${O+(D-O)*t}`:D!==null&&(l.style.strokeWidth=`${D}`),R!==null&&P!==null?l.style.fillOpacity=`${R+(P-R)*t}`:P!==null&&(l.style.fillOpacity=`${P}`),I&&l.tagName.toLowerCase()==="path"&&_[x]&&l.setAttribute("d",Ge(_[x],I,t));});}function Me(){if(e.style.setProperty("--scroll-draw-progress","0"),X){e.style.clipPath=le(0);return}S.forEach((t,o)=>{t.style.strokeDasharray=`${p[o]}`,t.style.strokeDashoffset=h==="reverse"?"0":`${p[o]}`,E?t.style.opacity=h==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),O!==null&&(t.style.strokeWidth=`${O}`),R!==null&&(t.style.fillOpacity=`${R}`),I&&t.tagName.toLowerCase()==="path"&&_[o]&&t.setAttribute("d",_[o]);});}if(S.forEach(t=>{Vt(t);let o=pe(t);p.push(o);let l=t.tagName.toLowerCase()==="path";l?_.push(t.getAttribute("d")??""):_.push(""),I&&(l?Ht(_[_.length-1],I,t):de(`morphTo only applies to <path> elements \u2014 ignored on <${t.tagName}>.`,t)),f?(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=h==="reverse"?`${o}`:"0",E&&(t.style.opacity="1"),L&&(t.style.stroke=L),D!==null&&(t.style.strokeWidth=`${D}`),P!==null&&(t.style.fillOpacity=`${P}`),I&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",I)):(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=h==="reverse"?"0":`${o}`,E?t.style.opacity=h==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),O!==null&&(t.style.strokeWidth=`${O}`),R!==null&&(t.style.fillOpacity=`${R}`));}),X){if(f)return e.style.clipPath=le(1),ce?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=le(0);}else if(f)return ce?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};let st=typeof v=="string"?pt(v):null;function kt(){return !(At===false||!Nt()||!S.length||!st||X||te!=="y"||z||w!==1||B!==0||ee||$e||ge!==false||I||oe||ie||ye>0||he||xe||ce||Ue||je||Qe||Xe||re!=null||ne!=null||se!=null||($.start??"top bottom").trim()!=="top bottom"||($.end??"bottom top").trim()!=="bottom top")}function Lt(){let t=++Ft,o=`svg-scroll-draw-${t}`,l=`svg-scroll-draw-host-${t}`,x=`--svg-scroll-draw-${t}`,Q=h==="reverse"?"0":"var(--ssd-len)",q=h==="reverse"?"var(--ssd-len)":"0",V=`stroke-dashoffset:${Q};`,u=`stroke-dashoffset:${q};`;E&&(V+=`opacity:${h==="reverse"?1:0};`,u+=`opacity:${h==="reverse"?0:1};`);let m=document.createElement("style");m.setAttribute("data-svg-scroll-draw",""),m.textContent=`@keyframes ${o}{from{${V}}to{${u}}}.${l}{view-timeline-name:${x};view-timeline-axis:block;}.${o}{animation-name:${o};animation-duration:auto;animation-timing-function:${st};animation-fill-mode:both;animation-timeline:${x};animation-range:cover 0% cover 100%;}`,document.head.appendChild(m),e.classList.add(l);function T(i,b){i.style.setProperty("--ssd-len",String(p[b])),i.style.strokeDasharray=`${p[b]}`,i.style.strokeDashoffset="",i.style.opacity="",i.style.animationPlayState="",i.classList.add(o);}S.forEach(T);let a=false,d=-1;function y(){if(d>=0)return d;let i=e.getBoundingClientRect(),{tStart:b,tEnd:F}=We({top:i.top,height:i.height},Fe(),tt(),Ye,Ke);return ae(ue(Fe(),b,F,w))}return {destroy(){e.classList.remove(l),S.forEach(i=>{i.classList.remove(o),i.style.removeProperty("--ssd-len"),i.style.animationPlayState="";}),m.remove();},replay(){a=false,d=-1,S.forEach(T);},pause(){a=true,S.forEach(i=>{i.style.animationPlayState="paused";});},resume(){a&&(a=false,S.forEach(i=>{i.style.animationPlayState="running";}));},seek(i){let b=Math.min(1,Math.max(0,i));d=b,a=true,S.forEach((F,C)=>{F.classList.remove(o),F.style.strokeDashoffset=h==="reverse"?`${p[C]*b}`:`${p[C]*(1-b)}`,E&&(F.style.opacity=h==="reverse"?`${1-b}`:`${b}`);});},getProgress(){return y()},refresh(){S.forEach((i,b)=>{p[b]=pe(i),i.style.setProperty("--ssd-len",String(p[b])),i.style.strokeDasharray=`${p[b]}`;});}}}if(kt())return Ne(Lt());function Dt(){let t=Math.max(1,Tt),o=0,l=0,x=false;function Q(a){let d=true;if(X){let y=Math.min(1,Math.max(0,a/t)),i=ae(y);G=i,e.style.setProperty("--scroll-draw-progress",String(i)),e.style.clipPath=le(h==="reverse"?1-i:i),he?.(i),y<1&&(d=false);}else S.forEach((y,i)=>{let b=i*B*t,F=Math.min(1,Math.max(0,(a-b)/t)),C=ae(F);y.style.strokeDashoffset=h==="reverse"?`${p[i]*C}`:`${p[i]*(1-C)}`,E&&(y.style.opacity=h==="reverse"?`${1-C}`:`${C}`),H&&L?y.style.stroke=Ce(H,L,C):L&&(y.style.stroke=L),O!==null&&D!==null?y.style.strokeWidth=`${O+(D-O)*C}`:D!==null&&(y.style.strokeWidth=`${D}`),R!==null&&P!==null?y.style.fillOpacity=`${R+(P-R)*C}`:P!==null&&(y.style.fillOpacity=`${P}`),I&&y.tagName.toLowerCase()==="path"&&_[i]&&y.setAttribute("d",Ge(_[i],I,C)),i===0&&(G=C,he?.(C),e.style.setProperty("--scroll-draw-progress",String(C))),F<1&&(d=false);});if(oe){let y=Math.min(1,Math.max(0,a/t)),i=ae(y);for(let b in oe){let F=parseFloat(b);i>=F&&!Z.has(F)&&(Z.add(F),oe[b]?.());}}return d}function q(a){if(k)return;let d=a-o;N||(N=true,xe?.());let y=Q(d);if(y&&!A){A=true,Q(t*(1+Math.max(0,S.length-1)*B)),ce?.(),j<(ie==="infinite"?1/0:ie??0)&&(j++,K=setTimeout(()=>{o=performance.now(),N=false,A=false,Z.clear(),Me(),M=requestAnimationFrame(q);},Re));return}y||(M=requestAnimationFrame(q));}function V(){cancelAnimationFrame(M),clearTimeout(K),o=performance.now(),l=0,k=false,N=false,A=false,j=0,x=true,G=0,Z.clear(),Me(),M=requestAnimationFrame(q);}let u=new IntersectionObserver(a=>{a.forEach(d=>{d.isIntersecting&&!(ee&&A)?V():!d.isIntersecting&&!ee&&!A&&(cancelAnimationFrame(M),clearTimeout(K),x=false);});},{root:z??null,threshold:qe,rootMargin:Be}),m;function T(){clearTimeout(m),m=setTimeout(()=>{S.forEach((a,d)=>{p[d]=pe(a),a.style.strokeDasharray=`${p[d]}`;});},150);}return window.addEventListener("resize",T),window.addEventListener("orientationchange",T),ye>0?setTimeout(()=>u.observe(e),ye):u.observe(e),{destroy(){cancelAnimationFrame(M),clearTimeout(K),u.disconnect(),window.removeEventListener("resize",T),window.removeEventListener("orientationchange",T),clearTimeout(m);},replay(){j=0,V();},pause(){k||!x||(k=true,l=performance.now()-o,cancelAnimationFrame(M));},resume(){k&&(k=false,x=true,o=performance.now()-l,M=requestAnimationFrame(q));},seek(a){let d=Math.min(1,Math.max(0,a));G=d,k=true,l=d*t,o=performance.now()-l,cancelAnimationFrame(M),Q(l);},getProgress(){return G},refresh(){clearTimeout(m),S.forEach((a,d)=>{p[d]=pe(a),a.style.strokeDasharray=`${p[d]}`;});}}}if(xt)return Ne(Dt());nt();function ke(){if(!fe||k)return;let t=performance.now(),o=Fe();if(!J&&ge===false&&o===Je){M=requestAnimationFrame(ke);return}J=false,Je=o;let l=w;if(ge!==false){let u=t-et,m=u>0?Math.abs(o-(Ae<0?o:Ae))/u:0;l=w*Math.max(.2,1+m*(typeof ge=="number"?ge:1)*.04);}Ae=o,et=t;let x=$e?Te===-1||o>=Te?"forward":"reverse":h;Te=o;let Q=U-W,q=true,V=Q===0?0:(o-W)/Q;if(isNaN(me)||(me<=0&&V>0?Ue?.():me>0&&V<=0&&Xe?.(),me<1&&V>=1?je?.():me>=1&&V<1&&Qe?.()),me=V,X){let u=ae(ue(o,W,U,l));ee&&!$e&&(Y=Math.max(Y,u),u=Y),G=u,e.style.setProperty("--scroll-draw-progress",String(u));let m=x==="reverse"?1-u:u;e.style.clipPath=le(m),he?.(u),!N&&ue(o,W,U,l)>0&&(N=true,xe?.()),u>=1&&!A?(A=true,ce?.(),j<(ie==="infinite"?1/0:ie??0)&&(j++,K=setTimeout(()=>{Y=-1,N=false,A=false,e.style.clipPath=le(0);},Re))):u<1&&!ee&&(A=false),M=requestAnimationFrame(ke);return}if(S.forEach((u,m)=>{let T=m*B*Q,a=ae(ue(o,W+T,U+T,l));ee&&!$e&&(a=be[m]=Math.max(be[m]??Y,a)),G=a,u.style.strokeDashoffset=x==="reverse"?`${p[m]*a}`:`${p[m]*(1-a)}`,E&&(u.style.opacity=x==="reverse"?`${1-a}`:`${a}`),H&&L?u.style.stroke=Ce(H,L,a):L&&(u.style.stroke=L),O!==null&&D!==null?u.style.strokeWidth=`${O+(D-O)*a}`:D!==null&&(u.style.strokeWidth=`${D}`),R!==null&&P!==null?u.style.fillOpacity=`${R+(P-R)*a}`:P!==null&&(u.style.fillOpacity=`${P}`),I&&u.tagName.toLowerCase()==="path"&&_[m]&&u.setAttribute("d",Ge(_[m],I,a)),m===0&&(he?.(a),e.style.setProperty("--scroll-draw-progress",String(a))),a<1&&(q=false);}),oe){let u=ae(ue(o,W,U,l));for(let m in oe){let T=parseFloat(m);u>=T&&!Z.has(T)&&(Z.add(T),oe[m]?.());}}!N&&ue(o,W,U,l)>0&&(N=true,xe?.()),q&&!A?(A=true,ce?.(),j<(ie==="infinite"?1/0:ie??0)&&(j++,K=setTimeout(()=>{Y=-1,be=[],N=false,A=false,Z.clear(),Me(),J=true;},Re))):!q&&!ee&&(A=false),M=requestAnimationFrame(ke);}let Ve=false;function Le(){Ve||(Ve=true,M=requestAnimationFrame(function(){ke();}));}function De(){Ve=false,cancelAnimationFrame(M);}let ze=new IntersectionObserver(t=>{t.forEach(o=>{fe=o.isIntersecting,fe&&!k?(J=true,Le()):De();});},{root:z??null,threshold:qe,rootMargin:Be});function ot(){S.forEach((t,o)=>{p[o]=pe(t),t.style.strokeDasharray=`${p[o]}`;}),nt(),J=true;}let Pe;function we(){clearTimeout(Pe),Pe=setTimeout(ot,150);}window.addEventListener("resize",we),window.addEventListener("orientationchange",we);let ve;return typeof ResizeObserver<"u"&&(ve=new ResizeObserver(()=>we()),ve.observe(document.body),ve.observe(document.documentElement),ve.observe(e)),ye>0?setTimeout(()=>ze.observe(e),ye):ze.observe(e),Ne({destroy(){cancelAnimationFrame(M),clearTimeout(K),De(),ze.disconnect(),ve?.disconnect(),window.removeEventListener("resize",we),window.removeEventListener("orientationchange",we),clearTimeout(Pe),Ze();},replay(){Y=-1,be=[],Te=-1,Ae=-1,N=false,A=false,j=0,k=false,G=0,Z.clear(),clearTimeout(K),Me(),J=true,fe&&Le();},pause(){k=true,De();},resume(){k&&(k=false,J=true,fe&&Le());},seek(t){let o=Math.min(1,Math.max(0,t));G=o,Y=o,be=[],k=true,De(),Mt(o,h),J=true;},getProgress(){return G},refresh(){clearTimeout(Pe),ot(),fe&&!k&&Le();}},()=>({tStart:W,tEnd:U}))}if(typeof HTMLElement<"u"&&typeof customElements<"u"&&!customElements.get("scroll-draw")){class e extends HTMLElement{constructor(){super(...arguments);this.instance=null;}connectedCallback(){let n={},c=this.getAttribute("speed"),f=this.getAttribute("easing"),g=this.getAttribute("stagger"),w=this.getAttribute("direction"),E=this.getAttribute("selector");c&&(n.speed=parseFloat(c)),f&&(n.easing=f),g&&(n.stagger=parseFloat(g)),w&&(n.direction=w),E&&(n.selector=E),this.hasAttribute("fade")&&(n.fade=this.getAttribute("fade")!=="false"),this.hasAttribute("once")&&(n.once=this.getAttribute("once")!=="false"),this.instance=St(this,n);}disconnectedCallback(){this.instance?.destroy(),this.instance=null;}}customElements.define("scroll-draw",e);}
|
|
1
|
+
'use strict';function _t({bounces:e=3,decay:r=.5}={}){let n=Math.max(1,Math.round(e)),s=Math.max(.01,Math.min(.99,r)),i=Math.sqrt(s),l=0,m=[];for(let y=0;y<n;y++){let b=Math.pow(i,y);m.push(b),l+=b;}let E=[0],S=0;for(let y=0;y<n;y++)S+=m[y]/l,E.push(S);return y=>{if(y<=0)return 0;if(y>=1)return 1;for(let b=0;b<n;b++)if(y<=E[b+1]){let F=(y-E[b])/(E[b+1]-E[b]);if(b===0)return F*(2-F);let w=1-Math.pow(s,b);return w+(1-w)*(2*F-1)*(2*F-1)}return 1}}function Ft({amplitude:e=1,period:r=.4}={}){let n=Math.max(1,e),s=Math.max(.1,r),i=n<=1?s/4:s/(2*Math.PI)*Math.asin(1/n);return l=>l<=0?0:l>=1?1:n*Math.pow(2,-10*l)*Math.sin((l-i)*(2*Math.PI)/s)+1}var ve={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:_t(),elastic:Ft()};function ut(e,r,n){return Math.min(n,Math.max(r,e))}function qe(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[n="top",s="bottom"]=r.split(/\s+/).filter(Boolean);return {element:n,viewport:s}}function ct(e,r,n,s){switch(s){case "top":return e+n;case "center":return e+n+r/2;case "bottom":return e+n+r;default:return e+n}}function ft(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function ue(e,r,n,s){return n===r?0:ut((e-r)/(n-r)*s,0,1)}function Be(e,r,n,s,i){let l=ct(e.top,e.height,r,s.element)-ft(s.viewport,n),m=ct(e.top,e.height,r,i.element)-ft(i.viewport,n);return {tStart:l,tEnd:m}}function mt(e,r,n){let s=e.getBoundingClientRect(),i=n==="x"?s.width:s.height;return r?{top:n==="x"?s.left-r.getBoundingClientRect().left+r.scrollLeft:s.top-r.getBoundingClientRect().top+r.scrollTop,height:i,scroll:0}:{top:n==="x"?s.left:s.top,height:i,scroll:n==="x"?window.scrollX:window.scrollY}}function pe(e){let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),s=parseFloat(e.getAttribute("height")??"0");return 2*(n+s)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function pt(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let s=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return s?[parseInt(s[1]),parseInt(s[2]),parseInt(s[3])]:null}function Oe(e,r,n){let s=pt(e),i=pt(r);return !s||!i?e:`rgb(${Math.round(s[0]+(i[0]-s[0])*n)},${Math.round(s[1]+(i[1]-s[1])*n)},${Math.round(s[2]+(i[2]-s[2])*n)})`}var dt={sketch:{easing:"ease-in",stagger:.1,speed:.9,fade:false},reveal:{easing:"ease-out",fade:true,speed:1.2,once:true},typewriter:{easing:"linear",stagger:.05,speed:1.5},cinematic:{easing:"ease-in-out",fade:true,speed:.75},spring:{easing:"spring",speed:1.1}};var Ee=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function de(e,...r){Ee&&console.warn(`[svg-scroll-draw] ${e}`,...r);}var Vt="cubic-bezier(0.333333, 0, 0.666667, 0.333333)",zt="cubic-bezier(0.333333, 0.666667, 0.666667, 1)",gt=33;function Ht(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timing-function: linear(0, 1)")}function Wt(e){let r=[];for(let n=0;n<gt;n++){let s=n/(gt-1);r.push(String(Math.round(e(s)*1e5)/1e5));}return `linear(${r.join(",")})`}function yt(e){switch(e){case "linear":return "linear";case "ease-in":return Vt;case "ease-out":return zt;case "ease-in-out":return Ht()?Wt(ve["ease-in-out"]):null;default:return null}}var ht=Symbol.for("svg-scroll-draw.registry");function bt(){let e=globalThis;return e[ht]||(e[ht]=new Map)}function wt(e,r){bt().set(e,r);}function vt(e){bt().delete(e);}var Se,Re=new Set,Ie=new WeakMap,xe=new Map,Et=e=>{let r=e.getBoundingClientRect();return r.width+" "+r.height};function Gt(e){let r=new Set;for(let n of e)for(;n&&n!==document.body;n=n.parentElement)for(let s=n;s;s=s.previousElementSibling)r.add(s);return r}function St(e,r){if(typeof ResizeObserver>"u"||typeof document>"u")return ()=>{};let n=()=>r();Se??(Se=new ResizeObserver(i=>{let l=false;for(let{target:m}of i)Ie.get(m)!==Et(m)&&(l=true),Ie.set(m,"");l&&Re.forEach(m=>m());})),Re.add(n);let s=Gt(e);return [document.body,document.documentElement].forEach(i=>i&&s.add(i)),s.forEach(i=>{Ie.has(i)||Ie.set(i,Et(i)),xe.set(i,(xe.get(i)??0)+1),Se.observe(i);}),()=>{Re.delete(n)&&(s.forEach(i=>{let l=(xe.get(i)??1)-1;if(l)return void xe.set(i,l);xe.delete(i),Se?.unobserve(i);}),Re.size||(Se?.disconnect(),Se=void 0));}}var qt=0;function Bt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")&&CSS.supports("view-timeline-name: --x")}function xt(e,r){let n="";try{n=getComputedStyle(e).getPropertyValue(r).trim();}catch{}return n||(e.getAttribute(r)??"").trim()}var $t=new Set(["","none","transparent","rgba(0, 0, 0, 0)"]);function Ut(e){if(!Ee)return;let r=xt(e,"stroke");if(!r||r==="none"){de("Element has no stroke \u2014 path will not be visible.",e);return}let n=(e.getAttribute("fill")??"").trim();n&&!$t.has(n)&&!$t.has(xt(e,"fill"))&&de("Element has a fill \u2014 it may obscure the stroke animation.",e);}function jt(e,r,n){let s=document.createElement("div");s.setAttribute("data-svg-scroll-draw-debug",""),s.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 i(){let l=n==="x"?window.scrollX:window.scrollY,m=e-l,E=r-l,S=n==="x";s.innerHTML=`
|
|
2
|
+
<div style="position:absolute;${S?`left:${m}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${m}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
|
|
3
|
+
<div style="position:absolute;${S?`left:${E}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${E}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(s),window.addEventListener("scroll",i,{passive:true}),i(),{el:s,destroy(){window.removeEventListener("scroll",i),s.remove();}}}var Tt=/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,At=/[MmLlHhVvCcSsQqTtAaZz]/g;function Qt(e,r,n){if(!Ee)return;let s=(e.match(At)??[]).join("").toUpperCase(),i=(r.match(At)??[]).join("").toUpperCase(),l=(e.match(Tt)??[]).length,m=(r.match(Tt)??[]).length;if(s!==i){de(`morphTo: command sequence differs (${s||"\u2205"} \u2192 ${i||"\u2205"}). Interpolation is coordinate-for-coordinate, so the result will not reach the target shape. Redraw both paths with the same commands.`,n);return}l!==m&&de(`morphTo: coordinate count differs (${l} \u2192 ${m}). Extra coordinates are ignored and missing ones hold their start value, so the result will not reach the target shape.`,n);}function Ue(e,r,n){let s=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),i=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,l=>{let m=parseFloat(l),E=s[i++]??m;return String(+(m+(E-m)*n).toFixed(4))})}function Mt(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:n,...s}=r,i=n?{...dt[n],...s}:s,l=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:m="path, polyline, line, polygon, rect, circle",speed:E=1,fade:S=false,easing:y="linear",trigger:b={},stagger:F=0,direction:w="forward",once:ee=false,debug:kt=false,axis:te="y",scrollContainer:Ne,autoReverse:$e=false,delay:ge=0,strokeColor:re,strokeWidth:ne,fillOpacity:se,waypoints:oe,velocityScale:ye=false,threshold:je=0,rootMargin:Qe="0px",repeat:ie=0,repeatDelay:_e=0,morphTo:I,clip:Fe,autoplay:Lt=false,duration:Pt=1e3,native:Dt=true,onProgress:he,onStart:Te,onComplete:ce,onEnter:Xe,onLeave:Ye,onEnterBack:Je,onLeaveBack:Ke}=i,X=Fe===true?"left":typeof Fe=="string"?Fe:false,ae=typeof y=="function"?y:ve[y]??ve.linear,Ze=qe(b.start??"top bottom"),et=qe(b.end??"bottom top"),H=typeof Ne=="string"?document.querySelector(Ne):Ne??null,W=Array.isArray(re)?re[0]:null,L=Array.isArray(re)?re[1]:typeof re=="string"?re:null,O=Array.isArray(ne)?ne[0]:null,P=Array.isArray(ne)?ne[1]:typeof ne=="number"?ne:null,R=Array.isArray(se)?se[0]:null,D=Array.isArray(se)?se[1]:typeof se=="number"?se:null;function le(t){let o=t*100;switch(X){case "right":return `inset(0 0 0 ${100-o}%)`;case "top":return `inset(0 0 ${100-o}% 0)`;case "bottom":return `inset(${100-o}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-o}% 0 0)`}}let x=X?[]:Array.from(e.querySelectorAll(m)),d=[],N=[],G=0,U=0,A=false,V=false,M=0,fe=false,Y=-1,be=[],Ae=-1,k=false,q=0,j=0,J,Ve=null;function tt(){Ve?.destroy(),Ve=null;}let K=new Set,rt=NaN,Z=true,Me=-1,nt=performance.now(),me=NaN;function ze(){return H?te==="x"?H.scrollLeft:H.scrollTop:te==="x"?window.scrollX:window.scrollY}function st(){return H?te==="x"?H.clientWidth:H.clientHeight:te==="x"?window.innerWidth:window.innerHeight}function ot(){let t=mt(e,H,te);return Be(t,t.scroll,st(),Ze,et)}function it(){(({tStart:G,tEnd:U}=ot())),kt&&Ee&&(tt(),Ve=jt(G,U,te));}function He(t,o=ot){wt(e,{type:"draw",getProgress:()=>t.getProgress(),getTrigger:o});let c=t.destroy;return t.destroy=()=>{c.call(t),vt(e);},t}function Ct(t,o){if(e.style.setProperty("--scroll-draw-progress",String(t)),X){let c=o==="reverse"?1-t:t;e.style.clipPath=le(c);return}x.forEach((c,$)=>{c.style.strokeDashoffset=o==="reverse"?`${d[$]*t}`:`${d[$]*(1-t)}`,S&&(c.style.opacity=o==="reverse"?`${1-t}`:`${t}`),W&&L?c.style.stroke=Oe(W,L,t):L&&(c.style.stroke=L),O!==null&&P!==null?c.style.strokeWidth=`${O+(P-O)*t}`:P!==null&&(c.style.strokeWidth=`${P}`),R!==null&&D!==null?c.style.fillOpacity=`${R+(D-R)*t}`:D!==null&&(c.style.fillOpacity=`${D}`),I&&c.tagName.toLowerCase()==="path"&&N[$]&&c.setAttribute("d",Ue(N[$],I,t));});}function ke(){if(e.style.setProperty("--scroll-draw-progress","0"),X){e.style.clipPath=le(0);return}x.forEach((t,o)=>{t.style.strokeDasharray=`${d[o]}`,t.style.strokeDashoffset=w==="reverse"?"0":`${d[o]}`,S?t.style.opacity=w==="reverse"?"1":"0":t.style.opacity="",W&&(t.style.stroke=W),O!==null&&(t.style.strokeWidth=`${O}`),R!==null&&(t.style.fillOpacity=`${R}`),I&&t.tagName.toLowerCase()==="path"&&N[o]&&t.setAttribute("d",N[o]);});}if(x.forEach(t=>{Ut(t);let o=pe(t);d.push(o);let c=t.tagName.toLowerCase()==="path";c?N.push(t.getAttribute("d")??""):N.push(""),I&&(c?Qt(N[N.length-1],I,t):de(`morphTo only applies to <path> elements \u2014 ignored on <${t.tagName}>.`,t)),l?(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=w==="reverse"?`${o}`:"0",S&&(t.style.opacity="1"),L&&(t.style.stroke=L),P!==null&&(t.style.strokeWidth=`${P}`),D!==null&&(t.style.fillOpacity=`${D}`),I&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",I)):(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=w==="reverse"?"0":`${o}`,S?t.style.opacity=w==="reverse"?"1":"0":t.style.opacity="",W&&(t.style.stroke=W),O!==null&&(t.style.strokeWidth=`${O}`),R!==null&&(t.style.fillOpacity=`${R}`));}),X){if(l)return e.style.clipPath=le(1),ce?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=le(0);}else if(l)return ce?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};let at=typeof y=="string"?yt(y):null;function Ot(){return !(Dt===false||!Bt()||!x.length||!at||X||te!=="y"||H||E!==1||F!==0||ee||$e||ye!==false||I||oe||ie||ge>0||he||Te||ce||Xe||Ye||Je||Ke||re!=null||ne!=null||se!=null||(b.start??"top bottom").trim()!=="top bottom"||(b.end??"bottom top").trim()!=="bottom top")}function Rt(){let t=++qt,o=`svg-scroll-draw-${t}`,c=`svg-scroll-draw-host-${t}`,$=`--svg-scroll-draw-${t}`,Q=w==="reverse"?"0":"var(--ssd-len)",B=w==="reverse"?"var(--ssd-len)":"0",z=`stroke-dashoffset:${Q};`,f=`stroke-dashoffset:${B};`;S&&(z+=`opacity:${w==="reverse"?1:0};`,f+=`opacity:${w==="reverse"?0:1};`);let p=document.createElement("style");p.setAttribute("data-svg-scroll-draw",""),p.textContent=`@keyframes ${o}{from{${z}}to{${f}}}.${c}{view-timeline-name:${$};view-timeline-axis:block;}.${o}{animation-name:${o};animation-duration:auto;animation-timing-function:${at};animation-fill-mode:both;animation-timeline:${$};animation-range:cover 0% cover 100%;}`,document.head.appendChild(p),e.classList.add(c);function T(a,v){a.style.setProperty("--ssd-len",String(d[v])),a.style.strokeDasharray=`${d[v]}`,a.style.strokeDashoffset="",a.style.opacity="",a.style.animationPlayState="",a.classList.add(o);}x.forEach(T);let u=false,g=-1;function h(){if(g>=0)return g;let a=e.getBoundingClientRect(),{tStart:v,tEnd:_}=Be({top:a.top,height:a.height},ze(),st(),Ze,et);return ae(ue(ze(),v,_,E))}return {destroy(){e.classList.remove(c),x.forEach(a=>{a.classList.remove(o),a.style.removeProperty("--ssd-len"),a.style.animationPlayState="";}),p.remove();},replay(){u=false,g=-1,x.forEach(T);},pause(){u=true,x.forEach(a=>{a.style.animationPlayState="paused";});},resume(){u&&(u=false,x.forEach(a=>{a.style.animationPlayState="running";}));},seek(a){let v=Math.min(1,Math.max(0,a));g=v,u=true,x.forEach((_,C)=>{_.classList.remove(o),_.style.strokeDashoffset=w==="reverse"?`${d[C]*v}`:`${d[C]*(1-v)}`,S&&(_.style.opacity=w==="reverse"?`${1-v}`:`${v}`);});},getProgress(){return h()},refresh(){x.forEach((a,v)=>{d[v]=pe(a),a.style.setProperty("--ssd-len",String(d[v])),a.style.strokeDasharray=`${d[v]}`;});}}}if(Ot())return He(Rt());function It(){let t=Math.max(1,Pt),o=0,c=0,$=false;function Q(u){let g=true;if(X){let h=Math.min(1,Math.max(0,u/t)),a=ae(h);q=a,e.style.setProperty("--scroll-draw-progress",String(a)),e.style.clipPath=le(w==="reverse"?1-a:a),he?.(a),h<1&&(g=false);}else x.forEach((h,a)=>{let v=a*F*t,_=Math.min(1,Math.max(0,(u-v)/t)),C=ae(_);h.style.strokeDashoffset=w==="reverse"?`${d[a]*C}`:`${d[a]*(1-C)}`,S&&(h.style.opacity=w==="reverse"?`${1-C}`:`${C}`),W&&L?h.style.stroke=Oe(W,L,C):L&&(h.style.stroke=L),O!==null&&P!==null?h.style.strokeWidth=`${O+(P-O)*C}`:P!==null&&(h.style.strokeWidth=`${P}`),R!==null&&D!==null?h.style.fillOpacity=`${R+(D-R)*C}`:D!==null&&(h.style.fillOpacity=`${D}`),I&&h.tagName.toLowerCase()==="path"&&N[a]&&h.setAttribute("d",Ue(N[a],I,C)),a===0&&(q=C,he?.(C),e.style.setProperty("--scroll-draw-progress",String(C))),_<1&&(g=false);});if(oe){let h=Math.min(1,Math.max(0,u/t)),a=ae(h);for(let v in oe){let _=parseFloat(v);a>=_&&!K.has(_)&&(K.add(_),oe[v]?.());}}return g}function B(u){if(k)return;let g=u-o;V||(V=true,Te?.());let h=Q(g);if(h&&!A){A=true,Q(t*(1+Math.max(0,x.length-1)*F)),ce?.(),j<(ie==="infinite"?1/0:ie??0)&&(j++,J=setTimeout(()=>{o=performance.now(),V=false,A=false,K.clear(),ke(),M=requestAnimationFrame(B);},_e));return}h||(M=requestAnimationFrame(B));}function z(){cancelAnimationFrame(M),clearTimeout(J),o=performance.now(),c=0,k=false,V=false,A=false,j=0,$=true,q=0,K.clear(),ke(),M=requestAnimationFrame(B);}let f=new IntersectionObserver(u=>{u.forEach(g=>{g.isIntersecting&&!(ee&&A)?z():!g.isIntersecting&&!ee&&!A&&(cancelAnimationFrame(M),clearTimeout(J),$=false);});},{root:H??null,threshold:je,rootMargin:Qe}),p;function T(){clearTimeout(p),p=setTimeout(()=>{x.forEach((u,g)=>{d[g]=pe(u),u.style.strokeDasharray=`${d[g]}`;});},150);}return window.addEventListener("resize",T),window.addEventListener("orientationchange",T),ge>0?setTimeout(()=>f.observe(e),ge):f.observe(e),{destroy(){cancelAnimationFrame(M),clearTimeout(J),f.disconnect(),window.removeEventListener("resize",T),window.removeEventListener("orientationchange",T),clearTimeout(p);},replay(){j=0,z();},pause(){k||!$||(k=true,c=performance.now()-o,cancelAnimationFrame(M));},resume(){k&&(k=false,$=true,o=performance.now()-c,M=requestAnimationFrame(B));},seek(u){let g=Math.min(1,Math.max(0,u));q=g,k=true,c=g*t,o=performance.now()-c,cancelAnimationFrame(M),Q(c);},getProgress(){return q},refresh(){clearTimeout(p),x.forEach((u,g)=>{d[g]=pe(u),u.style.strokeDasharray=`${d[g]}`;});}}}if(Lt)return He(It());it();function Le(){if(!fe||k)return;let t=performance.now(),o=ze();if(!Z&&ye===false&&o===rt){M=requestAnimationFrame(Le);return}Z=false,rt=o;let c=E;if(ye!==false){let f=t-nt,p=f>0?Math.abs(o-(Me<0?o:Me))/f:0;c=E*Math.max(.2,1+p*(typeof ye=="number"?ye:1)*.04);}Me=o,nt=t;let $=$e?Ae===-1||o>=Ae?"forward":"reverse":w;Ae=o;let Q=U-G,B=true,z=Q===0?0:(o-G)/Q;if(isNaN(me)||(me<=0&&z>0?Xe?.():me>0&&z<=0&&Ke?.(),me<1&&z>=1?Ye?.():me>=1&&z<1&&Je?.()),me=z,X){let f=ae(ue(o,G,U,c));ee&&!$e&&(Y=Math.max(Y,f),f=Y),q=f,e.style.setProperty("--scroll-draw-progress",String(f));let p=$==="reverse"?1-f:f;e.style.clipPath=le(p),he?.(f),!V&&ue(o,G,U,c)>0&&(V=true,Te?.()),f>=1&&!A?(A=true,ce?.(),j<(ie==="infinite"?1/0:ie??0)&&(j++,J=setTimeout(()=>{Y=-1,V=false,A=false,e.style.clipPath=le(0);},_e))):f<1&&!ee&&(A=false),M=requestAnimationFrame(Le);return}if(x.forEach((f,p)=>{let T=p*F*Q,u=ae(ue(o,G+T,U+T,c));ee&&!$e&&(u=be[p]=Math.max(be[p]??Y,u)),f.style.strokeDashoffset=$==="reverse"?`${d[p]*u}`:`${d[p]*(1-u)}`,S&&(f.style.opacity=$==="reverse"?`${1-u}`:`${u}`),W&&L?f.style.stroke=Oe(W,L,u):L&&(f.style.stroke=L),O!==null&&P!==null?f.style.strokeWidth=`${O+(P-O)*u}`:P!==null&&(f.style.strokeWidth=`${P}`),R!==null&&D!==null?f.style.fillOpacity=`${R+(D-R)*u}`:D!==null&&(f.style.fillOpacity=`${D}`),I&&f.tagName.toLowerCase()==="path"&&N[p]&&f.setAttribute("d",Ue(N[p],I,u)),p===0&&(q=u,he?.(u),e.style.setProperty("--scroll-draw-progress",String(u))),u<1&&(B=false);}),oe){let f=ae(ue(o,G,U,c));for(let p in oe){let T=parseFloat(p);f>=T&&!K.has(T)&&(K.add(T),oe[p]?.());}}!V&&ue(o,G,U,c)>0&&(V=true,Te?.()),B&&!A?(A=true,ce?.(),j<(ie==="infinite"?1/0:ie??0)&&(j++,J=setTimeout(()=>{Y=-1,be=[],V=false,A=false,K.clear(),ke(),Z=true;},_e))):!B&&!ee&&(A=false),M=requestAnimationFrame(Le);}let We=false;function Pe(){We||(We=true,M=requestAnimationFrame(function(){Le();}));}function De(){We=false,cancelAnimationFrame(M);}let Ge=new IntersectionObserver(t=>{t.forEach(o=>{fe=o.isIntersecting,fe&&!k?(Z=true,Pe()):De();});},{root:H??null,threshold:je,rootMargin:Qe});function lt(){x.forEach((t,o)=>{d[o]=pe(t),t.style.strokeDasharray=`${d[o]}`;}),it(),Z=true;}let Ce;function we(){clearTimeout(Ce),Ce=setTimeout(lt,150);}window.addEventListener("resize",we),window.addEventListener("orientationchange",we);let Nt=St([e],we);return ge>0?setTimeout(()=>Ge.observe(e),ge):Ge.observe(e),He({destroy(){cancelAnimationFrame(M),clearTimeout(J),De(),Ge.disconnect(),Nt(),window.removeEventListener("resize",we),window.removeEventListener("orientationchange",we),clearTimeout(Ce),tt();},replay(){Y=-1,be=[],Ae=-1,Me=-1,V=false,A=false,j=0,k=false,q=0,K.clear(),clearTimeout(J),ke(),Z=true,fe&&Pe();},pause(){k=true,De();},resume(){k&&(k=false,Z=true,fe&&Pe());},seek(t){let o=Math.min(1,Math.max(0,t));q=o,Y=o,be=[],k=true,De(),Ct(o,w),Z=true;},getProgress(){return q},refresh(){clearTimeout(Ce),lt(),fe&&!k&&Pe();}},()=>({tStart:G,tEnd:U}))}if(typeof HTMLElement<"u"&&typeof customElements<"u"&&!customElements.get("scroll-draw")){let e=["speed","easing","stagger","direction","selector","fade","once"];class r extends HTMLElement{constructor(){super(...arguments);this.instance=null;this.key="";}connectedCallback(){this.build();}attributeChangedCallback(){this.instance&&this.build();}build(){let i=JSON.stringify(e.map(F=>this.getAttribute(F)));if(this.instance&&i===this.key)return;this.instance?.destroy(),this.key=i;let l={},m=this.getAttribute("speed"),E=this.getAttribute("easing"),S=this.getAttribute("stagger"),y=this.getAttribute("direction"),b=this.getAttribute("selector");m&&(l.speed=parseFloat(m)),E&&(l.easing=E),S&&(l.stagger=parseFloat(S)),y&&(l.direction=y),b&&(l.selector=b),this.hasAttribute("fade")&&(l.fade=this.getAttribute("fade")!=="false"),this.hasAttribute("once")&&(l.once=this.getAttribute("once")!=="false"),this.instance=Mt(this,l);}disconnectedCallback(){this.instance?.destroy(),this.instance=null;}}r.observedAttributes=e,customElements.define("scroll-draw",r);}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import {b}from'../chunk-
|
|
1
|
+
import {b}from'../chunk-WHFRS7IP.mjs';import'../chunk-OJFWQ6CU.mjs';import'../chunk-YWKPTYSG.mjs';import'../chunk-YZV4Z3EQ.mjs';import'../chunk-A4JCC3QQ.mjs';import'../chunk-DM6EDKWH.mjs';import'../chunk-4DOJSIEQ.mjs';import'../chunk-BCV4RAIX.mjs';import'../chunk-LFSU6LR3.mjs';if(typeof HTMLElement<"u"&&typeof customElements<"u"&&!customElements.get("scroll-draw")){let e=["speed","easing","stagger","direction","selector","fade","once"];class s extends HTMLElement{constructor(){super(...arguments);this.instance=null;this.key="";}connectedCallback(){this.build();}attributeChangedCallback(){this.instance&&this.build();}build(){let i=JSON.stringify(e.map(d=>this.getAttribute(d)));if(this.instance&&i===this.key)return;this.instance?.destroy(),this.key=i;let t={},n=this.getAttribute("speed"),r=this.getAttribute("easing"),a=this.getAttribute("stagger"),c=this.getAttribute("direction"),o=this.getAttribute("selector");n&&(t.speed=parseFloat(n)),r&&(t.easing=r),a&&(t.stagger=parseFloat(a)),c&&(t.direction=c),o&&(t.selector=o),this.hasAttribute("fade")&&(t.fade=this.getAttribute("fade")!=="false"),this.hasAttribute("once")&&(t.once=this.getAttribute("once")!=="false"),this.instance=b(this,t);}disconnectedCallback(){this.instance?.destroy(),this.instance=null;}}s.observedAttributes=e,customElements.define("scroll-draw",s);}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "svg-scroll-draw",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.19.0",
|
|
4
4
|
"description": "Scroll-driven animation for the web — draw SVG paths, reveal elements, pin sections, scrub video. Zero dependencies, native CSS fast path, works with React, Vue, Svelte, Solid, Angular, Astro and vanilla JS",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"svg",
|
package/dist/chunk-4MH5SQTH.mjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import {a,b as b$1,c}from'./chunk-PEFR3ZB7.mjs';import {d}from'./chunk-DM6EDKWH.mjs';import {a as a$1,b as b$2}from'./chunk-BCV4RAIX.mjs';import {b}from'./chunk-LFSU6LR3.mjs';var S={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function K(a$2,D){if(typeof window>"u")return S;let T=typeof a$2=="string"?document.querySelector(a$2):a$2;if(!T)return b("scrollCounter: element not found:",a$2),S;let r=T,{from:A=0,to:E,format:k,easing:g="ease-out",trigger:F={},once:p=true,decimals:x,onComplete:I}=D,P=x!==void 0?e=>e.toFixed(x):k??(e=>String(Math.round(e))),z=typeof g=="function"?g:d[g]??d["ease-out"],H=a(F.start??"top 80%"),_=a(F.end??"top 20%");if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return r.textContent=P(E),I?.(),S;let c$1=0,l=0,n=0,m=false,o=false,i=-1,s=0,u=false,w=()=>window.scrollY,B=()=>window.innerHeight;function M(){let e=r.getBoundingClientRect(),t=c({top:e.top,height:e.height},w(),B(),H,_);c$1=t.tStart,l=t.tEnd;}function f(e){r.textContent=P(A+(E-A)*e),r.style.setProperty("--scroll-draw-progress",String(e));}function h(){if(!m||o)return;let e=z(b$1(w(),c$1,l,1));p&&(i=Math.max(i,e),e=i),s=e,f(e),e>=1&&!u?(u=true,I?.()):e<1&&!p&&(u=false),n=requestAnimationFrame(h);}M();{let e=z(b$1(w(),c$1,l,1));p&&e>0&&(i=e),s=e,f(e);}let L=new IntersectionObserver(e=>{e.forEach(t=>{m=t.isIntersecting,m&&!o?n=requestAnimationFrame(h):cancelAnimationFrame(n);});}),b$3;function d$1(){clearTimeout(b$3),b$3=setTimeout(M,150);}return window.addEventListener("resize",d$1),window.addEventListener("orientationchange",d$1),L.observe(r),a$1(r,{type:"counter",getProgress:()=>s,getTrigger:()=>({tStart:c$1,tEnd:l})}),{destroy(){cancelAnimationFrame(n),L.disconnect(),window.removeEventListener("resize",d$1),window.removeEventListener("orientationchange",d$1),clearTimeout(b$3),b$2(r);},replay(){i=-1,u=false,s=0,o=false,f(0);},pause(){o=true,cancelAnimationFrame(n);},resume(){o&&(o=false,m&&(n=requestAnimationFrame(h)));},seek(e){let t=Math.min(1,Math.max(0,e));s=t,i=t,o=true,cancelAnimationFrame(n),f(t);},getProgress(){return s}}}export{K as a};
|
package/dist/chunk-CTVQDBD3.mjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import {a,b}from'./chunk-XSVTHCLO.mjs';import {a as a$3}from'./chunk-TIRZOSQ4.mjs';import {a as a$4}from'./chunk-SNCRC6BA.mjs';import {a as a$2}from'./chunk-4MH5SQTH.mjs';import {a as a$1}from'./chunk-QJ4H2HW3.mjs';import {b as b$1}from'./chunk-LINFV2GK.mjs';import {defineComponent,ref,h,onMounted,watch,onUnmounted,unref}from'vue';var c=e=>typeof e=="function"?e():unref(e);function r(e,t,n){let o=null,a$1=t(),S=()=>{o?.destroy(),o=e.value?n(e.value,b(a$1,()=>a$1)):null;};onMounted(S),watch(()=>a(a$1=t()),S),onUnmounted(()=>{o?.destroy(),o=null;});}function H(e={}){let t=ref(null);return r(t,()=>c(e),b$1),t}var L=defineComponent({name:"ScrollDraw",props:{selector:{type:String},speed:{type:Number},fade:{type:Boolean},stagger:{type:Number},easing:{type:[String,Function]},direction:{type:String},trigger:{type:Object},onProgress:{type:Function},onStart:{type:Function},onComplete:{type:Function},once:{type:Boolean},debug:{type:Boolean}},setup(e,{slots:t}){let n=ref(null);return r(n,()=>{let o={};return e.selector!=null&&(o.selector=e.selector),e.speed!=null&&(o.speed=e.speed),e.fade!=null&&(o.fade=e.fade),e.stagger!=null&&(o.stagger=e.stagger),e.easing!=null&&(o.easing=e.easing),e.direction!=null&&(o.direction=e.direction),e.trigger!=null&&(o.trigger=e.trigger),e.once!=null&&(o.once=e.once),e.debug!=null&&(o.debug=e.debug),e.onProgress!=null&&(o.onProgress=e.onProgress),e.onStart!=null&&(o.onStart=e.onStart),e.onComplete!=null&&(o.onComplete=e.onComplete),o},b$1),()=>h("div",{ref:n},t.default?.())}});function V(e){let t=ref(null);return r(t,()=>c(e),a$1),t}var A=defineComponent({name:"ScrollAnimate",props:{options:{type:Object,required:true}},setup(e,{slots:t}){let n=ref(null);return r(n,()=>e.options,a$1),()=>h("div",{ref:n},t.default?.())}});function F(e){let t=ref(null);return r(t,()=>c(e),a$2),t}var G=defineComponent({name:"ScrollCounter",props:{to:{type:Number,required:true},from:{type:Number},format:{type:Function},easing:{type:[String,Function]},trigger:{type:Object},once:{type:Boolean},decimals:{type:Number},onComplete:{type:Function}},setup(e){let t=ref(null);return r(t,()=>{let n={to:e.to};return e.from!=null&&(n.from=e.from),e.format!=null&&(n.format=e.format),e.easing!=null&&(n.easing=e.easing),e.trigger!=null&&(n.trigger=e.trigger),e.once!=null&&(n.once=e.once),e.decimals!=null&&(n.decimals=e.decimals),e.onComplete!=null&&(n.onComplete=e.onComplete),n},a$2),()=>h("span",{ref:t})}});function j(e={}){let t=ref(null);return r(t,()=>c(e),a$3),t}var B=defineComponent({name:"ScrollVideo",props:{src:{type:String,required:true},options:{type:Object},muted:{type:Boolean,default:true},playsInline:{type:Boolean,default:true},class:{type:String}},setup(e){let t=ref(null);return r(t,()=>e.options??{},a$3),()=>h("video",{ref:t,src:e.src,muted:e.muted,playsinline:e.playsInline,preload:"auto",class:e.class})}});function N(e={}){let t=ref(null);return r(t,()=>c(e),a$4),t}var P=defineComponent({name:"ScrollText",props:{options:{type:Object},tag:{type:String,default:"p"}},setup(e,{slots:t}){let n=ref(null);return r(n,()=>e.options??{},a$4),()=>h(e.tag,{ref:n},t.default?.())}});export{H as a,L as b,V as c,A as d,F as e,G as f,j as g,B as h,N as i,P as j};
|
package/dist/chunk-KBFWDHF4.mjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import {a}from'./chunk-QJ4H2HW3.mjs';import {b}from'./chunk-LFSU6LR3.mjs';var t={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function y(e,o){if(typeof window>"u")return t;let n=typeof e=="string"?document.querySelector(e):e;return n?a(n,o):(b("scrollAnimate: element not found:",e),t)}function S(e,o={}){if(typeof window>"u")return t;let n=typeof e=="string"?document.querySelector(e):e;if(!n)return b("scrollParallax: element not found:",e),t;let{speed:c=.3,axis:a$1="y",easing:p="linear",trigger:m,onProgress:f}=o,l=n.getBoundingClientRect(),g=a$1==="x"?l.width:l.height,s=c*g;return a(n,{props:a$1==="x"?{transform:["translateX(0px)",`translateX(${-s}px)`]}:{transform:["translateY(0px)",`translateY(${-s}px)`]},trigger:m??{start:"top bottom",end:"bottom top"},easing:p,native:false,onProgress:f})}export{y as a,S as b};
|
package/dist/chunk-LINFV2GK.mjs
DELETED
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import {b as b$1,a as a$5}from'./chunk-OJFWQ6CU.mjs';import {a as a$2}from'./chunk-YWKPTYSG.mjs';import {a as a$1}from'./chunk-YZV4Z3EQ.mjs';import {a,c,b as b$3}from'./chunk-PEFR3ZB7.mjs';import {d}from'./chunk-DM6EDKWH.mjs';import {a as a$4,b as b$2}from'./chunk-BCV4RAIX.mjs';import {b,a as a$3}from'./chunk-LFSU6LR3.mjs';var ct={sketch:{easing:"ease-in",stagger:.1,speed:.9,fade:false},reveal:{easing:"ease-out",fade:true,speed:1.2,once:true},typewriter:{easing:"linear",stagger:.05,speed:1.5},cinematic:{easing:"ease-in-out",fade:true,speed:.75},spring:{easing:"spring",speed:1.1}};var Tt=0;function kt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")&&CSS.supports("view-timeline-name: --x")}function ut(r,b){let p="";try{p=getComputedStyle(r).getPropertyValue(b).trim();}catch{}return p||(r.getAttribute(b)??"").trim()}var mt=new Set(["","none","transparent","rgba(0, 0, 0, 0)"]);function St(r){if(!a$3)return;let b$1=ut(r,"stroke");if(!b$1||b$1==="none"){b("Element has no stroke \u2014 path will not be visible.",r);return}let p=(r.getAttribute("fill")??"").trim();p&&!mt.has(p)&&!mt.has(ut(r,"fill"))&&b("Element has a fill \u2014 it may obscure the stroke animation.",r);}function At(r,b,p){let E=document.createElement("div");E.setAttribute("data-svg-scroll-draw-debug",""),E.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 R(){let D=p==="x"?window.scrollX:window.scrollY,O=r-D,V=b-D,C=p==="x";E.innerHTML=`
|
|
2
|
-
<div style="position:absolute;${C?`left:${O}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${O}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:${V}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${V}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(E),window.addEventListener("scroll",R,{passive:true}),R(),{el:E,destroy(){window.removeEventListener("scroll",R),E.remove();}}}var pt=/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,dt=/[MmLlHhVvCcSsQqTtAaZz]/g;function xt(r,b$1,p){if(!a$3)return;let E=(r.match(dt)??[]).join("").toUpperCase(),R=(b$1.match(dt)??[]).join("").toUpperCase(),D=(r.match(pt)??[]).length,O=(b$1.match(pt)??[]).length;if(E!==R){b(`morphTo: command sequence differs (${E||"\u2205"} \u2192 ${R||"\u2205"}). Interpolation is coordinate-for-coordinate, so the result will not reach the target shape. Redraw both paths with the same commands.`,p);return}D!==O&&b(`morphTo: coordinate count differs (${D} \u2192 ${O}). Extra coordinates are ignored and missing ones hold their start value, so the result will not reach the target shape.`,p);}function Ge(r,b,p){let E=(b.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),R=0;return r.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,D=>{let O=parseFloat(D),V=E[R++]??O;return String(+(O+(V-O)*p).toFixed(4))})}function It(r,b$4={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:p,...E}=b$4,R=p?{...ct[p],...E}:E,D=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:O="path, polyline, line, polygon, rect, circle",speed:V=1,fade:C=false,easing:me="linear",trigger:we={},stagger:be=0,direction:d$1="forward",once:Z=false,debug:yt=false,axis:J="y",scrollContainer:Oe,autoReverse:Ee=false,delay:pe=0,strokeColor:K,strokeWidth:ee,fillOpacity:te,waypoints:re,velocityScale:de=false,threshold:Be=0,rootMargin:_e="0px",repeat:se=0,repeatDelay:Ce=0,morphTo:P,clip:Fe,autoplay:ht=false,duration:gt=1e3,native:vt=true,onProgress:ye,onStart:$e,onComplete:ae,onEnter:Ue,onLeave:je,onEnterBack:Xe,onLeaveBack:Ye}=R,U=Fe===true?"left":typeof Fe=="string"?Fe:false,oe=typeof me=="function"?me:d[me]??d.linear,Qe=a(we.start??"top bottom"),Ze=a(we.end??"bottom top"),H=typeof Oe=="string"?document.querySelector(Oe):Oe??null,I=Array.isArray(K)?K[0]:null,$=Array.isArray(K)?K[1]:typeof K=="string"?K:null,A=Array.isArray(ee)?ee[0]:null,T=Array.isArray(ee)?ee[1]:typeof ee=="number"?ee:null,x=Array.isArray(te)?te[0]:null,k=Array.isArray(te)?te[1]:typeof te=="number"?te:null;function ne(e){let t=e*100;switch(U){case "right":return `inset(0 0 0 ${100-t}%)`;case "top":return `inset(0 0 ${100-t}% 0)`;case "bottom":return `inset(${100-t}% 0 0 0)`;case "center":return `circle(${e*150}% at 50% 50%)`;default:return `inset(0 ${100-t}% 0 0)`}}let m=U?[]:Array.from(r.querySelectorAll(O)),l=[],L=[],z=0,G=0,g=false,F=false,v=0,le=false,j=-1,he=[],Te=-1,w=false,W=0,B=0,X,Ne=null;function Je(){Ne?.destroy(),Ne=null;}let Y=new Set,Ke=NaN,Q=true,ke=-1,et=performance.now(),fe=NaN;function Re(){return H?J==="x"?H.scrollLeft:H.scrollTop:J==="x"?window.scrollX:window.scrollY}function tt(){return H?J==="x"?H.clientWidth:H.clientHeight:J==="x"?window.innerWidth:window.innerHeight}function rt(){let e=a$2(r,H,J);return c(e,e.scroll,tt(),Qe,Ze)}function st(){(({tStart:z,tEnd:G}=rt())),yt&&a$3&&(Je(),Ne=At(z,G,J));}function He(e,t=rt){a$4(r,{type:"draw",getProgress:()=>e.getProgress(),getTrigger:t});let n=e.destroy;return e.destroy=()=>{n.call(e),b$2(r);},e}function wt(e,t){if(r.style.setProperty("--scroll-draw-progress",String(e)),U){let n=t==="reverse"?1-e:e;r.style.clipPath=ne(n);return}m.forEach((n,y)=>{n.style.strokeDashoffset=t==="reverse"?`${l[y]*e}`:`${l[y]*(1-e)}`,C&&(n.style.opacity=t==="reverse"?`${1-e}`:`${e}`),I&&$?n.style.stroke=a$5(I,$,e):$&&(n.style.stroke=$),A!==null&&T!==null?n.style.strokeWidth=`${A+(T-A)*e}`:T!==null&&(n.style.strokeWidth=`${T}`),x!==null&&k!==null?n.style.fillOpacity=`${x+(k-x)*e}`:k!==null&&(n.style.fillOpacity=`${k}`),P&&n.tagName.toLowerCase()==="path"&&L[y]&&n.setAttribute("d",Ge(L[y],P,e));});}function Se(){if(r.style.setProperty("--scroll-draw-progress","0"),U){r.style.clipPath=ne(0);return}m.forEach((e,t)=>{e.style.strokeDasharray=`${l[t]}`,e.style.strokeDashoffset=d$1==="reverse"?"0":`${l[t]}`,C?e.style.opacity=d$1==="reverse"?"1":"0":e.style.opacity="",I&&(e.style.stroke=I),A!==null&&(e.style.strokeWidth=`${A}`),x!==null&&(e.style.fillOpacity=`${x}`),P&&e.tagName.toLowerCase()==="path"&&L[t]&&e.setAttribute("d",L[t]);});}if(m.forEach(e=>{St(e);let t=a$1(e);l.push(t);let n=e.tagName.toLowerCase()==="path";n?L.push(e.getAttribute("d")??""):L.push(""),P&&(n?xt(L[L.length-1],P,e):b(`morphTo only applies to <path> elements \u2014 ignored on <${e.tagName}>.`,e)),D?(e.style.strokeDasharray=`${t}`,e.style.strokeDashoffset=d$1==="reverse"?`${t}`:"0",C&&(e.style.opacity="1"),$&&(e.style.stroke=$),T!==null&&(e.style.strokeWidth=`${T}`),k!==null&&(e.style.fillOpacity=`${k}`),P&&e.tagName.toLowerCase()==="path"&&e.setAttribute("d",P)):(e.style.strokeDasharray=`${t}`,e.style.strokeDashoffset=d$1==="reverse"?"0":`${t}`,C?e.style.opacity=d$1==="reverse"?"1":"0":e.style.opacity="",I&&(e.style.stroke=I),A!==null&&(e.style.strokeWidth=`${A}`),x!==null&&(e.style.fillOpacity=`${x}`));}),U){if(D)return r.style.clipPath=ne(1),ae?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};r.style.clipPath=ne(0);}else if(D)return ae?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};let ot=typeof me=="string"?b$1(me):null;function bt(){return !(vt===false||!kt()||!m.length||!ot||U||J!=="y"||H||V!==1||be!==0||Z||Ee||de!==false||P||re||se||pe>0||ye||$e||ae||Ue||je||Xe||Ye||K!=null||ee!=null||te!=null||(we.start??"top bottom").trim()!=="top bottom"||(we.end??"bottom top").trim()!=="bottom top")}function Et(){let e=++Tt,t=`svg-scroll-draw-${e}`,n=`svg-scroll-draw-host-${e}`,y=`--svg-scroll-draw-${e}`,_=d$1==="reverse"?"0":"var(--ssd-len)",q=d$1==="reverse"?"var(--ssd-len)":"0",N=`stroke-dashoffset:${_};`,i=`stroke-dashoffset:${q};`;C&&(N+=`opacity:${d$1==="reverse"?1:0};`,i+=`opacity:${d$1==="reverse"?0:1};`);let a=document.createElement("style");a.setAttribute("data-svg-scroll-draw",""),a.textContent=`@keyframes ${t}{from{${N}}to{${i}}}.${n}{view-timeline-name:${y};view-timeline-axis:block;}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${ot};animation-fill-mode:both;animation-timeline:${y};animation-range:cover 0% cover 100%;}`,document.head.appendChild(a),r.classList.add(n);function h(s,u){s.style.setProperty("--ssd-len",String(l[u])),s.style.strokeDasharray=`${l[u]}`,s.style.strokeDashoffset="",s.style.opacity="",s.style.animationPlayState="",s.classList.add(t);}m.forEach(h);let o=false,f=-1;function c$1(){if(f>=0)return f;let s=r.getBoundingClientRect(),{tStart:u,tEnd:M}=c({top:s.top,height:s.height},Re(),tt(),Qe,Ze);return oe(b$3(Re(),u,M,V))}return {destroy(){r.classList.remove(n),m.forEach(s=>{s.classList.remove(t),s.style.removeProperty("--ssd-len"),s.style.animationPlayState="";}),a.remove();},replay(){o=false,f=-1,m.forEach(h);},pause(){o=true,m.forEach(s=>{s.style.animationPlayState="paused";});},resume(){o&&(o=false,m.forEach(s=>{s.style.animationPlayState="running";}));},seek(s){let u=Math.min(1,Math.max(0,s));f=u,o=true,m.forEach((M,S)=>{M.classList.remove(t),M.style.strokeDashoffset=d$1==="reverse"?`${l[S]*u}`:`${l[S]*(1-u)}`,C&&(M.style.opacity=d$1==="reverse"?`${1-u}`:`${u}`);});},getProgress(){return c$1()},refresh(){m.forEach((s,u)=>{l[u]=a$1(s),s.style.setProperty("--ssd-len",String(l[u])),s.style.strokeDasharray=`${l[u]}`;});}}}if(bt())return He(Et());function $t(){let e=Math.max(1,gt),t=0,n=0,y=false;function _(o){let f=true;if(U){let c=Math.min(1,Math.max(0,o/e)),s=oe(c);W=s,r.style.setProperty("--scroll-draw-progress",String(s)),r.style.clipPath=ne(d$1==="reverse"?1-s:s),ye?.(s),c<1&&(f=false);}else m.forEach((c,s)=>{let u=s*be*e,M=Math.min(1,Math.max(0,(o-u)/e)),S=oe(M);c.style.strokeDashoffset=d$1==="reverse"?`${l[s]*S}`:`${l[s]*(1-S)}`,C&&(c.style.opacity=d$1==="reverse"?`${1-S}`:`${S}`),I&&$?c.style.stroke=a$5(I,$,S):$&&(c.style.stroke=$),A!==null&&T!==null?c.style.strokeWidth=`${A+(T-A)*S}`:T!==null&&(c.style.strokeWidth=`${T}`),x!==null&&k!==null?c.style.fillOpacity=`${x+(k-x)*S}`:k!==null&&(c.style.fillOpacity=`${k}`),P&&c.tagName.toLowerCase()==="path"&&L[s]&&c.setAttribute("d",Ge(L[s],P,S)),s===0&&(W=S,ye?.(S),r.style.setProperty("--scroll-draw-progress",String(S))),M<1&&(f=false);});if(re){let c=Math.min(1,Math.max(0,o/e)),s=oe(c);for(let u in re){let M=parseFloat(u);s>=M&&!Y.has(M)&&(Y.add(M),re[u]?.());}}return f}function q(o){if(w)return;let f=o-t;F||(F=true,$e?.());let c=_(f);if(c&&!g){g=true,_(e*(1+Math.max(0,m.length-1)*be)),ae?.(),B<(se==="infinite"?1/0:se??0)&&(B++,X=setTimeout(()=>{t=performance.now(),F=false,g=false,Y.clear(),Se(),v=requestAnimationFrame(q);},Ce));return}c||(v=requestAnimationFrame(q));}function N(){cancelAnimationFrame(v),clearTimeout(X),t=performance.now(),n=0,w=false,F=false,g=false,B=0,y=true,W=0,Y.clear(),Se(),v=requestAnimationFrame(q);}let i=new IntersectionObserver(o=>{o.forEach(f=>{f.isIntersecting&&!(Z&&g)?N():!f.isIntersecting&&!Z&&!g&&(cancelAnimationFrame(v),clearTimeout(X),y=false);});},{root:H??null,threshold:Be,rootMargin:_e}),a;function h(){clearTimeout(a),a=setTimeout(()=>{m.forEach((o,f)=>{l[f]=a$1(o),o.style.strokeDasharray=`${l[f]}`;});},150);}return window.addEventListener("resize",h),window.addEventListener("orientationchange",h),pe>0?setTimeout(()=>i.observe(r),pe):i.observe(r),{destroy(){cancelAnimationFrame(v),clearTimeout(X),i.disconnect(),window.removeEventListener("resize",h),window.removeEventListener("orientationchange",h),clearTimeout(a);},replay(){B=0,N();},pause(){w||!y||(w=true,n=performance.now()-t,cancelAnimationFrame(v));},resume(){w&&(w=false,y=true,t=performance.now()-n,v=requestAnimationFrame(q));},seek(o){let f=Math.min(1,Math.max(0,o));W=f,w=true,n=f*e,t=performance.now()-n,cancelAnimationFrame(v),_(n);},getProgress(){return W},refresh(){clearTimeout(a),m.forEach((o,f)=>{l[f]=a$1(o),o.style.strokeDasharray=`${l[f]}`;});}}}if(ht)return He($t());st();function Ae(){if(!le||w)return;let e=performance.now(),t=Re();if(!Q&&de===false&&t===Ke){v=requestAnimationFrame(Ae);return}Q=false,Ke=t;let n=V;if(de!==false){let i=e-et,a=i>0?Math.abs(t-(ke<0?t:ke))/i:0;n=V*Math.max(.2,1+a*(typeof de=="number"?de:1)*.04);}ke=t,et=e;let y=Ee?Te===-1||t>=Te?"forward":"reverse":d$1;Te=t;let _=G-z,q=true,N=_===0?0:(t-z)/_;if(isNaN(fe)||(fe<=0&&N>0?Ue?.():fe>0&&N<=0&&Ye?.(),fe<1&&N>=1?je?.():fe>=1&&N<1&&Xe?.()),fe=N,U){let i=oe(b$3(t,z,G,n));Z&&!Ee&&(j=Math.max(j,i),i=j),W=i,r.style.setProperty("--scroll-draw-progress",String(i));let a=y==="reverse"?1-i:i;r.style.clipPath=ne(a),ye?.(i),!F&&b$3(t,z,G,n)>0&&(F=true,$e?.()),i>=1&&!g?(g=true,ae?.(),B<(se==="infinite"?1/0:se??0)&&(B++,X=setTimeout(()=>{j=-1,F=false,g=false,r.style.clipPath=ne(0);},Ce))):i<1&&!Z&&(g=false),v=requestAnimationFrame(Ae);return}if(m.forEach((i,a)=>{let h=a*be*_,o=oe(b$3(t,z+h,G+h,n));Z&&!Ee&&(o=he[a]=Math.max(he[a]??j,o)),W=o,i.style.strokeDashoffset=y==="reverse"?`${l[a]*o}`:`${l[a]*(1-o)}`,C&&(i.style.opacity=y==="reverse"?`${1-o}`:`${o}`),I&&$?i.style.stroke=a$5(I,$,o):$&&(i.style.stroke=$),A!==null&&T!==null?i.style.strokeWidth=`${A+(T-A)*o}`:T!==null&&(i.style.strokeWidth=`${T}`),x!==null&&k!==null?i.style.fillOpacity=`${x+(k-x)*o}`:k!==null&&(i.style.fillOpacity=`${k}`),P&&i.tagName.toLowerCase()==="path"&&L[a]&&i.setAttribute("d",Ge(L[a],P,o)),a===0&&(ye?.(o),r.style.setProperty("--scroll-draw-progress",String(o))),o<1&&(q=false);}),re){let i=oe(b$3(t,z,G,n));for(let a in re){let h=parseFloat(a);i>=h&&!Y.has(h)&&(Y.add(h),re[a]?.());}}!F&&b$3(t,z,G,n)>0&&(F=true,$e?.()),q&&!g?(g=true,ae?.(),B<(se==="infinite"?1/0:se??0)&&(B++,X=setTimeout(()=>{j=-1,he=[],F=false,g=false,Y.clear(),Se(),Q=true;},Ce))):!q&&!Z&&(g=false),v=requestAnimationFrame(Ae);}let Ie=false;function xe(){Ie||(Ie=true,v=requestAnimationFrame(function(){Ae();}));}function Pe(){Ie=false,cancelAnimationFrame(v);}let ze=new IntersectionObserver(e=>{e.forEach(t=>{le=t.isIntersecting,le&&!w?(Q=true,xe()):Pe();});},{root:H??null,threshold:Be,rootMargin:_e});function nt(){m.forEach((e,t)=>{l[t]=a$1(e),e.style.strokeDasharray=`${l[t]}`;}),st(),Q=true;}let Le;function ge(){clearTimeout(Le),Le=setTimeout(nt,150);}window.addEventListener("resize",ge),window.addEventListener("orientationchange",ge);let ve;return typeof ResizeObserver<"u"&&(ve=new ResizeObserver(()=>ge()),ve.observe(document.body),ve.observe(document.documentElement),ve.observe(r)),pe>0?setTimeout(()=>ze.observe(r),pe):ze.observe(r),He({destroy(){cancelAnimationFrame(v),clearTimeout(X),Pe(),ze.disconnect(),ve?.disconnect(),window.removeEventListener("resize",ge),window.removeEventListener("orientationchange",ge),clearTimeout(Le),Je();},replay(){j=-1,he=[],Te=-1,ke=-1,F=false,g=false,B=0,w=false,W=0,Y.clear(),clearTimeout(X),Se(),Q=true,le&&xe();},pause(){w=true,Pe();},resume(){w&&(w=false,Q=true,le&&xe());},seek(e){let t=Math.min(1,Math.max(0,e));W=t,j=t,he=[],w=true,Pe(),wt(t,d$1),Q=true;},getProgress(){return W},refresh(){clearTimeout(Le),nt(),le&&!w&&xe();}},()=>({tStart:z,tEnd:G}))}export{ct as a,It as b};
|
package/dist/chunk-PEFR3ZB7.mjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import {a as a$1}from'./chunk-4DOJSIEQ.mjs';function c(t="top bottom"){let e=t.trim();if(/^\d+(\.\d+)?%$/.test(e))return {element:"top",viewport:e};let[r="top",n="bottom"]=e.split(/\s+/).filter(Boolean);return {element:r,viewport:n}}function o(t,e,r,n){switch(n){case "top":return t+r;case "center":return t+r+e/2;case "bottom":return t+r+e;default:return t+r}}function i(t,e){if(/^\d+(\.\d+)?%$/.test(t))return e*(parseFloat(t)/100);switch(t){case "top":return 0;case "center":return e/2;case "bottom":return e;default:return e}}function a(t,e,r,n){return r===e?0:a$1((t-e)/(r-e)*n,0,1)}function f(t,e,r,n,u){let s=o(t.top,t.height,e,n.element)-i(n.viewport,r),b=o(t.top,t.height,e,u.element)-i(u.viewport,r);return {tStart:s,tEnd:b}}export{c as a,a as b,f as c};
|
package/dist/chunk-QJ4H2HW3.mjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import {b,a as a$3}from'./chunk-OJFWQ6CU.mjs';import {a as a$2}from'./chunk-YWKPTYSG.mjs';import {a,b as b$2,c}from'./chunk-PEFR3ZB7.mjs';import {d}from'./chunk-DM6EDKWH.mjs';import {a as a$1,b as b$3}from'./chunk-BCV4RAIX.mjs';import {b as b$1}from'./chunk-LFSU6LR3.mjs';function Le(t){return t.startsWith("#")||t.startsWith("rgb")||t.startsWith("hsl")}function ue(t){let c=[],l=/([\w]+)\(([^)]*)\)/g,s;for(;(s=l.exec(t))!==null;){let a=[],o=[],m=s[2].trim();if(m)for(let i of m.split(/[\s,]+/)){let r=i.match(/^([-+]?[\d.eE]+)(.*)$/);a.push(r?parseFloat(r[1]):0),o.push(r?r[2]:"");}c.push({fn:s[1],nums:a,units:o});}return c}function Pe(t,c,l){let s=ue(t),a=ue(c);return s.length===0||s.length!==a.length?l<1?t:c:s.map((o,m)=>{let i=a[m];return o.fn!==i.fn||o.nums.length!==i.nums.length?l<1?`${o.fn}(${o.nums.map((r,f)=>`${r}${o.units[f]}`).join(", ")})`:`${i.fn}(${i.nums.map((r,f)=>`${r}${i.units[f]}`).join(", ")})`:`${o.fn}(${o.nums.map((r,f)=>`${r+(i.nums[f]-r)*l}${o.units[f]}`).join(", ")})`}).join(" ")}function fe(t,c,l){if(typeof t=="number"&&typeof c=="number")return String(t+(c-t)*l);let s=String(t),a=String(c);if(Le(s))return a$3(s,a,l);if(s.includes("("))return Pe(s,a,l);let o=s.match(/^([-+]?[\d.]+)(.*)$/),m=a.match(/^([-+]?[\d.]+)(.*)$/);if(o&&m){let i=parseFloat(o[1]),r=parseFloat(m[1]);return `${i+(r-i)*l}${o[2]||m[2]}`}return l<1?s:a}function $e(t){return t.replace(/([A-Z])/g,c=>`-${c.toLowerCase()}`)}var Ae=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),Me=0,pe="--scroll-draw-progress";function xe(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function Ve(t,c$1){let l={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return l;let{props:s,trigger:a$3={},easing:o="ease-out",speed:m=1,once:i=false,axis:r="y",scrollContainer:f,native:ge=true,velocityScale:L=false,respectReducedMotion:de=true,triggerElement:ye,onProgress:X,onComplete:N,onEnter:Y,onLeave:U,onEnterBack:Z,onLeaveBack:J}=c$1,he=de&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,I=typeof o=="function"?o:d[o]??d["ease-out"],K=a(a$3.start??"top bottom"),Q=a(a$3.end??"bottom top"),ee=ye??t,p=typeof f=="string"?document.querySelector(f):f??null,d$1=Object.entries(s).map(([e,n])=>({prop:$e(e),from:Array.isArray(n)?n[0]:"",to:Array.isArray(n)?n[1]:n}));function ve(){let e=window.getComputedStyle(t);for(let n of d$1)n.from===""&&(n.from=e.getPropertyValue(n.prop).trim()||"0");}function be(){for(let e of d$1)t.style.setProperty(e.prop,String(e.to));}let te=new Map;for(let e of [...d$1.map(n=>n.prop),pe])te.set(e,t.style.getPropertyValue(e));function R(){for(let[e,n]of te)n?t.style.setProperty(e,n):t.style.removeProperty(e);}if(he)return be(),N?.(),{...l,destroy:R,getProgress:()=>1};ve();let ne=typeof o=="string"?b(o):null;function Ee(){if(!ge||!xe()||!ne||r!=="y"||p||ee!==t||i||m!==1||X||N||Y||U||Z||J||L!==false||(a$3.start??"top bottom").trim()!=="top bottom"||(a$3.end??"bottom top").trim()!=="bottom top")return false;for(let e of d$1)if(!Ae.has(e.prop))return false;return true}function we(){let e=`ssd-a-${++Me}`,n=d$1.map(u=>`${u.prop}:${u.from}`).join(";"),x=d$1.map(u=>`${u.prop}:${u.to}`).join(";"),T=document.createElement("style");T.setAttribute("data-ssd-animate",""),T.textContent=`@keyframes ${e}{from{${n}}to{${x}}}.${e}{animation-name:${e};animation-duration:auto;animation-timing-function:${ne};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(T),t.classList.add(e);let g=()=>r==="x"?window.scrollX:window.scrollY,C=()=>r==="x"?window.innerWidth:window.innerHeight,H=()=>{let u=t.getBoundingClientRect();return c({top:u.top,height:u.height},g(),C(),K,Q)};a$1(t,{type:"animate",getProgress:()=>O.getProgress(),getTrigger:H});let O={destroy(){t.classList.remove(e),T.remove(),t.style.animationPlayState="",R(),b$3(t);},replay(){t.classList.remove(e),t.offsetWidth,t.classList.add(e);},pause(){t.style.animationPlayState="paused";},resume(){t.style.animationPlayState="";},seek(u){let B=Math.min(1,Math.max(0,u));t.classList.remove(e);for(let W of d$1)t.style.setProperty(W.prop,fe(W.from,W.to,B));},getProgress(){let{tStart:u,tEnd:B}=H();return I(b$2(g(),u,B,m))}};return O}if(Ee())return we();let y=0,h=0,v=0,P=false,b$4=false,w=-1,S=0,$=false,E=NaN,k=-1,re=0,oe=()=>p?r==="x"?p.scrollLeft:p.scrollTop:r==="x"?window.scrollX:window.scrollY,Se=()=>p?r==="x"?p.clientWidth:p.clientHeight:r==="x"?window.innerWidth:window.innerHeight;function se(){let e=a$2(ee,p,r),n=c(e,e.scroll,Se(),K,Q);y=n.tStart,h=n.tEnd;}function A(e){t.style.setProperty(pe,String(e));for(let n of d$1)t.style.setProperty(n.prop,fe(n.from,n.to,e));X?.(e);}function Te(e){if(isNaN(E)){E=e;return}E<=0&&e>0?Y?.():E>0&&e<=0&&J?.(),E<1&&e>=1?U?.():E>=1&&e<1&&Z?.(),E=e;}function V(){if(!P||b$4)return;let e=performance.now(),n=oe(),x=m;if(L!==false){let C=e-re,H=C>0?Math.abs(n-(k<0?n:k))/C:0;x=m*Math.max(.2,1+H*(typeof L=="number"?L:1)*.04);}k=n,re=e;let T=h===y?0:(n-y)/(h-y);Te(T);let g=I(b$2(n,y,h,x));i&&(w=Math.max(w,g),g=w),S=g,A(g),g>=1&&!$?($=true,N?.()):g<1&&!i&&($=false),v=requestAnimationFrame(V);}se(),h===y&&b$1("scrollAnimate: the trigger window has zero length (start and end resolve to the same scroll position), so this element will never animate. If the target is inside a position:sticky stage, measure the trigger from the container that holds the scroll room via `triggerElement`.",t);{let e=I(b$2(oe(),y,h,m));i&&e>0&&(w=e),S=e,A(e);}let ie=new IntersectionObserver(e=>{e.forEach(n=>{P=n.isIntersecting,P&&!b$4?v=requestAnimationFrame(V):cancelAnimationFrame(v);});},{root:p??null}),z;function M(){clearTimeout(z),z=setTimeout(se,150);}return window.addEventListener("resize",M),window.addEventListener("orientationchange",M),ie.observe(t),a$1(t,{type:"animate",getProgress:()=>S,getTrigger:()=>({tStart:y,tEnd:h})}),{destroy(){cancelAnimationFrame(v),ie.disconnect(),window.removeEventListener("resize",M),window.removeEventListener("orientationchange",M),clearTimeout(z),R(),b$3(t);},replay(){w=-1,$=false,S=0,b$4=false,A(0);},pause(){b$4=true,cancelAnimationFrame(v);},resume(){b$4&&(b$4=false,P&&(v=requestAnimationFrame(V)));},seek(e){let n=Math.min(1,Math.max(0,e));S=n,w=n,b$4=true,cancelAnimationFrame(v),A(n);},getProgress(){return S}}}export{Ve as a};
|
package/dist/chunk-SNCRC6BA.mjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import {a,c,b as b$2}from'./chunk-PEFR3ZB7.mjs';import {d}from'./chunk-DM6EDKWH.mjs';import {a as a$1,b as b$1}from'./chunk-BCV4RAIX.mjs';import {b}from'./chunk-LFSU6LR3.mjs';function R(n){let i=n.textContent??"";return n.textContent="",i.split(/(\s+)/).filter(Boolean).map(t=>{let e=document.createElement("span");return e.setAttribute("aria-hidden","true"),/^\s+$/.test(t)?(e.textContent=t,e.style.whiteSpace="pre"):(e.textContent=t,e.style.display="inline-block"),n.appendChild(e),/^\s+$/.test(t)?null:e}).filter(t=>t!==null)}function X(n){let i=n.textContent??"";return n.textContent="",i.split("").map(t=>{let e=document.createElement("span");return e.setAttribute("aria-hidden","true"),e.textContent=t,t===" "?e.style.whiteSpace="pre":e.style.display="inline-block",n.appendChild(e),t===" "?null:e}).filter(t=>t!==null)}function q(n){let i=R(n),t=new Map;for(let s of i){let o=s.offsetTop;t.has(o)||t.set(o,[]),t.get(o).push(s);}let e=[],c=Array.from(t.keys()).sort((s,o)=>s-o);for(let s of c){let o=t.get(s),l=document.createElement("span");l.setAttribute("aria-hidden","true"),l.style.display="inline-block",o.forEach((y,h)=>{let m=y.nextElementSibling;l.appendChild(y),h<o.length-1&&m&&m.style.whiteSpace==="pre"&&l.appendChild(m);}),e.push(l);}return n.textContent="",e.forEach((s,o)=>{n.appendChild(s),o<e.length-1&&n.appendChild(document.createTextNode(" "));}),e}function J(n,i,t,e){if(t<=1||e===0)return n;let c=(t-1)*e,s=i*e,o=s+(1-c);return o<=s?n>=s?1:0:Math.min(1,Math.max(0,(n-s)/(o-s)))}function K(n,i){let t=[];if(i?.y!==void 0&&t.push(`translateY(${i.y*(1-n)}px)`),i?.x!==void 0&&t.push(`translateX(${i.x*(1-n)}px)`),i?.rotate!==void 0&&t.push(`rotate(${i.rotate*(1-n)}deg)`),i?.scale!==void 0){let e=i.scale+(1-i.scale)*n;t.push(`scale(${e})`);}return t.join(" ")||""}var D={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function ne(n,i={}){if(typeof window>"u")return D;let t=typeof n=="string"?document.querySelector(n):n;if(!t)return b("scrollText: element not found:",n),D;let e=t,{split:c$1="words",stagger:s=.04,easing:o="ease-out",from:l={opacity:0,y:24},trigger:y={},once:h=true,onComplete:m}=i,B=window.matchMedia("(prefers-reduced-motion: reduce)").matches,Y=typeof o=="function"?o:d[o]??d["ease-out"],_=a(y.start??"top 85%"),j=a(y.end??"top 40%"),S=e.innerHTML;e.setAttribute("aria-label",e.textContent??"");let d$1;c$1==="chars"?d$1=X(e):c$1==="lines"?d$1=q(e):d$1=R(e);let G=d$1.length;function U(r,a){l?.opacity!==void 0&&(r.style.opacity=String(l.opacity+(1-l.opacity)*a));let w=K(a,l);w&&(r.style.transform=w);}function f(r){e.style.setProperty("--scroll-draw-progress",String(r)),d$1.forEach((a,w)=>{let W=Y(J(r,w,G,s));U(a,W);});}if(B)return f(1),m?.(),{destroy(){e.innerHTML=S,e.removeAttribute("aria-label");},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};f(0);let C=0,M=0,p=0,T=false,u=false,b$3=-1,g=0,E=false,I=()=>window.scrollY,V=()=>window.innerHeight;function F(){let r=e.getBoundingClientRect(),a=c({top:r.top,height:r.height},I(),V(),_,j);C=a.tStart,M=a.tEnd;}function L(){if(!T||u)return;let r=b$2(I(),C,M,1);h&&(b$3=Math.max(b$3,r),r=b$3),g=r,f(r),r>=1&&!E?(E=true,m?.()):r<1&&!h&&(E=false),p=requestAnimationFrame(L);}F();let P=new IntersectionObserver(r=>{r.forEach(a=>{T=a.isIntersecting,T&&!u?p=requestAnimationFrame(L):cancelAnimationFrame(p);});}),v;function x(){clearTimeout(v),v=setTimeout(()=>{if(c$1==="lines"){let r=g;e.innerHTML=S,e.setAttribute("aria-label",e.textContent??""),d$1=q(e),f(r);}F();},150);}return window.addEventListener("resize",x),window.addEventListener("orientationchange",x),P.observe(e),a$1(e,{type:"text",getProgress:()=>g,getTrigger:()=>({tStart:C,tEnd:M})}),{destroy(){cancelAnimationFrame(p),P.disconnect(),window.removeEventListener("resize",x),window.removeEventListener("orientationchange",x),clearTimeout(v),e.innerHTML=S,e.removeAttribute("aria-label"),b$1(e);},replay(){b$3=-1,E=false,g=0,u=false,f(0);},pause(){u=true,cancelAnimationFrame(p);},resume(){u&&(u=false,T&&(p=requestAnimationFrame(L)));},seek(r){let a=Math.min(1,Math.max(0,r));g=a,b$3=a,u=true,cancelAnimationFrame(p),f(a);},getProgress(){return g}}}export{ne as a};
|
package/dist/chunk-TIRZOSQ4.mjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import {a,c,b as b$2}from'./chunk-PEFR3ZB7.mjs';import {d}from'./chunk-DM6EDKWH.mjs';import {a as a$1,b as b$1}from'./chunk-BCV4RAIX.mjs';import {b}from'./chunk-LFSU6LR3.mjs';var _={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function te(c$1,h={}){if(typeof window>"u")return _;let E=typeof c$1=="string"?document.querySelector(c$1):c$1;if(!E||E.tagName.toLowerCase()!=="video")return b("scrollVideo: <video> element not found:",c$1),_;let t=E,{trigger:P={},easing:b$3="linear",once:z=false,axis:m="y",preload:B="auto",triggerElement:G,onReady:C,onComplete:W,onProgress:X}=h,Y=G??t,I=window.matchMedia("(prefers-reduced-motion: reduce)").matches,j=typeof b$3=="function"?b$3:d[b$3]??d.linear,J=a(P.start??"top top"),K=a(P.end??"bottom top");t.pause(),t.hasAttribute("preload")||(t.preload=B);let V=h.from??0,T=h.to,u=0,f=0,n=0,s=false,o=false,a$2=-1,l=0,g=false,i=false,M=()=>m==="x"?window.scrollX:window.scrollY,Q=()=>m==="x"?window.innerWidth:window.innerHeight;function A(){let e=Y.getBoundingClientRect(),r=m==="x"?e.left:e.top,d=m==="x"?e.width:e.height,q=c({top:r,height:d},M(),Q(),J,K);u=q.tStart,f=q.tEnd,i&&f===u&&b("scrollVideo: zero-length trigger window, so it never scrubs. In a sticky stage, set triggerElement.",t);}let p=NaN;function w(e){if(!i)return;let r=T??t.duration??0,d=V+(r-V)*e;d!==p&&(p=d,t.currentTime=d),t.style.setProperty("--scroll-draw-progress",String(e)),X?.(e);}function v(){if(!s||o||!i||I)return;let e=j(b$2(M(),u,f,1));z&&(a$2=Math.max(a$2,e),e=a$2),l=e,w(e),e>=1&&!g?(g=true,W?.()):e<1&&!z&&(g=false),n=requestAnimationFrame(v);}function S(){if(i=true,T===void 0&&(T=t.duration),I){w(1),C?.();return}A(),C?.(),s&&!o&&(n=requestAnimationFrame(v));}t.readyState>=1?S():t.addEventListener("loadedmetadata",S,{once:true}),i||A();let R=new IntersectionObserver(e=>{e.forEach(r=>{s=r.isIntersecting,s&&!o&&i?n=requestAnimationFrame(v):cancelAnimationFrame(n);});}),x;function y(){clearTimeout(x),x=setTimeout(A,150);}return window.addEventListener("resize",y),window.addEventListener("orientationchange",y),R.observe(t),a$1(t,{type:"video",getProgress:()=>l,getTrigger:()=>({tStart:u,tEnd:f})}),{destroy(){cancelAnimationFrame(n),R.disconnect(),t.removeEventListener("loadedmetadata",S),window.removeEventListener("resize",y),window.removeEventListener("orientationchange",y),clearTimeout(x),b$1(t);},replay(){a$2=-1,g=false,l=0,o=false,p=NaN,w(0);},pause(){o=true,cancelAnimationFrame(n);},resume(){o&&(o=false,s&&i&&(n=requestAnimationFrame(v)));},seek(e){let r=Math.min(1,Math.max(0,e));l=r,a$2=r,o=true,cancelAnimationFrame(n),p=NaN,w(r);},getProgress(){return l}}}export{te as a};
|