https://github.com/inker/animate-svg
https://github.com/inker/animate-svg
animate line path svg
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/inker/animate-svg
- Owner: inker
- Created: 2017-03-02T17:53:28.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-10-28T17:26:05.000Z (over 7 years ago)
- Last Synced: 2025-03-11T08:38:38.186Z (about 1 month ago)
- Topics: animate, line, path, svg
- Language: TypeScript
- Size: 10.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# animate-svg
[![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] [![Dependency status][david-dm-image]][david-dm-url] [![Dev Dependency status][david-dm-dev-image]][david-dm-dev-url]
Easily animate an SVG line or path to look like it's animating itself.
## Installation
```
npm install --save animate-svg
```
## Usage
Basic usage:
```javascript
import animateSvg from 'animate-svg'
async function foo() {
// blabla
const path = document.getElementById('some-svg-path-element')
// the animateSvg function esentially returns a promise
// so you can await it if you use it in an async function
await animateSvg(path, 1, false)
// blablabla
}
```
The function `animateSvg` accepts 3 parameters:
- the `SVGPathElement` or `SVGLineElement` to animate
- the **speed** at which the animation should occur (pixels per millisecond)
- (optional) direction of the animation: `true` is for reverse animation, `false` is for normal
[npm-url]: https://npmjs.org/package/animate-svg
[downloads-image]: http://img.shields.io/npm/dm/animate-svg.svg
[npm-image]: http://img.shields.io/npm/v/animate-svg.svg
[david-dm-url]:https://david-dm.org/inker/animate-svg
[david-dm-image]:https://david-dm.org/inker/animate-svg.svg
[david-dm-dev-url]:https://david-dm.org/inker/animate-svg#info=devDependencies
[david-dm-dev-image]:https://david-dm.org/inker/animate-svg/dev-status.svg