svg-scroll-draw 0.1.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +178 -0
- package/dist/cdn/svg-scroll-draw.global.js +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.mts +6 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.mjs +1 -1
- package/dist/react/index.cjs +1 -1
- package/dist/react/index.d.mts +6 -0
- package/dist/react/index.d.ts +6 -0
- package/dist/react/index.mjs +1 -1
- package/dist/vue/index.cjs +1 -0
- package/dist/vue/index.d.mts +88 -0
- package/dist/vue/index.d.ts +88 -0
- package/dist/vue/index.mjs +1 -0
- package/package.json +56 -7
package/README.md
ADDED
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
# svg-scroll-draw
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/svg-scroll-draw)
|
|
4
|
+
[](https://www.npmjs.com/package/svg-scroll-draw)
|
|
5
|
+
[](https://bundlephobia.com/package/svg-scroll-draw)
|
|
6
|
+
[](./LICENSE)
|
|
7
|
+
[](https://github.com/DhruvilChauahan0210/ink-scroll/stargazers)
|
|
8
|
+
|
|
9
|
+
> Scroll-driven SVG path animation. Zero dependencies. Under 3KB gzipped.
|
|
10
|
+
|
|
11
|
+
**[Live Demo](https://ink-scroll.vercel.app)** · [npm](https://www.npmjs.com/package/svg-scroll-draw) · [Report a bug](https://github.com/DhruvilChauahan0210/ink-scroll/issues)
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
## Install
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm i svg-scroll-draw
|
|
21
|
+
# or
|
|
22
|
+
pnpm add svg-scroll-draw
|
|
23
|
+
# or
|
|
24
|
+
yarn add svg-scroll-draw
|
|
25
|
+
# or
|
|
26
|
+
bun add svg-scroll-draw
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
## Why this exists
|
|
32
|
+
|
|
33
|
+
The `stroke-dashoffset` trick for drawing SVG lines on scroll is well-known — but every existing tool that implements it is broken in a different way:
|
|
34
|
+
|
|
35
|
+
| Tool | Problem |
|
|
36
|
+
|---|---|
|
|
37
|
+
| **GSAP DrawSVG** | 40KB+, requires a paid Club GreenSock license for commercial use |
|
|
38
|
+
| **Framer Motion** | 35KB+, React-only, heavy runtime for a single animation effect |
|
|
39
|
+
| **scroll-svg** | ~2KB but abandoned — forces you to target individual path IDs manually, crashes in Next.js |
|
|
40
|
+
|
|
41
|
+
`svg-scroll-draw` fixes all three pain points in one package.
|
|
42
|
+
|
|
43
|
+
---
|
|
44
|
+
|
|
45
|
+
## Quick start
|
|
46
|
+
|
|
47
|
+
### Vanilla JS
|
|
48
|
+
|
|
49
|
+
```js
|
|
50
|
+
import { scrollDraw } from 'svg-scroll-draw';
|
|
51
|
+
|
|
52
|
+
const instance = scrollDraw('#my-svg-container', {
|
|
53
|
+
easing: 'ease-out',
|
|
54
|
+
speed: 1.2,
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
// Clean up on SPA navigation / unmount
|
|
58
|
+
instance.destroy();
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
**[Try it on StackBlitz →](https://stackblitz.com/edit/svg-scroll-draw-vanilla)**
|
|
62
|
+
|
|
63
|
+
### React / Next.js
|
|
64
|
+
|
|
65
|
+
```tsx
|
|
66
|
+
import { ScrollDraw } from 'svg-scroll-draw/react';
|
|
67
|
+
|
|
68
|
+
export default function Hero() {
|
|
69
|
+
return (
|
|
70
|
+
<ScrollDraw speed={1.2} fade easing="ease-out">
|
|
71
|
+
<svg width="500" height="500" viewBox="0 0 500 500">
|
|
72
|
+
<path d="M10 80 C 40 10, 60 10, 95 80" stroke="black" fill="none" />
|
|
73
|
+
</svg>
|
|
74
|
+
</ScrollDraw>
|
|
75
|
+
);
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
> **Next.js App Router:** add `'use client'` to any component that uses `ScrollDraw`.
|
|
80
|
+
|
|
81
|
+
**[Try it on StackBlitz →](https://stackblitz.com/edit/svg-scroll-draw-react)**
|
|
82
|
+
|
|
83
|
+
### Vue 3
|
|
84
|
+
|
|
85
|
+
```vue
|
|
86
|
+
<script setup>
|
|
87
|
+
import { ScrollDraw } from 'svg-scroll-draw/vue';
|
|
88
|
+
</script>
|
|
89
|
+
|
|
90
|
+
<template>
|
|
91
|
+
<ScrollDraw easing="ease-out" :speed="1.2">
|
|
92
|
+
<svg>...</svg>
|
|
93
|
+
</ScrollDraw>
|
|
94
|
+
</template>
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
Or use the composable directly:
|
|
98
|
+
|
|
99
|
+
```ts
|
|
100
|
+
import { useScrollDraw } from 'svg-scroll-draw/vue';
|
|
101
|
+
|
|
102
|
+
const containerRef = useScrollDraw({ easing: 'ease-out', speed: 1.2 });
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
**[Try it on StackBlitz →](https://stackblitz.com/edit/svg-scroll-draw-vue)**
|
|
106
|
+
|
|
107
|
+
### CDN / Web Component
|
|
108
|
+
|
|
109
|
+
```html
|
|
110
|
+
<script src="https://unpkg.com/svg-scroll-draw/dist/cdn/svg-scroll-draw.global.js"></script>
|
|
111
|
+
|
|
112
|
+
<!-- Web Component (auto-registered) -->
|
|
113
|
+
<scroll-draw easing="ease-out" speed="1.2">
|
|
114
|
+
<svg>...</svg>
|
|
115
|
+
</scroll-draw>
|
|
116
|
+
|
|
117
|
+
<!-- Or vanilla JS API -->
|
|
118
|
+
<script>
|
|
119
|
+
SvgScrollDraw.scrollDraw('#my-container', { easing: 'ease-out' });
|
|
120
|
+
</script>
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
---
|
|
124
|
+
|
|
125
|
+
## Options
|
|
126
|
+
|
|
127
|
+
| Option | Type | Default | Description |
|
|
128
|
+
|---|---|---|---|
|
|
129
|
+
| `selector` | `string` | `"path, polyline, line, polygon, rect, circle"` | CSS selector for child elements to animate |
|
|
130
|
+
| `speed` | `number` | `1` | Scale factor — values above 1 complete faster relative to scroll distance |
|
|
131
|
+
| `fade` | `boolean` | `false` | Simultaneously animate `opacity 0 → 1` while drawing |
|
|
132
|
+
| `easing` | `string \| fn` | `"linear"` | `linear`, `ease-in`, `ease-out`, `ease-in-out`, or a custom `(t: number) => number` |
|
|
133
|
+
| `stagger` | `number` | `0` | Normalized offset between each path starting. `0.15` = each path begins 15% of the scroll range after the previous |
|
|
134
|
+
| `direction` | `"forward" \| "reverse"` | `"forward"` | `reverse` starts fully drawn and erases as you scroll |
|
|
135
|
+
| `trigger.start` | `string` | `"top bottom"` | When animation begins. Accepts anchor strings (`"top bottom"`) or viewport percentages (`"20%"`) |
|
|
136
|
+
| `trigger.end` | `string` | `"bottom top"` | When animation ends |
|
|
137
|
+
| `onProgress` | `(alpha: number) => void` | — | Called every animation frame with current draw progress (0–1) |
|
|
138
|
+
| `onComplete` | `() => void` | — | Fires once when all paths reach 100% draw progress |
|
|
139
|
+
|
|
140
|
+
### Trigger anchors
|
|
141
|
+
|
|
142
|
+
```js
|
|
143
|
+
scrollDraw('#logo', {
|
|
144
|
+
trigger: {
|
|
145
|
+
start: 'top bottom', // when top of element hits bottom of viewport
|
|
146
|
+
end: 'bottom top', // when bottom of element hits top of viewport
|
|
147
|
+
}
|
|
148
|
+
});
|
|
149
|
+
|
|
150
|
+
// Or use viewport percentages
|
|
151
|
+
scrollDraw('#logo', {
|
|
152
|
+
trigger: { start: '20%', end: '80%' }
|
|
153
|
+
});
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
Available named anchors: `top`, `center`, `bottom`.
|
|
157
|
+
|
|
158
|
+
---
|
|
159
|
+
|
|
160
|
+
## Bundle sizes
|
|
161
|
+
|
|
162
|
+
| Format | Size |
|
|
163
|
+
|---|---|
|
|
164
|
+
| ESM (`.mjs`) | ~3.2 KB |
|
|
165
|
+
| CJS (`.cjs`) | ~3.2 KB |
|
|
166
|
+
| IIFE / CDN (`.global.js`) | ~4.2 KB (includes Web Component) |
|
|
167
|
+
|
|
168
|
+
---
|
|
169
|
+
|
|
170
|
+
## Browser support
|
|
171
|
+
|
|
172
|
+
Chrome 80+, Safari 14+, Firefox 75+, Edge 80+
|
|
173
|
+
|
|
174
|
+
---
|
|
175
|
+
|
|
176
|
+
## License
|
|
177
|
+
|
|
178
|
+
MIT
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var SvgScrollDraw=(()=>{var
|
|
1
|
+
"use strict";var SvgScrollDraw=(()=>{var A=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var J=Object.prototype.hasOwnProperty;var K=(e,t)=>{for(var r in t)A(e,r,{get:t[r],enumerable:!0})},Q=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of j(t))!J.call(e,o)&&o!==r&&A(e,o,{get:()=>t[o],enumerable:!(n=_(t,o))||n.enumerable});return e};var U=e=>Q(A({},"__esModule",{value:!0}),e);var Z={};K(Z,{scrollDraw:()=>Y});var D={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};function x(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return{element:"top",viewport:t};let r=t.split(/\s+/).filter(Boolean),[n="top",o="bottom"]=r;return{element:n,viewport:o}}function C(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 G(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 I(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 W(e,t,r){return Math.min(r,Math.max(t,e))}function V(e,t,r,n){return r===t?0:W((e-t)/(r-t)*n,0,1)}function N(e,t,r,n,o){let a=C(e.top,e.height,t,n.element)-G(n.viewport,r),c=C(e.top,e.height,t,o.element)-G(o.viewport,r);return{tStart:a,tEnd:c}}function q(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t)}function X(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?q("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&q("Element has a fill \u2014 it may obscure the stroke animation.",e)}function w(e,t={}){if(typeof window>"u")return{destroy:()=>{}};let{selector:r="path, polyline, line, polygon, rect, circle",speed:n=1,fade:o=!1,easing:a="linear",trigger:c={},stagger:m=0,direction:p="forward",onProgress:z,onComplete:M}=t,P=typeof a=="function"?a:D[a]??D.linear,R=x(c.start??"top bottom"),B=x(c.end??"bottom top"),b=Array.from(e.querySelectorAll(r)),u=[],h=0,y=0,E=!1,f=0,v=!1;function k(){let s=e.getBoundingClientRect(),i=N({top:s.top,height:s.height},window.scrollY,window.innerHeight,R,B);h=i.tStart,y=i.tEnd}b.forEach(s=>{X(s);let i=I(s);u.push(i),s.style.strokeDasharray=`${i}`,s.style.strokeDashoffset=p==="reverse"?"0":`${i}`,o&&(s.style.opacity=p==="reverse"?"1":"0")}),k();function F(){if(!v)return;let s=y-h,i=!0;b.forEach(($,g)=>{let L=g*m*s,l=P(V(window.scrollY,h+L,y+L,n));$.style.strokeDashoffset=p==="reverse"?`${u[g]*l}`:`${u[g]*(1-l)}`,o&&($.style.opacity=p==="reverse"?`${1-l}`:`${l}`),g===0&&z?.(l),l<1&&(i=!1)}),i&&!E?(E=!0,M?.()):i||(E=!1),f=requestAnimationFrame(F)}let O=new IntersectionObserver(s=>{s.forEach(i=>{v=i.isIntersecting,v?f=requestAnimationFrame(F):cancelAnimationFrame(f)})});O.observe(e);let S;function d(){clearTimeout(S),S=setTimeout(()=>{b.forEach((s,i)=>{u[i]=I(s),s.style.strokeDasharray=`${u[i]}`}),k()},150)}return window.addEventListener("resize",d),window.addEventListener("orientationchange",d),{destroy(){cancelAnimationFrame(f),O.disconnect(),window.removeEventListener("resize",d),window.removeEventListener("orientationchange",d),clearTimeout(S)}}}function Y(e,t){if(typeof window>"u")return{destroy:()=>{}};let r=typeof e=="string"?document.querySelector(e):e;return r?w(r,t):(console.warn("[svg-scroll-draw] Container not found:",e),{destroy:()=>{}})}var T=class extends HTMLElement{constructor(){super(...arguments);this.instance=null}connectedCallback(){let r={},n=this.getAttribute("speed"),o=this.getAttribute("easing"),a=this.getAttribute("stagger"),c=this.getAttribute("direction"),m=this.getAttribute("selector");n&&(r.speed=parseFloat(n)),o&&(r.easing=o),a&&(r.stagger=parseFloat(a)),c&&(r.direction=c),m&&(r.selector=m),this.hasAttribute("fade")&&(r.fade=this.getAttribute("fade")!=="false"),this.instance=w(this,r)}disconnectedCallback(){this.instance?.destroy(),this.instance=null}};typeof customElements<"u"&&!customElements.get("scroll-draw")&&customElements.define("scroll-draw",T);return U(Z);})();
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
'use strict';var
|
|
1
|
+
'use strict';var v={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};function S(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let r=t.split(/\s+/).filter(Boolean),[s="top",i="bottom"]=r;return {element:s,viewport:i}}function k(e,t,r,s){switch(s){case "top":return e+r;case "center":return e+r+t/2;case "bottom":return e+r+t;default:return e+r}}function F(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 D(e){let t=e.tagName.toLowerCase();if(t==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),s=parseFloat(e.getAttribute("height")??"0");return 2*(r+s)}if(t==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function M(e,t,r){return Math.min(r,Math.max(t,e))}function L(e,t,r,s){return r===t?0:M((e-t)/(r-t)*s,0,1)}function G(e,t,r,s,i){let c=k(e.top,e.height,t,s.element)-F(s.viewport,r),u=k(e.top,e.height,t,i.element)-F(i.viewport,r);return {tStart:c,tEnd:u}}function O(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function B(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?O("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&O("Element has a fill \u2014 it may obscure the stroke animation.",e);}function V(e,t={}){if(typeof window>"u")return {destroy:()=>{}};let{selector:r="path, polyline, line, polygon, rect, circle",speed:s=1,fade:i=false,easing:c="linear",trigger:u={},stagger:C=0,direction:m="forward",onProgress:N,onComplete:q}=t,z=typeof c=="function"?c:v[c]??v.linear,P=S(u.start??"top bottom"),R=S(u.end??"bottom top"),d=Array.from(e.querySelectorAll(r)),l=[],w=0,b=0,h=false,p=0,y=false;function A(){let n=e.getBoundingClientRect(),o=G({top:n.top,height:n.height},window.scrollY,window.innerHeight,P,R);w=o.tStart,b=o.tEnd;}d.forEach(n=>{B(n);let o=D(n);l.push(o),n.style.strokeDasharray=`${o}`,n.style.strokeDashoffset=m==="reverse"?"0":`${o}`,i&&(n.style.opacity=m==="reverse"?"1":"0");}),A();function x(){if(!y)return;let n=b-w,o=true;d.forEach((I,g)=>{let $=g*C*n,a=z(L(window.scrollY,w+$,b+$,s));I.style.strokeDashoffset=m==="reverse"?`${l[g]*a}`:`${l[g]*(1-a)}`,i&&(I.style.opacity=m==="reverse"?`${1-a}`:`${a}`),g===0&&N?.(a),a<1&&(o=false);}),o&&!h?(h=true,q?.()):o||(h=false),p=requestAnimationFrame(x);}let T=new IntersectionObserver(n=>{n.forEach(o=>{y=o.isIntersecting,y?p=requestAnimationFrame(x):cancelAnimationFrame(p);});});T.observe(e);let E;function f(){clearTimeout(E),E=setTimeout(()=>{d.forEach((n,o)=>{l[o]=D(n),n.style.strokeDasharray=`${l[o]}`;}),A();},150);}return window.addEventListener("resize",f),window.addEventListener("orientationchange",f),{destroy(){cancelAnimationFrame(p),T.disconnect(),window.removeEventListener("resize",f),window.removeEventListener("orientationchange",f),clearTimeout(E);}}}function Q(e,t){if(typeof window>"u")return {destroy:()=>{}};let r=typeof e=="string"?document.querySelector(e):e;return r?V(r,t):(console.warn("[svg-scroll-draw] Container not found:",e),{destroy:()=>{}})}exports.scrollDraw=Q;
|
package/dist/index.d.mts
CHANGED
|
@@ -9,6 +9,12 @@ interface ScrollDrawOptions {
|
|
|
9
9
|
fade?: boolean;
|
|
10
10
|
easing?: EasingName | ((t: number) => number);
|
|
11
11
|
trigger?: TriggerConfig;
|
|
12
|
+
/** Normalized scroll-progress offset between each path starting (0–1). e.g. 0.15 → each path begins 15% of the scroll range after the previous. */
|
|
13
|
+
stagger?: number;
|
|
14
|
+
/** 'forward' draws the path in (default). 'reverse' erases — path starts fully drawn and disappears as you scroll. */
|
|
15
|
+
direction?: 'forward' | 'reverse';
|
|
16
|
+
/** Called every animation frame with the current draw progress (0–1) of the first path. */
|
|
17
|
+
onProgress?: (alpha: number) => void;
|
|
12
18
|
onComplete?: () => void;
|
|
13
19
|
}
|
|
14
20
|
interface ScrollDrawInstance {
|
package/dist/index.d.ts
CHANGED
|
@@ -9,6 +9,12 @@ interface ScrollDrawOptions {
|
|
|
9
9
|
fade?: boolean;
|
|
10
10
|
easing?: EasingName | ((t: number) => number);
|
|
11
11
|
trigger?: TriggerConfig;
|
|
12
|
+
/** Normalized scroll-progress offset between each path starting (0–1). e.g. 0.15 → each path begins 15% of the scroll range after the previous. */
|
|
13
|
+
stagger?: number;
|
|
14
|
+
/** 'forward' draws the path in (default). 'reverse' erases — path starts fully drawn and disappears as you scroll. */
|
|
15
|
+
direction?: 'forward' | 'reverse';
|
|
16
|
+
/** Called every animation frame with the current draw progress (0–1) of the first path. */
|
|
17
|
+
onProgress?: (alpha: number) => void;
|
|
12
18
|
onComplete?: () => void;
|
|
13
19
|
}
|
|
14
20
|
interface ScrollDrawInstance {
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var
|
|
1
|
+
var v={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};function S(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let r=t.split(/\s+/).filter(Boolean),[s="top",i="bottom"]=r;return {element:s,viewport:i}}function k(e,t,r,s){switch(s){case "top":return e+r;case "center":return e+r+t/2;case "bottom":return e+r+t;default:return e+r}}function F(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 D(e){let t=e.tagName.toLowerCase();if(t==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),s=parseFloat(e.getAttribute("height")??"0");return 2*(r+s)}if(t==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function M(e,t,r){return Math.min(r,Math.max(t,e))}function L(e,t,r,s){return r===t?0:M((e-t)/(r-t)*s,0,1)}function G(e,t,r,s,i){let c=k(e.top,e.height,t,s.element)-F(s.viewport,r),u=k(e.top,e.height,t,i.element)-F(i.viewport,r);return {tStart:c,tEnd:u}}function O(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function B(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?O("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&O("Element has a fill \u2014 it may obscure the stroke animation.",e);}function V(e,t={}){if(typeof window>"u")return {destroy:()=>{}};let{selector:r="path, polyline, line, polygon, rect, circle",speed:s=1,fade:i=false,easing:c="linear",trigger:u={},stagger:C=0,direction:m="forward",onProgress:N,onComplete:q}=t,z=typeof c=="function"?c:v[c]??v.linear,P=S(u.start??"top bottom"),R=S(u.end??"bottom top"),d=Array.from(e.querySelectorAll(r)),l=[],w=0,b=0,h=false,p=0,y=false;function A(){let n=e.getBoundingClientRect(),o=G({top:n.top,height:n.height},window.scrollY,window.innerHeight,P,R);w=o.tStart,b=o.tEnd;}d.forEach(n=>{B(n);let o=D(n);l.push(o),n.style.strokeDasharray=`${o}`,n.style.strokeDashoffset=m==="reverse"?"0":`${o}`,i&&(n.style.opacity=m==="reverse"?"1":"0");}),A();function x(){if(!y)return;let n=b-w,o=true;d.forEach((I,g)=>{let $=g*C*n,a=z(L(window.scrollY,w+$,b+$,s));I.style.strokeDashoffset=m==="reverse"?`${l[g]*a}`:`${l[g]*(1-a)}`,i&&(I.style.opacity=m==="reverse"?`${1-a}`:`${a}`),g===0&&N?.(a),a<1&&(o=false);}),o&&!h?(h=true,q?.()):o||(h=false),p=requestAnimationFrame(x);}let T=new IntersectionObserver(n=>{n.forEach(o=>{y=o.isIntersecting,y?p=requestAnimationFrame(x):cancelAnimationFrame(p);});});T.observe(e);let E;function f(){clearTimeout(E),E=setTimeout(()=>{d.forEach((n,o)=>{l[o]=D(n),n.style.strokeDasharray=`${l[o]}`;}),A();},150);}return window.addEventListener("resize",f),window.addEventListener("orientationchange",f),{destroy(){cancelAnimationFrame(p),T.disconnect(),window.removeEventListener("resize",f),window.removeEventListener("orientationchange",f),clearTimeout(E);}}}function Q(e,t){if(typeof window>"u")return {destroy:()=>{}};let r=typeof e=="string"?document.querySelector(e):e;return r?V(r,t):(console.warn("[svg-scroll-draw] Container not found:",e),{destroy:()=>{}})}export{Q as scrollDraw};
|
package/dist/react/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
'use strict';var react=require('react'),jsxRuntime=require('react/jsx-runtime');var
|
|
1
|
+
'use strict';var react=require('react'),jsxRuntime=require('react/jsx-runtime');var v={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};function S(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let r=t.split(/\s+/).filter(Boolean),[s="top",i="bottom"]=r;return {element:s,viewport:i}}function F(e,t,r,s){switch(s){case "top":return e+r;case "center":return e+r+t/2;case "bottom":return e+r+t;default:return e+r}}function L(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 D(e){let t=e.tagName.toLowerCase();if(t==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),s=parseFloat(e.getAttribute("height")??"0");return 2*(r+s)}if(t==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function q(e,t,r){return Math.min(r,Math.max(t,e))}function R(e,t,r,s){return r===t?0:q((e-t)/(r-t)*s,0,1)}function I(e,t,r,s,i){let a=F(e.top,e.height,t,s.element)-L(s.viewport,r),u=F(e.top,e.height,t,i.element)-L(i.viewport,r);return {tStart:a,tEnd:u}}function N(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function B(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?N("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&N("Element has a fill \u2014 it may obscure the stroke animation.",e);}function G(e,t={}){if(typeof window>"u")return {destroy:()=>{}};let{selector:r="path, polyline, line, polygon, rect, circle",speed:s=1,fade:i=false,easing:a="linear",trigger:u={},stagger:P=0,direction:m="forward",onProgress:O,onComplete:V}=t,C=typeof a=="function"?a:v[a]??v.linear,z=S(u.start??"top bottom"),M=S(u.end??"bottom top"),d=Array.from(e.querySelectorAll(r)),l=[],w=0,b=0,h=false,p=0,y=false;function A(){let n=e.getBoundingClientRect(),o=I({top:n.top,height:n.height},window.scrollY,window.innerHeight,z,M);w=o.tStart,b=o.tEnd;}d.forEach(n=>{B(n);let o=D(n);l.push(o),n.style.strokeDasharray=`${o}`,n.style.strokeDashoffset=m==="reverse"?"0":`${o}`,i&&(n.style.opacity=m==="reverse"?"1":"0");}),A();function T(){if(!y)return;let n=b-w,o=true;d.forEach(($,g)=>{let k=g*P*n,c=C(R(window.scrollY,w+k,b+k,s));$.style.strokeDashoffset=m==="reverse"?`${l[g]*c}`:`${l[g]*(1-c)}`,i&&($.style.opacity=m==="reverse"?`${1-c}`:`${c}`),g===0&&O?.(c),c<1&&(o=false);}),o&&!h?(h=true,V?.()):o||(h=false),p=requestAnimationFrame(T);}let x=new IntersectionObserver(n=>{n.forEach(o=>{y=o.isIntersecting,y?p=requestAnimationFrame(T):cancelAnimationFrame(p);});});x.observe(e);let E;function f(){clearTimeout(E),E=setTimeout(()=>{d.forEach((n,o)=>{l[o]=D(n),n.style.strokeDasharray=`${l[o]}`;}),A();},150);}return window.addEventListener("resize",f),window.addEventListener("orientationchange",f),{destroy(){cancelAnimationFrame(p),x.disconnect(),window.removeEventListener("resize",f),window.removeEventListener("orientationchange",f),clearTimeout(E);}}}function j({children:e,className:t,style:r,...s}){let i=react.useRef(null);return react.useEffect(()=>{if(!i.current)return;let a=G(i.current,s);return ()=>a.destroy()},[]),jsxRuntime.jsx("div",{ref:i,className:t,style:r,children:e})}exports.ScrollDraw=j;
|
package/dist/react/index.d.mts
CHANGED
|
@@ -12,6 +12,12 @@ interface ScrollDrawOptions {
|
|
|
12
12
|
fade?: boolean;
|
|
13
13
|
easing?: EasingName | ((t: number) => number);
|
|
14
14
|
trigger?: TriggerConfig;
|
|
15
|
+
/** Normalized scroll-progress offset between each path starting (0–1). e.g. 0.15 → each path begins 15% of the scroll range after the previous. */
|
|
16
|
+
stagger?: number;
|
|
17
|
+
/** 'forward' draws the path in (default). 'reverse' erases — path starts fully drawn and disappears as you scroll. */
|
|
18
|
+
direction?: 'forward' | 'reverse';
|
|
19
|
+
/** Called every animation frame with the current draw progress (0–1) of the first path. */
|
|
20
|
+
onProgress?: (alpha: number) => void;
|
|
15
21
|
onComplete?: () => void;
|
|
16
22
|
}
|
|
17
23
|
|
package/dist/react/index.d.ts
CHANGED
|
@@ -12,6 +12,12 @@ interface ScrollDrawOptions {
|
|
|
12
12
|
fade?: boolean;
|
|
13
13
|
easing?: EasingName | ((t: number) => number);
|
|
14
14
|
trigger?: TriggerConfig;
|
|
15
|
+
/** Normalized scroll-progress offset between each path starting (0–1). e.g. 0.15 → each path begins 15% of the scroll range after the previous. */
|
|
16
|
+
stagger?: number;
|
|
17
|
+
/** 'forward' draws the path in (default). 'reverse' erases — path starts fully drawn and disappears as you scroll. */
|
|
18
|
+
direction?: 'forward' | 'reverse';
|
|
19
|
+
/** Called every animation frame with the current draw progress (0–1) of the first path. */
|
|
20
|
+
onProgress?: (alpha: number) => void;
|
|
15
21
|
onComplete?: () => void;
|
|
16
22
|
}
|
|
17
23
|
|
package/dist/react/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import {useRef,useEffect}from'react';import {jsx}from'react/jsx-runtime';var
|
|
1
|
+
import {useRef,useEffect}from'react';import {jsx}from'react/jsx-runtime';var v={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};function S(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let r=t.split(/\s+/).filter(Boolean),[s="top",i="bottom"]=r;return {element:s,viewport:i}}function F(e,t,r,s){switch(s){case "top":return e+r;case "center":return e+r+t/2;case "bottom":return e+r+t;default:return e+r}}function L(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 D(e){let t=e.tagName.toLowerCase();if(t==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),s=parseFloat(e.getAttribute("height")??"0");return 2*(r+s)}if(t==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function q(e,t,r){return Math.min(r,Math.max(t,e))}function R(e,t,r,s){return r===t?0:q((e-t)/(r-t)*s,0,1)}function I(e,t,r,s,i){let a=F(e.top,e.height,t,s.element)-L(s.viewport,r),u=F(e.top,e.height,t,i.element)-L(i.viewport,r);return {tStart:a,tEnd:u}}function N(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function B(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?N("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&N("Element has a fill \u2014 it may obscure the stroke animation.",e);}function G(e,t={}){if(typeof window>"u")return {destroy:()=>{}};let{selector:r="path, polyline, line, polygon, rect, circle",speed:s=1,fade:i=false,easing:a="linear",trigger:u={},stagger:P=0,direction:m="forward",onProgress:O,onComplete:V}=t,C=typeof a=="function"?a:v[a]??v.linear,z=S(u.start??"top bottom"),M=S(u.end??"bottom top"),d=Array.from(e.querySelectorAll(r)),l=[],w=0,b=0,h=false,p=0,y=false;function A(){let n=e.getBoundingClientRect(),o=I({top:n.top,height:n.height},window.scrollY,window.innerHeight,z,M);w=o.tStart,b=o.tEnd;}d.forEach(n=>{B(n);let o=D(n);l.push(o),n.style.strokeDasharray=`${o}`,n.style.strokeDashoffset=m==="reverse"?"0":`${o}`,i&&(n.style.opacity=m==="reverse"?"1":"0");}),A();function T(){if(!y)return;let n=b-w,o=true;d.forEach(($,g)=>{let k=g*P*n,c=C(R(window.scrollY,w+k,b+k,s));$.style.strokeDashoffset=m==="reverse"?`${l[g]*c}`:`${l[g]*(1-c)}`,i&&($.style.opacity=m==="reverse"?`${1-c}`:`${c}`),g===0&&O?.(c),c<1&&(o=false);}),o&&!h?(h=true,V?.()):o||(h=false),p=requestAnimationFrame(T);}let x=new IntersectionObserver(n=>{n.forEach(o=>{y=o.isIntersecting,y?p=requestAnimationFrame(T):cancelAnimationFrame(p);});});x.observe(e);let E;function f(){clearTimeout(E),E=setTimeout(()=>{d.forEach((n,o)=>{l[o]=D(n),n.style.strokeDasharray=`${l[o]}`;}),A();},150);}return window.addEventListener("resize",f),window.addEventListener("orientationchange",f),{destroy(){cancelAnimationFrame(p),x.disconnect(),window.removeEventListener("resize",f),window.removeEventListener("orientationchange",f),clearTimeout(E);}}}function j({children:e,className:t,style:r,...s}){let i=useRef(null);return useEffect(()=>{if(!i.current)return;let a=G(i.current,s);return ()=>a.destroy()},[]),jsx("div",{ref:i,className:t,style:r,children:e})}export{j as ScrollDraw};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
'use strict';var vue=require('vue');var E={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};function S(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let n=t.split(/\s+/).filter(Boolean),[r="top",s="bottom"]=n;return {element:r,viewport:s}}function L(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 $(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 D(e){let t=e.tagName.toLowerCase();if(t==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),r=parseFloat(e.getAttribute("height")??"0");return 2*(n+r)}if(t==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function U(e,t,n){return Math.min(n,Math.max(t,e))}function k(e,t,n,r){return n===t?0:U((e-t)/(n-t)*r,0,1)}function P(e,t,n,r,s){let l=L(e.top,e.height,t,r.element)-$(r.viewport,n),u=L(e.top,e.height,t,s.element)-$(s.viewport,n);return {tStart:l,tEnd:u}}function I(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function _(e){let t=e.getAttribute("stroke"),n=e.getAttribute("fill");!t||t==="none"?I("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&I("Element has a fill \u2014 it may obscure the stroke animation.",e);}function A(e,t={}){if(typeof window>"u")return {destroy:()=>{}};let{selector:n="path, polyline, line, polygon, rect, circle",speed:r=1,fade:s=false,easing:l="linear",trigger:u={},stagger:R=0,direction:m="forward",onProgress:V,onComplete:z}=t,q=typeof l=="function"?l:E[l]??E.linear,B=S(u.start??"top bottom"),j=S(u.end??"bottom top"),d=Array.from(e.querySelectorAll(n)),c=[],w=0,b=0,h=false,f=0,y=false;function T(){let o=e.getBoundingClientRect(),i=P({top:o.top,height:o.height},window.scrollY,window.innerHeight,B,j);w=i.tStart,b=i.tEnd;}d.forEach(o=>{_(o);let i=D(o);c.push(i),o.style.strokeDasharray=`${i}`,o.style.strokeDashoffset=m==="reverse"?"0":`${i}`,s&&(o.style.opacity=m==="reverse"?"1":"0");}),T();function x(){if(!y)return;let o=b-w,i=true;d.forEach((F,p)=>{let C=p*R*o,a=q(k(window.scrollY,w+C,b+C,r));F.style.strokeDashoffset=m==="reverse"?`${c[p]*a}`:`${c[p]*(1-a)}`,s&&(F.style.opacity=m==="reverse"?`${1-a}`:`${a}`),p===0&&V?.(a),a<1&&(i=false);}),i&&!h?(h=true,z?.()):i||(h=false),f=requestAnimationFrame(x);}let O=new IntersectionObserver(o=>{o.forEach(i=>{y=i.isIntersecting,y?f=requestAnimationFrame(x):cancelAnimationFrame(f);});});O.observe(e);let v;function g(){clearTimeout(v),v=setTimeout(()=>{d.forEach((o,i)=>{c[i]=D(o),o.style.strokeDasharray=`${c[i]}`;}),T();},150);}return window.addEventListener("resize",g),window.addEventListener("orientationchange",g),{destroy(){cancelAnimationFrame(f),O.disconnect(),window.removeEventListener("resize",g),window.removeEventListener("orientationchange",g),clearTimeout(v);}}}function H(e={}){let t=vue.ref(null);return vue.onMounted(()=>{if(!t.value)return;let n=A(t.value,e);vue.onUnmounted(()=>n.destroy());}),t}var ee=vue.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},onComplete:{type:Function}},setup(e,{slots:t}){let n=vue.ref(null);return vue.onMounted(()=>{if(!n.value)return;let r={};e.selector!=null&&(r.selector=e.selector),e.speed!=null&&(r.speed=e.speed),e.fade!=null&&(r.fade=e.fade),e.stagger!=null&&(r.stagger=e.stagger),e.easing!=null&&(r.easing=e.easing),e.direction!=null&&(r.direction=e.direction),e.trigger!=null&&(r.trigger=e.trigger),e.onProgress!=null&&(r.onProgress=e.onProgress),e.onComplete!=null&&(r.onComplete=e.onComplete);let s=A(n.value,r);vue.onUnmounted(()=>s.destroy());}),()=>vue.h("div",{ref:n},t.default?.())}});exports.ScrollDraw=ee;exports.useScrollDraw=H;
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import * as vue from 'vue';
|
|
2
|
+
|
|
3
|
+
type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
|
|
4
|
+
interface TriggerConfig {
|
|
5
|
+
start?: string;
|
|
6
|
+
end?: string;
|
|
7
|
+
}
|
|
8
|
+
interface ScrollDrawOptions {
|
|
9
|
+
selector?: string;
|
|
10
|
+
speed?: number;
|
|
11
|
+
fade?: boolean;
|
|
12
|
+
easing?: EasingName | ((t: number) => number);
|
|
13
|
+
trigger?: TriggerConfig;
|
|
14
|
+
/** Normalized scroll-progress offset between each path starting (0–1). e.g. 0.15 → each path begins 15% of the scroll range after the previous. */
|
|
15
|
+
stagger?: number;
|
|
16
|
+
/** 'forward' draws the path in (default). 'reverse' erases — path starts fully drawn and disappears as you scroll. */
|
|
17
|
+
direction?: 'forward' | 'reverse';
|
|
18
|
+
/** Called every animation frame with the current draw progress (0–1) of the first path. */
|
|
19
|
+
onProgress?: (alpha: number) => void;
|
|
20
|
+
onComplete?: () => void;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/** Composable — attach to any container ref. */
|
|
24
|
+
declare function useScrollDraw(options?: ScrollDrawOptions): vue.Ref<HTMLElement | null, HTMLElement | null>;
|
|
25
|
+
/** Component — wraps children in a <div> and initialises the engine. */
|
|
26
|
+
declare const ScrollDraw: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
27
|
+
selector: {
|
|
28
|
+
type: StringConstructor;
|
|
29
|
+
};
|
|
30
|
+
speed: {
|
|
31
|
+
type: NumberConstructor;
|
|
32
|
+
};
|
|
33
|
+
fade: {
|
|
34
|
+
type: BooleanConstructor;
|
|
35
|
+
};
|
|
36
|
+
stagger: {
|
|
37
|
+
type: NumberConstructor;
|
|
38
|
+
};
|
|
39
|
+
easing: {
|
|
40
|
+
type: (StringConstructor | FunctionConstructor)[];
|
|
41
|
+
};
|
|
42
|
+
direction: {
|
|
43
|
+
type: () => "forward" | "reverse";
|
|
44
|
+
};
|
|
45
|
+
trigger: {
|
|
46
|
+
type: ObjectConstructor;
|
|
47
|
+
};
|
|
48
|
+
onProgress: {
|
|
49
|
+
type: FunctionConstructor;
|
|
50
|
+
};
|
|
51
|
+
onComplete: {
|
|
52
|
+
type: FunctionConstructor;
|
|
53
|
+
};
|
|
54
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
55
|
+
[key: string]: any;
|
|
56
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
57
|
+
selector: {
|
|
58
|
+
type: StringConstructor;
|
|
59
|
+
};
|
|
60
|
+
speed: {
|
|
61
|
+
type: NumberConstructor;
|
|
62
|
+
};
|
|
63
|
+
fade: {
|
|
64
|
+
type: BooleanConstructor;
|
|
65
|
+
};
|
|
66
|
+
stagger: {
|
|
67
|
+
type: NumberConstructor;
|
|
68
|
+
};
|
|
69
|
+
easing: {
|
|
70
|
+
type: (StringConstructor | FunctionConstructor)[];
|
|
71
|
+
};
|
|
72
|
+
direction: {
|
|
73
|
+
type: () => "forward" | "reverse";
|
|
74
|
+
};
|
|
75
|
+
trigger: {
|
|
76
|
+
type: ObjectConstructor;
|
|
77
|
+
};
|
|
78
|
+
onProgress: {
|
|
79
|
+
type: FunctionConstructor;
|
|
80
|
+
};
|
|
81
|
+
onComplete: {
|
|
82
|
+
type: FunctionConstructor;
|
|
83
|
+
};
|
|
84
|
+
}>> & Readonly<{}>, {
|
|
85
|
+
fade: boolean;
|
|
86
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
87
|
+
|
|
88
|
+
export { ScrollDraw, type ScrollDrawOptions, useScrollDraw };
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import * as vue from 'vue';
|
|
2
|
+
|
|
3
|
+
type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
|
|
4
|
+
interface TriggerConfig {
|
|
5
|
+
start?: string;
|
|
6
|
+
end?: string;
|
|
7
|
+
}
|
|
8
|
+
interface ScrollDrawOptions {
|
|
9
|
+
selector?: string;
|
|
10
|
+
speed?: number;
|
|
11
|
+
fade?: boolean;
|
|
12
|
+
easing?: EasingName | ((t: number) => number);
|
|
13
|
+
trigger?: TriggerConfig;
|
|
14
|
+
/** Normalized scroll-progress offset between each path starting (0–1). e.g. 0.15 → each path begins 15% of the scroll range after the previous. */
|
|
15
|
+
stagger?: number;
|
|
16
|
+
/** 'forward' draws the path in (default). 'reverse' erases — path starts fully drawn and disappears as you scroll. */
|
|
17
|
+
direction?: 'forward' | 'reverse';
|
|
18
|
+
/** Called every animation frame with the current draw progress (0–1) of the first path. */
|
|
19
|
+
onProgress?: (alpha: number) => void;
|
|
20
|
+
onComplete?: () => void;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/** Composable — attach to any container ref. */
|
|
24
|
+
declare function useScrollDraw(options?: ScrollDrawOptions): vue.Ref<HTMLElement | null, HTMLElement | null>;
|
|
25
|
+
/** Component — wraps children in a <div> and initialises the engine. */
|
|
26
|
+
declare const ScrollDraw: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
27
|
+
selector: {
|
|
28
|
+
type: StringConstructor;
|
|
29
|
+
};
|
|
30
|
+
speed: {
|
|
31
|
+
type: NumberConstructor;
|
|
32
|
+
};
|
|
33
|
+
fade: {
|
|
34
|
+
type: BooleanConstructor;
|
|
35
|
+
};
|
|
36
|
+
stagger: {
|
|
37
|
+
type: NumberConstructor;
|
|
38
|
+
};
|
|
39
|
+
easing: {
|
|
40
|
+
type: (StringConstructor | FunctionConstructor)[];
|
|
41
|
+
};
|
|
42
|
+
direction: {
|
|
43
|
+
type: () => "forward" | "reverse";
|
|
44
|
+
};
|
|
45
|
+
trigger: {
|
|
46
|
+
type: ObjectConstructor;
|
|
47
|
+
};
|
|
48
|
+
onProgress: {
|
|
49
|
+
type: FunctionConstructor;
|
|
50
|
+
};
|
|
51
|
+
onComplete: {
|
|
52
|
+
type: FunctionConstructor;
|
|
53
|
+
};
|
|
54
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
55
|
+
[key: string]: any;
|
|
56
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
57
|
+
selector: {
|
|
58
|
+
type: StringConstructor;
|
|
59
|
+
};
|
|
60
|
+
speed: {
|
|
61
|
+
type: NumberConstructor;
|
|
62
|
+
};
|
|
63
|
+
fade: {
|
|
64
|
+
type: BooleanConstructor;
|
|
65
|
+
};
|
|
66
|
+
stagger: {
|
|
67
|
+
type: NumberConstructor;
|
|
68
|
+
};
|
|
69
|
+
easing: {
|
|
70
|
+
type: (StringConstructor | FunctionConstructor)[];
|
|
71
|
+
};
|
|
72
|
+
direction: {
|
|
73
|
+
type: () => "forward" | "reverse";
|
|
74
|
+
};
|
|
75
|
+
trigger: {
|
|
76
|
+
type: ObjectConstructor;
|
|
77
|
+
};
|
|
78
|
+
onProgress: {
|
|
79
|
+
type: FunctionConstructor;
|
|
80
|
+
};
|
|
81
|
+
onComplete: {
|
|
82
|
+
type: FunctionConstructor;
|
|
83
|
+
};
|
|
84
|
+
}>> & Readonly<{}>, {
|
|
85
|
+
fade: boolean;
|
|
86
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
87
|
+
|
|
88
|
+
export { ScrollDraw, type ScrollDrawOptions, useScrollDraw };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import {defineComponent,ref,onMounted,onUnmounted,h}from'vue';var E={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};function S(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let n=t.split(/\s+/).filter(Boolean),[r="top",s="bottom"]=n;return {element:r,viewport:s}}function L(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 $(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 D(e){let t=e.tagName.toLowerCase();if(t==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),r=parseFloat(e.getAttribute("height")??"0");return 2*(n+r)}if(t==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function U(e,t,n){return Math.min(n,Math.max(t,e))}function k(e,t,n,r){return n===t?0:U((e-t)/(n-t)*r,0,1)}function P(e,t,n,r,s){let l=L(e.top,e.height,t,r.element)-$(r.viewport,n),u=L(e.top,e.height,t,s.element)-$(s.viewport,n);return {tStart:l,tEnd:u}}function I(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function _(e){let t=e.getAttribute("stroke"),n=e.getAttribute("fill");!t||t==="none"?I("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&I("Element has a fill \u2014 it may obscure the stroke animation.",e);}function A(e,t={}){if(typeof window>"u")return {destroy:()=>{}};let{selector:n="path, polyline, line, polygon, rect, circle",speed:r=1,fade:s=false,easing:l="linear",trigger:u={},stagger:R=0,direction:m="forward",onProgress:V,onComplete:z}=t,q=typeof l=="function"?l:E[l]??E.linear,B=S(u.start??"top bottom"),j=S(u.end??"bottom top"),d=Array.from(e.querySelectorAll(n)),c=[],w=0,b=0,h=false,f=0,y=false;function T(){let o=e.getBoundingClientRect(),i=P({top:o.top,height:o.height},window.scrollY,window.innerHeight,B,j);w=i.tStart,b=i.tEnd;}d.forEach(o=>{_(o);let i=D(o);c.push(i),o.style.strokeDasharray=`${i}`,o.style.strokeDashoffset=m==="reverse"?"0":`${i}`,s&&(o.style.opacity=m==="reverse"?"1":"0");}),T();function x(){if(!y)return;let o=b-w,i=true;d.forEach((F,p)=>{let C=p*R*o,a=q(k(window.scrollY,w+C,b+C,r));F.style.strokeDashoffset=m==="reverse"?`${c[p]*a}`:`${c[p]*(1-a)}`,s&&(F.style.opacity=m==="reverse"?`${1-a}`:`${a}`),p===0&&V?.(a),a<1&&(i=false);}),i&&!h?(h=true,z?.()):i||(h=false),f=requestAnimationFrame(x);}let O=new IntersectionObserver(o=>{o.forEach(i=>{y=i.isIntersecting,y?f=requestAnimationFrame(x):cancelAnimationFrame(f);});});O.observe(e);let v;function g(){clearTimeout(v),v=setTimeout(()=>{d.forEach((o,i)=>{c[i]=D(o),o.style.strokeDasharray=`${c[i]}`;}),T();},150);}return window.addEventListener("resize",g),window.addEventListener("orientationchange",g),{destroy(){cancelAnimationFrame(f),O.disconnect(),window.removeEventListener("resize",g),window.removeEventListener("orientationchange",g),clearTimeout(v);}}}function H(e={}){let t=ref(null);return onMounted(()=>{if(!t.value)return;let n=A(t.value,e);onUnmounted(()=>n.destroy());}),t}var ee=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},onComplete:{type:Function}},setup(e,{slots:t}){let n=ref(null);return onMounted(()=>{if(!n.value)return;let r={};e.selector!=null&&(r.selector=e.selector),e.speed!=null&&(r.speed=e.speed),e.fade!=null&&(r.fade=e.fade),e.stagger!=null&&(r.stagger=e.stagger),e.easing!=null&&(r.easing=e.easing),e.direction!=null&&(r.direction=e.direction),e.trigger!=null&&(r.trigger=e.trigger),e.onProgress!=null&&(r.onProgress=e.onProgress),e.onComplete!=null&&(r.onComplete=e.onComplete);let s=A(n.value,r);onUnmounted(()=>s.destroy());}),()=>h("div",{ref:n},t.default?.())}});export{ee as ScrollDraw,H as useScrollDraw};
|
package/package.json
CHANGED
|
@@ -1,12 +1,49 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "svg-scroll-draw",
|
|
3
|
-
"version": "0.1
|
|
4
|
-
"description": "Scroll-driven SVG path drawing animation library",
|
|
3
|
+
"version": "0.2.1",
|
|
4
|
+
"description": "Scroll-driven SVG path drawing animation library — zero dependencies, under 3KB gzipped, works with React, Vue, and vanilla JS",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"svg",
|
|
7
|
+
"scroll",
|
|
8
|
+
"animation",
|
|
9
|
+
"path",
|
|
10
|
+
"draw",
|
|
11
|
+
"stroke-dashoffset",
|
|
12
|
+
"scroll-driven",
|
|
13
|
+
"intersection-observer",
|
|
14
|
+
"react",
|
|
15
|
+
"vue",
|
|
16
|
+
"nextjs",
|
|
17
|
+
"web-animation",
|
|
18
|
+
"svg-animation",
|
|
19
|
+
"scroll-animation",
|
|
20
|
+
"path-drawing",
|
|
21
|
+
"vanilla-js",
|
|
22
|
+
"web-component",
|
|
23
|
+
"zero-dependencies",
|
|
24
|
+
"lightweight"
|
|
25
|
+
],
|
|
26
|
+
"homepage": "https://ink-scroll.vercel.app",
|
|
27
|
+
"repository": {
|
|
28
|
+
"type": "git",
|
|
29
|
+
"url": "https://github.com/DhruvilChauahan0210/ink-scroll.git",
|
|
30
|
+
"directory": "packages/svg-scroll-draw"
|
|
31
|
+
},
|
|
32
|
+
"bugs": {
|
|
33
|
+
"url": "https://github.com/DhruvilChauahan0210/ink-scroll/issues"
|
|
34
|
+
},
|
|
35
|
+
"funding": {
|
|
36
|
+
"type": "github",
|
|
37
|
+
"url": "https://github.com/sponsors/DhruvilChauahan0210"
|
|
38
|
+
},
|
|
39
|
+
"license": "MIT",
|
|
5
40
|
"main": "./dist/index.cjs",
|
|
6
41
|
"module": "./dist/index.mjs",
|
|
7
42
|
"types": "./dist/index.d.ts",
|
|
8
43
|
"files": [
|
|
9
|
-
"dist"
|
|
44
|
+
"dist",
|
|
45
|
+
"README.md",
|
|
46
|
+
"LICENSE"
|
|
10
47
|
],
|
|
11
48
|
"exports": {
|
|
12
49
|
".": {
|
|
@@ -18,6 +55,11 @@
|
|
|
18
55
|
"types": "./dist/react/index.d.ts",
|
|
19
56
|
"import": "./dist/react/index.mjs",
|
|
20
57
|
"require": "./dist/react/index.cjs"
|
|
58
|
+
},
|
|
59
|
+
"./vue": {
|
|
60
|
+
"types": "./dist/vue/index.d.ts",
|
|
61
|
+
"import": "./dist/vue/index.mjs",
|
|
62
|
+
"require": "./dist/vue/index.cjs"
|
|
21
63
|
}
|
|
22
64
|
},
|
|
23
65
|
"scripts": {
|
|
@@ -29,17 +71,24 @@
|
|
|
29
71
|
"prepublishOnly": "npm run build && npm run test"
|
|
30
72
|
},
|
|
31
73
|
"devDependencies": {
|
|
74
|
+
"@types/react": "^18.0.0",
|
|
32
75
|
"@vitest/coverage-v8": "^2.0.0",
|
|
33
76
|
"jsdom": "^25.0.0",
|
|
34
77
|
"tsup": "^8.0.0",
|
|
35
78
|
"typescript": "^5.0.0",
|
|
36
|
-
"
|
|
37
|
-
"
|
|
79
|
+
"vitest": "^2.0.0",
|
|
80
|
+
"vue": "^3.5.34"
|
|
38
81
|
},
|
|
39
82
|
"peerDependencies": {
|
|
40
|
-
"react": ">=17"
|
|
83
|
+
"react": ">=17",
|
|
84
|
+
"vue": ">=3"
|
|
41
85
|
},
|
|
42
86
|
"peerDependenciesMeta": {
|
|
43
|
-
"react": {
|
|
87
|
+
"react": {
|
|
88
|
+
"optional": true
|
|
89
|
+
},
|
|
90
|
+
"vue": {
|
|
91
|
+
"optional": true
|
|
92
|
+
}
|
|
44
93
|
}
|
|
45
94
|
}
|