svg-scroll-draw 0.2.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.
Files changed (2) hide show
  1. package/README.md +178 -0
  2. package/package.json +46 -5
package/README.md ADDED
@@ -0,0 +1,178 @@
1
+ # svg-scroll-draw
2
+
3
+ [![npm](https://img.shields.io/npm/v/svg-scroll-draw)](https://www.npmjs.com/package/svg-scroll-draw)
4
+ [![downloads](https://img.shields.io/npm/dw/svg-scroll-draw)](https://www.npmjs.com/package/svg-scroll-draw)
5
+ [![bundle size](https://img.shields.io/bundlephobia/minzip/svg-scroll-draw)](https://bundlephobia.com/package/svg-scroll-draw)
6
+ [![license](https://img.shields.io/npm/l/svg-scroll-draw)](./LICENSE)
7
+ [![GitHub stars](https://img.shields.io/github/stars/DhruvilChauahan0210/ink-scroll?style=flat)](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
+ ![svg-scroll-draw demo](https://raw.githubusercontent.com/DhruvilChauahan0210/ink-scroll/main/demo.gif)
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
package/package.json CHANGED
@@ -1,12 +1,49 @@
1
1
  {
2
2
  "name": "svg-scroll-draw",
3
- "version": "0.2.0",
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
  ".": {
@@ -47,7 +84,11 @@
47
84
  "vue": ">=3"
48
85
  },
49
86
  "peerDependenciesMeta": {
50
- "react": { "optional": true },
51
- "vue": { "optional": true }
87
+ "react": {
88
+ "optional": true
89
+ },
90
+ "vue": {
91
+ "optional": true
92
+ }
52
93
  }
53
94
  }