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.
-
animate.css
🍿 A cross-browser library of CSS animations. As easy to use as an easy thing. -
particles.js
A lightweight JavaScript library for creating particles -
GreenSock-JS
GSAP (GreenSock Animation Platform), a JavaScript animation library for the modern web -
barbajs
Create badass, fluid and smooth transitions between your website’s pages -
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. -
jquery.transit
Super-smooth CSS3 transformations and transitions for jQuery -
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. -
shuffle-images
The Simplest Way to shuffle through images in a Creative Way -
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. -
Tailwind Animations
Cool animations implemented with tailwindcss -
js-loading-overlay
Display loading overlay/spinner for your application easily and beautifully. -
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/
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
* 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.