Awesome
<h1 align="center"> <a href="https://animejs.com"><img src="/documentation/assets/img/animejs-v3-header-animation.gif" width="250"/></a> <br> anime.js </h1> <h4 align="center">JavaScript animation engine | <a href="https://animejs.com" target="_blank">animejs.com</a></h4> <p align="center"> <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/animejs?style=flat-square&logo=npm"> <img alt="jsDelivr hits (npm)" src="https://img.shields.io/jsdelivr/npm/hm/animejs?style=flat-square&logo=jsdeliver"> <img alt="GitHub Sponsors" src="https://img.shields.io/github/sponsors/juliangarnier?style=flat-square&logo=github"> </p> <blockquote align="center"> <em>Anime.js</em> (<code>/ˈæn.ə.meɪ/</code>) is a lightweight JavaScript animation library with a simple, yet powerful API.<br> It works with CSS properties, SVG, DOM attributes and JavaScript Objects. </blockquote> <p align="center"> <a href="#getting-started">Getting started</a> | <a href="#documentation">Documentation</a> | <a href="#demos-and-examples">Demos and examples</a> | <a href="#browser-support">Browser support</a> </p>[!IMPORTANT]
🎉 Anime.js V4 is now available in early access 🎉
After years in the making, Anime.js V4 is finally available in early access for my GitHub Sponsors!
Powered by
<table> <tr> <td> <a target="_blank" href="https://huly.io"> <picture> <source media="(prefers-color-scheme: dark)" srcset="./documentation/assets/sponsors/huly-logomark.svg"> <img align="center" src="./documentation/assets/sponsors/huly-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="./documentation/assets/sponsors/placeholder.svg"> <img align="center" src="./documentation/assets/sponsors/placeholder-dark.svg" width="128"> </picture> </a> </td> </tr> <tr> <td align="center"> <a target="_blank" href="https://huly.io">Huly</a> </td> <td align="center"> <a target="_blank" href="https://github.com/sponsors/juliangarnier">Your logo here</a> </td> </tr> </table>Getting started
Download
Via npm
$ npm install animejs --save
or manual download.
Usage
ES6 modules
import anime from 'animejs/lib/anime.es.js';
CommonJS
const anime = require('animejs');
File include
Link anime.min.js in your HTML :
<script src="anime.min.js"></script>
Hello world
anime({
targets: 'div',
translateX: 250,
rotate: '1turn',
backgroundColor: '#FFF',
duration: 800
});
Documentation
- Targets
- Properties
- Property parameters
- Animation parameters
- Values
- Keyframes
- Staggering
- Timeline
- Controls
- Callbacks and promises
- SVG Animations
- Easing functions
- Helpers
Demos and examples
- CodePen demos and examples
- juliangarnier.com
- animejs.com
- Moving letters by @tobiasahlin
- Gradient topography animation by @crnacura
- Organic shape animations by @crnacura
- Pieces slider by @lmgonzalves
- Staggering animations
- Easings animations
- Sphere animation
- Layered animations
- anime.js logo animation
Browser support
| Chrome | Safari | IE / Edge | Firefox | Opera |
|---|---|---|---|---|
| 24+ | 8+ | 11+ | 32+ | 15+ |
<a href="https://animejs.com"><img src="/documentation/assets/img/animejs-v3-logo-animation.gif" width="150" alt="anime-js-v3-logo"/></a>
Website | Documentation | Demos and examples | MIT License | © 2019 Julian Garnier.