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.
-
-
-
-
-
AutoAnimate
A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application. -
tsParticles
tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components. -
-
-
-
Scrawl-canvas Library
Responsive, interactive and more accessible HTML5 canvas elements. Scrawl-canvas is a JavaScript library designed to make using the HTML5 canvas element easier, and more fun -
-
Scroll Btween
ScrollBtween uses scroll position of document - or any DOM element - to tween CSS values on any DOM element. -
-
TransitionEnd
:dizzy: TransitionEnd is an agnostic and cross-browser library to work with transitionend event. -
Scroll Frames
Animate sequences of still frames on any DOM element in relation with its position into the viewport. https://olivier3lanc.github.io/Scroll-Frames/
InfluxDB - Purpose built for real-time analytics at any scale.
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
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.