Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ashishantil07/followpath
JS Library to animate elements over a path.
https://github.com/ashishantil07/followpath
javascript npm npm-package svg vanilla-js
Last synced: 3 days ago
JSON representation
JS Library to animate elements over a path.
- Host: GitHub
- URL: https://github.com/ashishantil07/followpath
- Owner: AshishAntil07
- License: mit
- Created: 2023-12-29T09:00:12.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-10-06T16:08:12.000Z (3 months ago)
- Last Synced: 2024-12-17T17:15:13.753Z (7 days ago)
- Topics: javascript, npm, npm-package, svg, vanilla-js
- Language: HTML
- Homepage:
- Size: 4.88 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# FollowPath
A JavaScript package to animate HTML elements along an SVG path with custom durations, iterations, and a callback function after the animation.
## Features
- Animate multiple elements along a given SVG path.
- Specify custom durations for each element.
- Set the number of iterations for the animation.
- Callback function support after the animation completes.
## Installation
You can install this package in two ways:
- Install using npm(or your preferred package manager):
```bash
npm i follow-path
```
- Clone the repository to your local machine:
```bash
git clone https://github.com/AshishAntil07/FollowPath.git
```
## Usage
Here's a basic example to animate an element along a polyline path:
```xml
```
```js
new FollowPath(
[document.querySelector('.element')], // elements to animate through the path
[10000], // duration(in ms) of one iteration, corresponding to the elements
document.querySelector('polyline'), // reference to the svg path/polyline element
2, // number of iterations
() => { console.log('done') } // callback
).animate(); // start the animation
```