https://github.com/juliangarnier/anime
JavaScript animation engine
https://github.com/juliangarnier/anime
animation anime canvas css javascript javascript-library svg
Last synced: about 7 hours ago
JSON representation
JavaScript animation engine
- Host: GitHub
- URL: https://github.com/juliangarnier/anime
- Owner: juliangarnier
- License: mit
- Created: 2016-03-13T21:37:45.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2025-04-25T07:02:57.000Z (8 days ago)
- Last Synced: 2025-05-03T06:08:56.157Z (about 7 hours ago)
- Topics: animation, anime, canvas, css, javascript, javascript-library, svg
- Language: JavaScript
- Homepage: https://animejs.com
- Size: 63 MB
- Stars: 59,490
- Watchers: 760
- Forks: 4,012
- Open Issues: 75
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
- awesome-frontend - anime.js - JavaScript animation engine.  (Repository / Animation)
- awesome-frontend-lib - anime.js
- my-awesome-starred - juliangarnier/anime - JavaScript animation engine (JavaScript)
- awesome-repositories - juliangarnier/anime - JavaScript animation engine (JavaScript)
- awesome-starred - anime - JavaScript animation engine (JavaScript)
- awesome-github-star - anime
- awesome-list - anime
- awesome-starts - juliangarnier/anime - JavaScript animation engine (JavaScript)
- awesome - juliangarnier/anime - JavaScript animation engine (JavaScript)
- awesome-list - anime
- StarryDivineSky - juliangarnier/anime
- awesome-web-animation - Anime.js - JavaScript animation engine. (Common)
- awesome-star-libs - juliangarnier / anime
- awesome-frontend-libraries - animejs
- stars - juliangarnier/anime - JavaScript animation engine \[*MIT License*\] (⭐️59147) (JavaScript)
- stars - juliangarnier/anime - JavaScript animation engine \[*MIT License*\] (⭐️50345) (JavaScript)
- awesome - juliangarnier/anime - JavaScript animation engine (JavaScript)
- awesome - juliangarnier/anime - JavaScript animation engine (JavaScript)
README
# Anime.js
Anime.js is a fast, multipurpose and lightweight JavaScript animation library with a simple, yet powerful API.
It works with CSS properties, SVG, DOM attributes and JavaScript Objects.
## Usage
Anime.js V4 works by importing ES modules like so:
```javascript
import {
animate,
stagger,
} from 'animejs';
animate('.square', {
x: 320,
rotate: { from: -180 },
duration: 1250,
delay: stagger(65, { from: 'center' }),
ease: 'inOutQuint',
loop: true,
alternate: true
});
```
## V4 Documentation
The full documentation is available [here](https://animejs.com/documentation).
## V3 Migration guide
You can find the v3 to v4 migration guide [here](https://github.com/juliangarnier/anime/wiki/Migrating-from-v3-to-v4).
## NPM development scripts
First, run `npm i` to install all the necessary packages.
Then, execute the following scripts with `npm run `.
| script | action |
| ------ | ------ |
| `dev` | Watch any changes in `src/` and compiles the esm version to `lib/anime.esm.js` |
| `dev-types` | Same as `dev`, but also run TypeScript and generate the `types/index.d.ts` file |
| `build` | Generate types definition and compiles ESM / UMD / IIFE versions to `lib/` |
| `test-browser` | Start a local server and start all browser related tests |
| `test-node` | Start all Node related tests |
| `open-examples` | Start a local server to browse the examples locally |
## Our sponsors
Anime.js is 100% free and is only made possible with the help of our sponsors.
Help the project become sustainable by sponsoring us on <a target="_blank" href="https://github.com/sponsors/juliangarnier">GitHub Sponsors</a>.
### Platinum sponsors
<table>
<tr>
<td>
<a target="_blank" href="https://huly.io/?ref=animejs">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="./assets/sponsors/huly-logomark.svg">
<img align="center" src="./assets/sponsors/huly-logomark-dark.svg" width="128">
</picture>
</a>
</td>
<td>
<a target="_blank" href="https://ice.io/?ref=animejs">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="./assets/sponsors/ice-open-network-logomark.svg">
<img align="center" src="./assets/sponsors/ice-open-network-logomark-dark.svg" width="128">
</picture>
</a>
</td>
<td>
<a target="_blank" href="https://github.com/sponsors/juliangarnier">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="./assets/sponsors/placeholder.svg">
<img align="center" src="./assets/sponsors/placeholder-dark.svg" width="128">
</picture>
</a>
</td>
</tr>
<tr>
<td align="center">
<a target="_blank" href="https://huly.io/?ref=animejs">Huly</a>
</td>
<td align="center">
<a target="_blank" href="https://ice.io/?ref=animejs">Ice Open Network</a>
</td>
<td align="center">
<a target="_blank" href="https://github.com/sponsors/juliangarnier">Your logo here</a>
</td>
</tr>
</table>
© [Julian Garnier](http://juliangarnier.com) | [MIT License](LICENSE.md)