Description
Anime is a flexible yet lightweight Javascript animation library. It works with CSS, Individual Transforms, SVG, DOM attributes and JS Objects.
anime.js alternatives and similar libraries
Based on the "Animations" category.
Alternatively, view anime.js alternatives based on common mentions on social networks and blogs.
-
shuffle-images
The Simplest Way to shuffle through images in a Creative Way http://www.thepetedesign.com/demos/shuffle-images_demo.html -
Scrawl-canvas Library
Responsive, integrated and interactive HTML5 canvas elements. -
TransitionEnd
TransitionEnd is an agnostic and cross-browser library to work with transitionend event.
Scout APM: A developer's best friend. Try free for 14-days
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest. Visit our partner's website for more details.
Do you think we are missing an alternative of anime.js or a related project?
README
anime.js
JavaScript animation engine | animejs.com
Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.
Getting started | Documentation | Demos and examples | Browser support
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+ |
Website | Documentation | Demos and examples | [MIT License](LICENSE.md) | © 2019 Julian Garnier.
*Note that all licence references and agreements mentioned in the anime.js README section above
are relevant to that project's source code only.