serve-my-md 1.1.9 → 1.1.10
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/package.json
CHANGED
package/web/index.html
CHANGED
|
@@ -7,15 +7,14 @@
|
|
|
7
7
|
<meta name="theme-color" content="#000000" />
|
|
8
8
|
<meta
|
|
9
9
|
name="description"
|
|
10
|
-
content="
|
|
10
|
+
content="Documentation for the FollowPath library — animate HTML elements along SVG paths."
|
|
11
11
|
/>
|
|
12
|
-
|
|
13
|
-
<meta property="og:title" content="
|
|
14
|
-
<meta property="og:description" content="
|
|
15
|
-
<meta property="og:
|
|
16
|
-
<meta property="og:
|
|
17
|
-
<
|
|
18
|
-
<title>SMM Ghostly Fixture</title>
|
|
12
|
+
|
|
13
|
+
<meta property="og:title" content="FollowPath Docs">
|
|
14
|
+
<meta property="og:description" content="Documentation for the FollowPath library — animate HTML elements along SVG paths.">
|
|
15
|
+
<meta property="og:type" content="website">
|
|
16
|
+
<meta property="og:site_name" content="FollowPath Docs">
|
|
17
|
+
<title>FollowPath Docs</title>
|
|
19
18
|
|
|
20
19
|
|
|
21
20
|
<style>
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
|
|
3
|
+
<html>
|
|
4
|
+
|
|
5
|
+
<head>
|
|
6
|
+
<meta charset="utf-8">
|
|
7
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
8
|
+
<title></title>
|
|
9
|
+
<meta name="description" content="">
|
|
10
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
11
|
+
<script src='./demo/index.js' type='module'></script>
|
|
12
|
+
<style>
|
|
13
|
+
* {
|
|
14
|
+
margin: 0;
|
|
15
|
+
padding: 0;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.element {
|
|
19
|
+
width: 50px;
|
|
20
|
+
height: 50px;
|
|
21
|
+
background-color: red;
|
|
22
|
+
display: flex;
|
|
23
|
+
justify-content: center;
|
|
24
|
+
align-items: center;
|
|
25
|
+
font-size: 25px;
|
|
26
|
+
position: absolute;
|
|
27
|
+
top: -25px;
|
|
28
|
+
left: -25px;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.logs {
|
|
32
|
+
position: absolute;
|
|
33
|
+
top: 0;
|
|
34
|
+
left: 0;
|
|
35
|
+
height: 100vh;
|
|
36
|
+
width: 100vw;
|
|
37
|
+
opacity: 50%;
|
|
38
|
+
color: black;
|
|
39
|
+
}
|
|
40
|
+
</style>
|
|
41
|
+
</head>
|
|
42
|
+
|
|
43
|
+
<body>
|
|
44
|
+
<svg xmlns='http://www.w3.org/2000/svg' height='700' width='1000'>
|
|
45
|
+
<polyline style="
|
|
46
|
+
fill: transparent;
|
|
47
|
+
stroke-linejoin: round;
|
|
48
|
+
stroke-linecap: round;
|
|
49
|
+
stroke: rgb(0, 0, 0);
|
|
50
|
+
stroke-width: 1px;
|
|
51
|
+
" points="198,264 199,262 200,259 201,257 202,256 202,255 202,253 202,252 203,250 204,249 204,247 205,247 205,245 206,244 207,242 208,240 209,237 210,236 210,235 211,234 212,232 213,232 214,230 214,229 216,227 217,225 219,223 220,221 221,220 222,219 223,217 224,216 225,215 226,214 229,211 231,210 233,208 236,207 238,206 240,204 242,203 247,200 249,199 254,196 257,194 260,192 262,191 264,190 266,189 268,188 270,187 274,186 280,185 287,183 294,182 298,182 300,182 302,182 305,182 308,184 312,185 316,187 319,189 322,190 324,192 327,195 328,196 330,198 332,201 332,204 334,207 335,210 336,213 336,216 336,218 337,221 337,224 337,225 338,228 339,232 339,235 339,238 339,242 339,245 338,249 337,252 337,255 334,260 332,264 332,268 332,272 332,278 332,282 332,286 333,289 334,293 334,298 332,305 332,313 333,315 335,318 338,321 340,323 343,325 345,325 347,325 348,325 350,325 352,325 354,325 358,323 364,320 366,320 371,317 373,315 375,313 377,311 377,309 379,307 381,304 383,302 384,300 386,299 387,299 388,299 389,299 391,299 394,299 397,300 399,302 402,303 404,305 406,307 408,310 410,314 413,319 414,322 415,325 415,329 415,331 415,335 415,338 415,341 413,343 413,345 412,347 412,349 411,352 411,354 408,359 406,362 404,364 402,366 401,368 399,369 395,371 388,373 378,375 369,378 365,380 362,380 357,381 354,381 352,381 349,381 347,381 344,381 342,381 338,381 332,381 329,381 326,380 323,378 321,376 318,374 315,372 313,370 311,368 309,367 307,365 305,363 303,361 299,356 297,352 295,350 294,348 293,346 292,344 291,342 290,341 289,339 288,338 287,337 286,336 285,334 284,332 283,331 282,328 281,324 279,320 279,316 279,312 279,309 280,303 281,299 283,294 285,290 288,286 291,282 298,276 299,275 304,271 308,268 310,266 310,265 311,263 312,261 312,260 312,258 312,257 312,256 312,254 310,253 308,251 305,248 303,247 300,246 298,246 297,246 295,246 292,246 289,247 283,250 281,251 277,253 272,256 269,257 267,259 264,263 262,266 260,270 258,273 256,276 256,278 255,283 254,286 253,290 253,294 253,297 253,302 254,314 254,316 255,322 258,328 259,333 261,340 263,347 264,353 266,360 269,369 271,374 273,378 275,382 278,389 283,394 286,398 288,404 292,409 298,411 304,413 310,415 323,416 333,418 344,418 356,419 366,419 377,419 390,417 398,414 401,412 412,403 420,398 422,396 432,385 438,377 444,368 446,364 451,355 453,348 455,342 456,333 456,328 456,324 456,320 456,314 454,310 452,306 450,301 447,297 444,293 441,288 438,281 437,279 435,274 431,267 430,263 429,259 429,252 431,244 433,236 440,225 453,205 468,190 484,175 493,166 518,145 533,132 548,120 564,112 573,107 584,105 591,102 597,102 607,104 611,107 620,113 636,128 652,137 668,147 686,153 705,157 725,158 747,157 780,148 796,141 804,137 818,129 835,116 849,106 860,102 871,98 880,97 885,97 889,98 895,102 903,110 913,124 928,145 944,176 967,221 976,243 983,263 991,282 996,302 1001,327 1005,352 1005,381 994,426 934,493 879,521 829,539 809,543 796,538 784,528 772,502 754,467 739,444 729,427 718,417 712,410 708,406 706,401 700,393 686,385 676,379 664,373 651,372 638,376 627,381 617,391 600,410 597,417 593,438 593,448 593,462 594,477 594,488 592,495 587,502 581,505 575,505 561,499 549,489 544,483 532,457 528,432 528,406 530,396 546,349 555,339 559,335 568,327 589,311 598,306 620,294 644,287 674,280 687,278 694,281 697,283 702,287 706,293 714,300 723,309 735,317 748,323 768,326 783,324 796,320 804,312 810,302 812,296 815,289 815,278 815,270 815,262 813,256 811,252 810,251 810,249 811,248 815,246 821,245 831,245 845,245 860,247 881,250 893,250 ">
|
|
52
|
+
</polyline>
|
|
53
|
+
</svg>
|
|
54
|
+
<div class='element'>→</div>
|
|
55
|
+
<div class="logs"></div>
|
|
56
|
+
|
|
57
|
+
<script>
|
|
58
|
+
|
|
59
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
60
|
+
const logsElem = document.querySelector(".logs");
|
|
61
|
+
function log(str) {
|
|
62
|
+
logsElem.innerHTML += str;
|
|
63
|
+
logsElem.appendChild(document.createElement("br"));
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
const fp = new FollowPath({ // creates an instance.
|
|
67
|
+
element: document.querySelector('.element'), // element to animate.
|
|
68
|
+
duration: 9000, // duration per iteration (in ms).
|
|
69
|
+
path: document.querySelector('polyline'), // path to follow (can be a polyline or path element).
|
|
70
|
+
iterations: 2.5, // number of times the element will animate over the path.
|
|
71
|
+
rotate: true, // whether to rotate the element along the path. (optional, false by default)
|
|
72
|
+
|
|
73
|
+
easing(t) { // easing function to control animation pacing. (optional)
|
|
74
|
+
// easeInOutCubic example
|
|
75
|
+
return t < 0.5
|
|
76
|
+
? 4 * t * t * t
|
|
77
|
+
: 1 - Math.pow(-2 * t + 2, 3) / 2;
|
|
78
|
+
},
|
|
79
|
+
|
|
80
|
+
callback() { // callback function, called after all iterations are completed. (optional)
|
|
81
|
+
console.log('done');
|
|
82
|
+
},
|
|
83
|
+
|
|
84
|
+
timeline: { // timeline callback object. (optional)
|
|
85
|
+
'0%'() { console.log('started') },
|
|
86
|
+
'25%'() { console.log('25% completed') },
|
|
87
|
+
'50%'() { console.log('half completed') },
|
|
88
|
+
'75%'() { console.log('75% completed') },
|
|
89
|
+
} // timeline keys must be in percentages!
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
log("started animation");
|
|
93
|
+
fp.animate(); // starts the animation
|
|
94
|
+
|
|
95
|
+
setTimeout(() => {
|
|
96
|
+
fp.pause(); // pauses the animation after 1s
|
|
97
|
+
log("paused for 1 second");
|
|
98
|
+
setTimeout(() => {
|
|
99
|
+
fp.play();
|
|
100
|
+
log("resumed");
|
|
101
|
+
}, 1000); // resumes animation after another second
|
|
102
|
+
}, 1000);
|
|
103
|
+
|
|
104
|
+
setTimeout(() => {
|
|
105
|
+
console.log(`fps: ${fp.fps}\niterations: ${fp.iterations}`);
|
|
106
|
+
fp.stop(); // stops the animation after 6 seconds.
|
|
107
|
+
log("stopping the animation after 8.5 second by force.");
|
|
108
|
+
log("logged fps and completed iterations at the instant in the console.");
|
|
109
|
+
// Note: Stopping the animation by interruption doesn't call the callback.
|
|
110
|
+
}, 8500);
|
|
111
|
+
|
|
112
|
+
})
|
|
113
|
+
|
|
114
|
+
</script>
|
|
115
|
+
</body>
|
|
116
|
+
|
|
117
|
+
</html>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
class FollowPath{#t;#e;#i;#s;#a;#n;#r;#o={clamp:t=>1,loop:t=>t>1?t%1:1-t%1,pingpong:t=>t>1?1-t%1:-t%1};#h;#l;path;iterations;callback;delay;easing;scale;fps;constructor(t){if(!this.#p(t))throw Error("Invalid Config.");const{element:e,duration:i,path:s,iterations:a,callback:n,rotate:r,timeline:o,toScale:h,delay:l,mode:p,easing:u}=t,c=s.getBBox(),d=s.getBoundingClientRect();this.#t=e,this.#e=i/a,this.#i=i,this.path=s,this.#n=a,this.iterations=a,this.callback=n,this.delay=l,this.easing=u||(t=>t),this.#r="function"==typeof p?p:p&&Object.keys(this.#o).includes(p)?this.#o[p]:this.#o.clamp,this.scale=h?{x:d.width/c.width,y:d.height/c.height}:{x:1,y:1},this.#a=r||!1,this.#h=o,this.#l=o?Object.keys(o).map((t=>Number(t.slice(0,t.length-1)))).sort(((t,e)=>e-t)):null,this.#s=!1}animate(t){let e,i;if(t&&(e=t.iterNumber,i=t.singleFrame),!this.path||!this.#t||!this.#e)throw Error(`Runtime Error (FollowPath): ${this.path?this.#t?this.#e?"":"Duration":"Element":"Path"} not specified.`);e||(e=0),this.fps=void 0;let s=null;const a=this.path.getTotalLength();if((this.#n<=0||e>this.#n)&&this.callback)return this.fps=void 0,void this.callback();const n=t=>{const e=a*this.easing(t/a);return e>a||e<0?this.#r(e):e},r=e-Math.floor(e);let o=a/this.#e*(1/(this.fps||60)),h=a*r;this.iterations=e;const l=()=>{if(e=this.iterations,this.#s||e>=this.#n)return this.fps=void 0,void(!this.#s&&this.callback&&this.callback());if(h>=a)return void(e<=this.#n&&(this.delay?setTimeout((()=>requestAnimationFrame((()=>this.animate({iterNumber:e})))),this.delay):requestAnimationFrame((()=>this.animate({iterNumber:e})))));if(s){const t=Date.now()-s;this.fps=1e3/t,o=a/this.#e*t}if(this.#h&&this.#l)for(;e/this.#n*100>=this.#l[this.#l.length-1];){const t=this.#l.pop();t&&this.#h[`${t}%`]()}let t=this.path.getPointAtLength(n(h)),i=this.path.getPointAtLength(n(h+1)),r=0;if(i.x!==this.path.getPointAtLength(a).x||i.y!==this.path.getPointAtLength(a).y)r=180*Math.atan2(i.y-t.y,i.x-t.x)/Math.PI;else{let e=this.path.getPointAtLength(h-1);r=180*Math.atan2(t.y-e.y,t.x-e.x)/Math.PI}this.#t.style.transform=`translate(${t.x*this.scale.x}px, ${t.y*this.scale.y}px)${this.#a?` rotate(${r}deg)`:""}`,h+=o,e+=o/a,this.iterations=e,s=Date.now(),requestAnimationFrame(l)};s=Date.now(),requestAnimationFrame(l)}renderFrame(t){this.animate({singleFrame:!0,iterNumber:t?t/(this.#i/50*3):this.iterations})}play(){this.#s=!1,this.animate({iterNumber:this.iterations})}pause(){this.#s=!0}stop(){this.#s=!0,this.iterations=0}getProgress(){return this.iterations/this.#n*100}setProgress(t){this.iterations=t*this.#n/100}getCurrentIterationProgress(){return 100*(this.#n-Math.floor(this.#n))}setCurrentIterationProgress(t){this.iterations=Math.floor(this.iterations)+t/100}#p(t){if(!t||"object"!=typeof t||Array.isArray(t))return!1;const{duration:e,path:i,element:s,iterations:a,easing:n,mode:r,delay:o,toScale:h,rotate:l,callback:p,timeline:u}=t;if("number"!=typeof e||Number.isNaN(e)||!i||!s||"number"!=typeof a||Number.isNaN(a)||"function"!=typeof n||r&&"function"!=typeof r&&!Object.keys(this.#o).includes(r))return!1;if(void 0!==o&&("number"!=typeof o||Number.isNaN(o)))return!1;if(void 0!==h&&"boolean"!=typeof h)return!1;if(void 0!==l&&"boolean"!=typeof l)return!1;if(void 0!==p&&"function"!=typeof p)return!1;if(void 0!==u){if("object"!=typeof u||Array.isArray(u))return!1;for(const t in u){if(!/^(\d{1,3})%$/.test(t))return!1;if("function"!=typeof u[t])return!1}}return!0}}
|
|
2
|
+
window.FollowPath = FollowPath;
|
|
3
|
+
export default FollowPath;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"rootTitle":"SMM Ghostly Fixture","description":"A fixture for testing ghostly operations in SMM.","baseRoute":"/","defaultTheme":"light","name":"Ghostly Store","showNameWithLogo":true,"routes":[{"path":"/","content":"<h1>hello this is main md</h1>\n<p><a href=\"/features\">features</a></p>\n"},{"path":"/features","content":"<h1>features</h1>\n<p>browse features:</p>\n<ul>\n<li><a href=\"/features/coffee\">coffee</a></li>\n<li><a href=\"/features/tea\">tea</a></li>\n<li><a href=\"/features/choorma\">choorma</a></li>\n<li><a href=\"/features/ghee-dudh\">ghee dudh</a></li>\n</ul>\n"},{"path":"/features/choorma","content":"<h1>choorma khao body bnao</h1>\n<p>price: nani dedo 10 minute choorma bnane ke liye :moon:</p>\n"},{"path":"/features/coffee","content":"<h1>co-fee</h1>\n<p>price: $2</p>\n"},{"path":"/features/ghee-dudh","content":"<h1>ghee dudh kha ladle</h1>\n<p>price: 1 lakh de bhais le</p>\n"},{"path":"/features/tea","content":"<h1>tea-tty</h1>\n<p>price: $69</p>\n"},{"path":"/muah","content":"<h1>Markdown Feature Showcase</h1>\n<h2>Headings</h2>\n<h1>H1 Heading</h1>\n<h2>H2 Heading</h2>\n<h3>H3 Heading</h3>\n<h4>H4 Heading</h4>\n<hr />\n<h2>Text Styles</h2>\n<ul>\n<li><em>Italic</em></li>\n<li><strong>Bold</strong></li>\n<li><em><strong>Bold Italic</strong></em></li>\n<li><s>Strikethrough</s></li>\n</ul>\n<hr />\n<h2>Links</h2>\n<p><a href=\"https://openai.com\">OpenAI</a></p>\n<hr />\n<h2>Images</h2>\n<p><img src=\"https://thumbs.dreamstime.com/b/fearsome-ancient-spartan-warrior-greece-red-cloak-spartan-helmet-night-spartan-movie-scene-action-sequence-spartan-helmet-284208996.jpg?w=360\" alt=\"Placeholder\" /></p>\n<hr />\n<h2>Blockquote</h2>\n<blockquote>\n<p>This is a blockquote example.<br />\nIt spans multiple lines.</p>\n</blockquote>\n<hr />\n<h2>Code (using indentation, not backticks)</h2>\n<p>Inline code example: <code>print("Hello World")</code></p>\n<pre class=\"language-python\"><code class=\"language-python\"> <span class=\"token keyword\">def</span> <span class=\"token function\">greet</span><span class=\"token punctuation\">(</span>name<span class=\"token punctuation\">)</span><span class=\"token punctuation\">:</span>\n <span class=\"token keyword\">return</span> <span class=\"token string\">\"Hello \"</span> <span class=\"token operator\">+</span> name\n\n <span class=\"token keyword\">print</span><span class=\"token punctuation\">(</span>greet<span class=\"token punctuation\">(</span><span class=\"token string\">\"Markdown\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n</code></pre>\n<hr />\n<h2>Lists</h2>\n<h3>Unordered List</h3>\n<ul>\n<li>Item A</li>\n<li>Item B\n<ul>\n<li>Subitem B1</li>\n<li>Subitem B2</li>\n</ul>\n</li>\n</ul>\n<h3>Ordered List</h3>\n<ol>\n<li>Step One</li>\n<li>Step Two</li>\n<li>Step Three</li>\n</ol>\n<hr />\n<h2>Checkboxes</h2>\n<ul class=\"contains-task-list\">\n<li class=\"task-list-item\"><input class=\"task-list-item-checkbox\" checked=\"\" disabled=\"\" type=\"checkbox\"> Completed</li>\n<li class=\"task-list-item\"><input class=\"task-list-item-checkbox\" disabled=\"\" type=\"checkbox\"> Not Completed</li>\n<li class=\"task-list-item\"><input class=\"task-list-item-checkbox\" disabled=\"\" type=\"checkbox\"> Pending</li>\n</ul>\n<hr />\n<h2>Table</h2>\n<table>\n<thead>\n<tr>\n<th>Product</th>\n<th>Price</th>\n<th>In Stock</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Apple</td>\n<td>$1</td>\n<td>Yes</td>\n</tr>\n<tr>\n<td>Banana</td>\n<td>$0.5</td>\n<td>No</td>\n</tr>\n<tr>\n<td>Orange</td>\n<td>$0.8</td>\n<td>Yes</td>\n</tr>\n</tbody>\n</table>\n<hr />\n<h2>Horizontal Rule</h2>\n<hr />\n<hr />\n<h2>Emoji</h2>\n<p>😀 🚀 🎉 ❤️🔥</p>\n<hr />\n<h2>Footnotes</h2>\n<p>This is a sentence with a footnote.<sup class=\"footnote-ref\"><a href=\"#fn1\" id=\"fnref1\">[1]</a></sup></p>\n<hr />\n<h2>HTML Support</h2>\n<div style=\"color: green;\">This line uses HTML styling.</div>\n<hr />\n<h2>Done Checklist</h2>\n<ul class=\"contains-task-list\">\n<li class=\"task-list-item\"><input class=\"task-list-item-checkbox\" checked=\"\" disabled=\"\" type=\"checkbox\"> Includes tables</li>\n<li class=\"task-list-item\"><input class=\"task-list-item-checkbox\" checked=\"\" disabled=\"\" type=\"checkbox\"> Includes checkboxes</li>\n<li class=\"task-list-item\"><input class=\"task-list-item-checkbox\" checked=\"\" disabled=\"\" type=\"checkbox\"> Includes code (indent-based)</li>\n<li class=\"task-list-item\"><input class=\"task-list-item-checkbox\" checked=\"\" disabled=\"\" type=\"checkbox\"> Includes emojis</li>\n<li class=\"task-list-item\"><input class=\"task-list-item-checkbox\" checked=\"\" disabled=\"\" type=\"checkbox\"> Includes all Markdown features</li>\n</ul>\n<hr class=\"footnotes-sep\" />\n<section class=\"footnotes\">\n<ol class=\"footnotes-list\">\n<li id=\"fn1\" class=\"footnote-item\"><p>This is the footnote explanation. <a href=\"#fnref1\" class=\"footnote-backref\">↩︎</a></p>\n</li>\n</ol>\n</section>\n"},{"path":"/zaram-chand","content":"<h1>Mohandas Karam Chand Gandhi</h1>\n<p>He was also known as Mahatma Gandhi Thaave Aandhi.</p>\n"},{"path":"/tos","content":"<h1>Terms of Services</h1>\n<p>We only serve people with a knack for cooking. If you don't cook, you're not welcome.</p>\n"}],"outDir":"dist","fonts":{"title":"Sorts Mill Goudy","body":"Montserrat","mono":"monospace"},"version":"1.0.0 LTS"}
|
|
1
|
+
{"rootTitle":"FollowPath Docs","description":"Documentation for the FollowPath library — animate HTML elements along SVG paths.","baseRoute":"/","defaultTheme":"dark","name":"Serve My MD","showNameWithLogo":true,"routes":[{"path":"/","content":"<h1>FollowPath</h1>\n<p>A <strong>VanillaJS</strong> library to animate HTML elements along an SVG path with custom durations, iterations, easing, and lifecycle callbacks.</p>\n<h2>Features</h2>\n<ul>\n<li>Animate elements along any SVG <code><path></code> or <code><polyline></code></li>\n<li>Custom duration and rational iteration count (including <code>Infinity</code>)</li>\n<li>Configurable delay between iterations</li>\n<li>Path scale compensation (<code>toScale</code>)</li>\n<li>Rotation along the path tangent (<code>rotate</code>)</li>\n<li>Easing functions for custom pacing</li>\n<li>Timeline callbacks at arbitrary percentage points</li>\n<li>Animation modes: <code>clamp</code>, <code>loop</code>, <code>pingpong</code>, or custom</li>\n<li>Play / Pause / Stop controls</li>\n<li>Real-time FPS and iteration tracking</li>\n<li>Frame-accurate rendering with <code>renderFrame</code></li>\n<li>Progress getters and setters</li>\n</ul>\n<p>Check out the <a href=\"/demo\">live demo</a>.</p>\n<h2>Installation</h2>\n<pre class=\"language-bash\"><code class=\"language-bash\"><span class=\"token function\">npm</span> i follow-path\n</code></pre>\n<p>Or clone from <a href=\"https://github.com/AshishAntil07/FollowPath.git\">GitHub</a>.</p>\n<hr />\n<ul>\n<li><a href=\"/getting-started\">Getting Started</a></li>\n<li><a href=\"/usage\">Usage</a></li>\n<li><a href=\"/constructor-config\">Constructor Config</a></li>\n<li><a href=\"/methods\">Methods</a></li>\n<li><a href=\"/properties\">Properties</a></li>\n<li><a href=\"/modes\">Modes</a></li>\n<li><a href=\"/basic-animation\">Basic Animation</a></li>\n<li><a href=\"/timeline-and-easing\">Timeline and Easing</a></li>\n</ul>\n"},{"path":"/getting-started","content":"<h1>Getting Started</h1>\n<h2>Install</h2>\n<pre class=\"language-bash\"><code class=\"language-bash\"><span class=\"token function\">npm</span> i follow-path\n</code></pre>\n<h2>Import</h2>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">import</span> FollowPath <span class=\"token keyword\">from</span> <span class=\"token string\">'follow-path'</span><span class=\"token punctuation\">;</span>\n</code></pre>\n<p>Or include the built file directly:</p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>node_modules/follow-path/dist/index.js<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span>\n</code></pre>\n<h2>Minimal setup</h2>\n<pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>svg</span> <span class=\"token attr-name\">height</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>700<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">width</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>1000<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>polyline</span> <span class=\"token attr-name\">points</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>0,350 200,100 400,400 600,50 1000,350<span class=\"token punctuation\">\"</span></span>\n <span class=\"token attr-name\">style</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>fill:transparent;stroke:black;stroke-width:5px<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>svg</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>element<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n</code></pre>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const</span> fp <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">FollowPath</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n <span class=\"token literal-property property\">element</span><span class=\"token operator\">:</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">querySelector</span><span class=\"token punctuation\">(</span><span class=\"token string\">'.element'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n <span class=\"token literal-property property\">duration</span><span class=\"token operator\">:</span> <span class=\"token number\">3000</span><span class=\"token punctuation\">,</span>\n <span class=\"token literal-property property\">path</span><span class=\"token operator\">:</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">querySelector</span><span class=\"token punctuation\">(</span><span class=\"token string\">'polyline'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n <span class=\"token literal-property property\">iterations</span><span class=\"token operator\">:</span> <span class=\"token number\">2</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\nfp<span class=\"token punctuation\">.</span><span class=\"token function\">animate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre>\n"},{"path":"/usage","content":"<h1>Usage</h1>\n<p>Create a <code>FollowPath</code> instance with your element, path, and timing options, then call <code>.animate()</code>.</p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const</span> fp <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">FollowPath</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n <span class=\"token literal-property property\">element</span><span class=\"token operator\">:</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">querySelector</span><span class=\"token punctuation\">(</span><span class=\"token string\">'.element'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n <span class=\"token literal-property property\">duration</span><span class=\"token operator\">:</span> <span class=\"token number\">3000</span><span class=\"token punctuation\">,</span>\n <span class=\"token literal-property property\">path</span><span class=\"token operator\">:</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">querySelector</span><span class=\"token punctuation\">(</span><span class=\"token string\">'polyline'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n <span class=\"token literal-property property\">iterations</span><span class=\"token operator\">:</span> <span class=\"token number\">2.5</span><span class=\"token punctuation\">,</span>\n <span class=\"token literal-property property\">rotate</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n <span class=\"token literal-property property\">delay</span><span class=\"token operator\">:</span> <span class=\"token number\">500</span><span class=\"token punctuation\">,</span>\n\n <span class=\"token function\">easing</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">t</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> t <span class=\"token operator\"><</span> <span class=\"token number\">0.5</span>\n <span class=\"token operator\">?</span> <span class=\"token number\">4</span> <span class=\"token operator\">*</span> t <span class=\"token operator\">*</span> t <span class=\"token operator\">*</span> t\n <span class=\"token operator\">:</span> <span class=\"token number\">1</span> <span class=\"token operator\">-</span> Math<span class=\"token punctuation\">.</span><span class=\"token function\">pow</span><span class=\"token punctuation\">(</span><span class=\"token operator\">-</span><span class=\"token number\">2</span> <span class=\"token operator\">*</span> t <span class=\"token operator\">+</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">3</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">/</span> <span class=\"token number\">2</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n\n <span class=\"token function\">callback</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'done'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n\n <span class=\"token literal-property property\">timeline</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">'0%'</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'started'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">'25%'</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'25%'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">'50%'</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'halfway'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">'75%'</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'75%'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\nfp<span class=\"token punctuation\">.</span><span class=\"token function\">animate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre>\n<h2>Controls</h2>\n<pre class=\"language-js\"><code class=\"language-js\">fp<span class=\"token punctuation\">.</span><span class=\"token function\">pause</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// pause mid-animation</span>\nfp<span class=\"token punctuation\">.</span><span class=\"token function\">play</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// resume</span>\nfp<span class=\"token punctuation\">.</span><span class=\"token function\">stop</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// stop and reset progress</span>\n</code></pre>\n<h2>Progress tracking</h2>\n<pre class=\"language-js\"><code class=\"language-js\">console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">fps: </span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>fp<span class=\"token punctuation\">.</span>fps<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">progress: </span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>fp<span class=\"token punctuation\">.</span><span class=\"token function\">getProgress</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\">%</span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre>\n"},{"path":"/constructor-config","content":"<h1>Constructor Config</h1>\n<p>The <code>FollowPath</code> constructor accepts a single configuration object with the following properties:</p>\n<h2>Required</h2>\n<h3><code>element</code></h3>\n<p>Type: <code>HTMLElement</code></p>\n<p>The DOM element to animate along the path.</p>\n<h3><code>duration</code></h3>\n<p>Type: <code>number</code> (ms)</p>\n<p>Total duration of the animation across all iterations.</p>\n<h3><code>path</code></h3>\n<p>Type: <code>SVGPathElement | SVGPolylineElement</code></p>\n<p>The SVG path or polyline element defining the trajectory.</p>\n<h3><code>iterations</code></h3>\n<p>Type: <code>number</code></p>\n<p>Number of times the element traverses the path. Can be a floating point for partial traversal, or <code>Infinity</code> for infinite looping (callback will never fire).</p>\n<h2>Optional</h2>\n<h3><code>delay</code></h3>\n<p>Type: <code>number</code> (ms)</p>\n<p>Delay between each iteration before the next one starts.</p>\n<h3><code>toScale</code></h3>\n<p>Type: <code>boolean</code></p>\n<p>When <code>true</code>, compensates for differences between the SVG's internal coordinate system and the rendered bounding box, keeping the animation aligned with the visual path.</p>\n<h3><code>rotate</code></h3>\n<p>Type: <code>boolean</code></p>\n<p>When <code>true</code>, the element is automatically rotated to follow the path's tangent direction.</p>\n<h3><code>callback</code></h3>\n<p>Type: <code>() => void</code></p>\n<p>Function called once after all iterations complete. Not called if animation is stopped via <code>.stop()</code> or interrupted.</p>\n<h3><code>easing</code></h3>\n<p>Type: <code>(t: number) => number</code></p>\n<p>A function that maps progress <code>t</code> (0 to 1) to a eased value. Defaults to linear <code>(t) => t</code>.</p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token function\">easing</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">t</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> t <span class=\"token operator\">*</span> t<span class=\"token punctuation\">;</span> <span class=\"token comment\">// ease-in</span>\n<span class=\"token punctuation\">}</span>\n</code></pre>\n<h3><code>timeline</code></h3>\n<p>Type: <code>{ [key: </code>${number}%<code>]: () => void }</code></p>\n<p>An object whose keys are percentage strings (e.g. <code>'50%'</code>) and values are callbacks fired when the animation reaches that point.</p>\n<h3><code>mode</code></h3>\n<p>Type: <code>'pingpong' | 'loop' | 'clamp' | ((t: number) => number)</code></p>\n<p>Defines behavior when the animation exceeds the path length:</p>\n<ul>\n<li><code>'clamp'</code> — holds at the end position (default)</li>\n<li><code>'loop'</code> — wraps around to the start</li>\n<li><code>'pingpong'</code> — reverses direction each iteration</li>\n<li>Custom function — maps exceeded progress values manually</li>\n</ul>\n"},{"path":"/methods","content":"<h1>Methods</h1>\n<h2><code>animate(options?)</code></h2>\n<p>Starts the animation. Can be called with optional parameters:</p>\n<pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token function\">animate</span><span class=\"token punctuation\">(</span>options<span class=\"token operator\">?</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> iterNumber<span class=\"token operator\">?</span><span class=\"token operator\">:</span> <span class=\"token builtin\">number</span><span class=\"token punctuation\">;</span> singleFrame<span class=\"token operator\">?</span><span class=\"token operator\">:</span> <span class=\"token builtin\">boolean</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n</code></pre>\n<ul>\n<li><code>iterNumber</code> — start from a specific iteration (float for partial position, default <code>0</code>)</li>\n<li><code>singleFrame</code> — render only one frame instead of the full animation</li>\n</ul>\n<h2><code>play()</code></h2>\n<p>Resumes a paused animation from its current position.</p>\n<h2><code>pause()</code></h2>\n<p>Pauses the animation at the current frame. Call <code>.play()</code> to resume.</p>\n<h2><code>stop()</code></h2>\n<p>Stops the animation and resets progress to <code>0</code>. The <code>callback</code> is <strong>not</strong> called when stopped via interruption.</p>\n<h2><code>renderFrame(frameNumber?)</code></h2>\n<p>Renders a specific frame. If no argument is given, renders the next frame based on current progress.</p>\n<pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token function\">renderFrame</span><span class=\"token punctuation\">(</span>frameNumber<span class=\"token operator\">?</span><span class=\"token operator\">:</span> <span class=\"token builtin\">number</span><span class=\"token punctuation\">)</span>\n</code></pre>\n<h2><code>getProgress()</code></h2>\n<p>Returns the total progress as a percentage of all iterations.</p>\n<pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token function\">getProgress</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token operator\">:</span> <span class=\"token builtin\">number</span>\n</code></pre>\n<h2><code>setProgress(percentage)</code></h2>\n<p>Sets the total progress to a specific percentage.</p>\n<pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token function\">setProgress</span><span class=\"token punctuation\">(</span>percentage<span class=\"token operator\">:</span> <span class=\"token builtin\">number</span><span class=\"token punctuation\">)</span><span class=\"token operator\">:</span> <span class=\"token keyword\">void</span>\n</code></pre>\n<h2><code>getCurrentIterationProgress()</code></h2>\n<p>Returns the progress of the current iteration only (a whole iteration = 100%).</p>\n<pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token function\">getCurrentIterationProgress</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token operator\">:</span> <span class=\"token builtin\">number</span>\n</code></pre>\n<h2><code>setCurrentIterationProgress(percentage)</code></h2>\n<p>Sets the progress of the current iteration without affecting the iteration count.</p>\n<pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token function\">setCurrentIterationProgress</span><span class=\"token punctuation\">(</span>percentage<span class=\"token operator\">:</span> <span class=\"token builtin\">number</span><span class=\"token punctuation\">)</span><span class=\"token operator\">:</span> <span class=\"token keyword\">void</span>\n</code></pre>\n"},{"path":"/properties","content":"<h1>Properties</h1>\n<h2>Public properties</h2>\n<table>\n<thead>\n<tr>\n<th>Property</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><code>path</code></td>\n<td><code>SVGPathElement | SVGPolylineElement</code></td>\n<td>The SVG path being animated</td>\n</tr>\n<tr>\n<td><code>iterations</code></td>\n<td><code>number</code></td>\n<td>Current iteration count (readable / writable)</td>\n</tr>\n<tr>\n<td><code>callback</code></td>\n<td><code>(() => void) | undefined</code></td>\n<td>Completion callback</td>\n</tr>\n<tr>\n<td><code>delay</code></td>\n<td><code>number | undefined</code></td>\n<td>Delay between iterations (ms)</td>\n</tr>\n<tr>\n<td><code>easing</code></td>\n<td><code>(t: number) => number</code></td>\n<td>Current easing function</td>\n</tr>\n<tr>\n<td><code>scale</code></td>\n<td><code>{ x: number; y: number }</code></td>\n<td>Active scale compensation factors</td>\n</tr>\n<tr>\n<td><code>fps</code></td>\n<td><code>number | undefined</code></td>\n<td>Measured frames per second (updates each frame)</td>\n</tr>\n</tbody>\n</table>\n"},{"path":"/modes","content":"<h1>Modes</h1>\n<p>The <code>mode</code> option controls what happens when the animation reaches or exceeds the end of the path.</p>\n<h2><code>'clamp'</code> (default)</h2>\n<p>Stops at the end of the path and holds the final position.</p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const</span> fp <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">FollowPath</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// ...</span>\n <span class=\"token literal-property property\">mode</span><span class=\"token operator\">:</span> <span class=\"token string\">'clamp'</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre>\n<h2><code>'loop'</code></h2>\n<p>Wraps around to the start each time the end is reached, creating a seamless repeat.</p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const</span> fp <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">FollowPath</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// ...</span>\n <span class=\"token literal-property property\">mode</span><span class=\"token operator\">:</span> <span class=\"token string\">'loop'</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre>\n<h2><code>'pingpong'</code></h2>\n<p>Reverses direction on each iteration, creating a back-and-forth effect.</p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const</span> fp <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">FollowPath</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// ...</span>\n <span class=\"token literal-property property\">mode</span><span class=\"token operator\">:</span> <span class=\"token string\">'pingpong'</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre>\n<h2>Custom function</h2>\n<p>Provide your own function to handle exceeded progress values manually. Receives the raw exceeded value and must return a clamped/remapped value.</p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const</span> fp <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">FollowPath</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// ...</span>\n <span class=\"token function\">mode</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">t</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> t <span class=\"token operator\">></span> <span class=\"token number\">1</span> <span class=\"token operator\">?</span> <span class=\"token number\">1</span> <span class=\"token operator\">-</span> <span class=\"token punctuation\">(</span>t <span class=\"token operator\">%</span> <span class=\"token number\">1</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">:</span> t<span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre>\n"},{"path":"/basic-animation","content":"<h1>Basic Animation</h1>\n<p>Animate a <code><div></code> along an SVG <code><polyline></code> with rotation and play/pause/stop controls.</p>\n<pre class=\"language-xml\"><code class=\"language-xml\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>svg</span> <span class=\"token attr-name\">xmlns</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>http://www.w3.org/2000/svg<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">height</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>700<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">width</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>1000<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>polyline</span>\n <span class=\"token attr-name\">points</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>198,264 200,259 202,256 300,200 500,300 700,150 893,250<span class=\"token punctuation\">\"</span></span>\n <span class=\"token attr-name\">style</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>fill: transparent; stroke: black; stroke-width: 5px;<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>svg</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>element<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n</code></pre>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const</span> fp <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">FollowPath</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n <span class=\"token literal-property property\">element</span><span class=\"token operator\">:</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">querySelector</span><span class=\"token punctuation\">(</span><span class=\"token string\">'.element'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n <span class=\"token literal-property property\">duration</span><span class=\"token operator\">:</span> <span class=\"token number\">3000</span><span class=\"token punctuation\">,</span>\n <span class=\"token literal-property property\">path</span><span class=\"token operator\">:</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">querySelector</span><span class=\"token punctuation\">(</span><span class=\"token string\">'polyline'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n <span class=\"token literal-property property\">iterations</span><span class=\"token operator\">:</span> <span class=\"token number\">2.5</span><span class=\"token punctuation\">,</span>\n <span class=\"token literal-property property\">rotate</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n <span class=\"token function\">callback</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'done'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\nfp<span class=\"token punctuation\">.</span><span class=\"token function\">animate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// Pause after 1 second</span>\n<span class=\"token function\">setTimeout</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> fp<span class=\"token punctuation\">.</span><span class=\"token function\">pause</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1000</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// Resume after another second</span>\n<span class=\"token function\">setTimeout</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> fp<span class=\"token punctuation\">.</span><span class=\"token function\">play</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2000</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// Stop after 6 seconds</span>\n<span class=\"token function\">setTimeout</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">fps: </span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>fp<span class=\"token punctuation\">.</span>fps<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\">, iterations: </span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>fp<span class=\"token punctuation\">.</span>iterations<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n fp<span class=\"token punctuation\">.</span><span class=\"token function\">stop</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token number\">6000</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre>\n"},{"path":"/timeline-and-easing","content":"<h1>Timeline and Easing</h1>\n<p>Use timeline callbacks to trigger actions at specific percentages, and a custom easing function to control animation pacing.</p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const</span> fp <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">FollowPath</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n <span class=\"token literal-property property\">element</span><span class=\"token operator\">:</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">querySelector</span><span class=\"token punctuation\">(</span><span class=\"token string\">'.element'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n <span class=\"token literal-property property\">duration</span><span class=\"token operator\">:</span> <span class=\"token number\">4000</span><span class=\"token punctuation\">,</span>\n <span class=\"token literal-property property\">path</span><span class=\"token operator\">:</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">querySelector</span><span class=\"token punctuation\">(</span><span class=\"token string\">'path'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n <span class=\"token literal-property property\">iterations</span><span class=\"token operator\">:</span> <span class=\"token number\">3</span><span class=\"token punctuation\">,</span>\n <span class=\"token literal-property property\">rotate</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n <span class=\"token literal-property property\">delay</span><span class=\"token operator\">:</span> <span class=\"token number\">300</span><span class=\"token punctuation\">,</span>\n\n <span class=\"token function\">easing</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">t</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// easeOutElastic</span>\n <span class=\"token keyword\">const</span> c4 <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token number\">2</span> <span class=\"token operator\">*</span> Math<span class=\"token punctuation\">.</span><span class=\"token constant\">PI</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">/</span> <span class=\"token number\">3</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">return</span> t <span class=\"token operator\">===</span> <span class=\"token number\">0</span>\n <span class=\"token operator\">?</span> <span class=\"token number\">0</span>\n <span class=\"token operator\">:</span> t <span class=\"token operator\">===</span> <span class=\"token number\">1</span>\n <span class=\"token operator\">?</span> <span class=\"token number\">1</span>\n <span class=\"token operator\">:</span> Math<span class=\"token punctuation\">.</span><span class=\"token function\">pow</span><span class=\"token punctuation\">(</span><span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token operator\">-</span><span class=\"token number\">10</span> <span class=\"token operator\">*</span> t<span class=\"token punctuation\">)</span> <span class=\"token operator\">*</span> Math<span class=\"token punctuation\">.</span><span class=\"token function\">sin</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span>t <span class=\"token operator\">*</span> <span class=\"token number\">10</span> <span class=\"token operator\">-</span> <span class=\"token number\">0.75</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">*</span> c4<span class=\"token punctuation\">)</span> <span class=\"token operator\">+</span> <span class=\"token number\">1</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n\n <span class=\"token literal-property property\">timeline</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">'0%'</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'animation started'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">'33%'</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'first third done'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">'66%'</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'two thirds done'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">'100%'</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'iteration complete'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n\n <span class=\"token function\">callback</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'all iterations finished'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\nfp<span class=\"token punctuation\">.</span><span class=\"token function\">animate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre>\n"}],"outDir":"docs","fonts":{"title":"serif","body":"sans-serif","mono":"monospace"}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[{"label":"","children":null,"pathSegment":""},{"label":"
|
|
1
|
+
[{"label":"","children":null,"pathSegment":""},{"label":"public","children":[{"label":"demo","children":[],"pathSegment":"demo","isGrouper":false}],"pathSegment":"public","isGrouper":false},{"label":"Guide","children":[{"label":"Getting Started","children":null,"pathSegment":"getting-started"},{"label":"Usage","children":null,"pathSegment":"usage"}],"pathSegment":"","isGrouper":true},{"label":"API Reference","children":[{"label":"Constructor Config","children":null,"pathSegment":"constructor-config"},{"label":"Methods","children":null,"pathSegment":"methods"},{"label":"Properties","children":null,"pathSegment":"properties"},{"label":"Modes","children":null,"pathSegment":"modes"}],"pathSegment":"","isGrouper":true},{"label":"Examples","children":[{"label":"Basic Animation","children":null,"pathSegment":"basic-animation"},{"label":"Timeline and Easing","children":null,"pathSegment":"timeline-and-easing"}],"pathSegment":"","isGrouper":true}]
|
|
@@ -59,7 +59,8 @@ export default function Rendrer({
|
|
|
59
59
|
article.querySelectorAll('a').forEach((elem: HTMLAnchorElement) => {
|
|
60
60
|
if (
|
|
61
61
|
elem.getAttribute('href')?.startsWith('http://') ||
|
|
62
|
-
elem.getAttribute('href')?.startsWith('https://')
|
|
62
|
+
elem.getAttribute('href')?.startsWith('https://') ||
|
|
63
|
+
!out.routes.find((r) => r.path === elem.getAttribute('href'))
|
|
63
64
|
)
|
|
64
65
|
return;
|
|
65
66
|
|