Top Related Projects
The motion graphics toolbelt for the web
GSAP (GreenSock Animation Platform), a JavaScript animation library for the modern web
JavaScript 3D Library.
JavaScript/TypeScript animation engine
JavaScript library to make drawing animation on SVG
Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
Quick Overview
Anime.js is a lightweight JavaScript animation library that provides a simple and powerful API for creating complex animations. It is designed to be easy to use and highly customizable, making it a popular choice for web developers who want to add dynamic and engaging animations to their projects.
Pros
- Lightweight and Performant: Anime.js is a small library (around 10KB gzipped) that is designed to be highly performant, making it a great choice for projects that need to load quickly.
- Flexible and Customizable: The library provides a wide range of animation properties and easing functions, allowing developers to create complex and unique animations.
- Extensive Documentation and Community: Anime.js has excellent documentation and a large and active community, making it easy for developers to get started and find support.
- Cross-Browser Compatibility: Anime.js is designed to work across a wide range of modern browsers, ensuring that your animations will look and behave consistently across different platforms.
Cons
- Limited Animation Types: While Anime.js provides a wide range of animation properties, it may not be as comprehensive as some other animation libraries, especially for more complex or specialized animation types.
- Dependency on JavaScript: Anime.js is a JavaScript-based library, which means that it requires the use of JavaScript in order to work. This may not be suitable for projects that need to work without JavaScript or in environments where JavaScript is not available.
- Potential Performance Issues: While Anime.js is designed to be highly performant, it may still cause performance issues in certain situations, especially on older or less powerful devices.
- Limited Integrations: Anime.js may not integrate as seamlessly with other popular web development frameworks and libraries as some other animation libraries.
Code Examples
Here are a few examples of how to use Anime.js to create simple animations:
// Animate a single element
anime({
targets: '.my-element',
translateX: '100vw',
duration: 2000,
loop: true,
direction: 'alternate',
easing: 'linear'
});
This code will animate the element with the class my-element
by moving it 100 viewport width units to the right, with a duration of 2 seconds, looping infinitely, and alternating the direction of the animation.
// Animate multiple elements
anime({
targets: '.my-elements',
translateX: function(el, i) {
return i * 50;
},
duration: 2000,
delay: function(el, i) {
return i * 100;
},
loop: true
});
This code will animate all elements with the class my-elements
, moving each element a different distance to the right based on its index, with a delay between each element's animation.
// Animate along a path
anime({
targets: '.my-element',
translateX: [
{ value: '100vw', duration: 2000 },
{ value: '0vw', duration: 2000 }
],
translateY: [
{ value: '50vh', duration: 2000 },
{ value: '0vh', duration: 2000 }
],
loop: true,
direction: 'alternate',
easing: 'linear'
});
This code will animate the element with the class my-element
along a path, moving it 100 viewport width units to the right and 50 viewport height units down, then back to the original position, with a loop and alternating direction.
Getting Started
To get started with Anime.js, you can include the library in your HTML file using a <script>
tag:
<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
Alternatively, you can install the library using a package manager like npm:
npm install animejs
Once you have the library included, you can start creating animations using the Anime.js API. Here's a simple example:
anime({
targets: '.my-element',
translateX: '100vw',
duration: 2000,
loop
Competitor Comparisons
The motion graphics toolbelt for the web
Pros of mojs
- More comprehensive animation toolkit with a wider range of features
- Supports custom shapes and swirl effects for unique animations
- Provides a visual timeline editor for easier animation sequencing
Cons of mojs
- Steeper learning curve due to its more complex API
- Larger file size, which may impact page load times
- Less frequent updates and maintenance compared to anime
Code Comparison
mojs:
const burst = new mojs.Burst({
radius: { 0: 100 },
count: 5,
children: {
shape: 'circle',
fill: { 'cyan' : 'yellow' },
duration: 2000
}
});
anime:
anime({
targets: '.element',
translateX: 250,
rotate: '1turn',
backgroundColor: '#FFF',
duration: 800,
easing: 'easeInOutQuad'
});
Both mojs and anime are powerful JavaScript animation libraries, but they cater to different needs. mojs offers a more extensive set of features and tools for creating complex animations, including custom shapes and a visual editor. However, this comes at the cost of a steeper learning curve and larger file size. anime, on the other hand, provides a simpler API that's easier to pick up and use quickly, making it more suitable for simpler animations and beginners. The choice between the two depends on the specific requirements of your project and your familiarity with animation concepts.
GSAP (GreenSock Animation Platform), a JavaScript animation library for the modern web
Pros of GSAP
- More comprehensive feature set, including advanced timeline control and complex animations
- Better performance, especially for large-scale animations
- Extensive plugin ecosystem for specialized effects
Cons of GSAP
- Steeper learning curve due to its extensive API
- Larger file size, which may impact load times for smaller projects
- Commercial license required for some use cases
Code Comparison
GSAP:
gsap.to(".box", {duration: 2, x: 100, y: 50, rotation: 360});
Anime:
anime({
targets: '.box',
translateX: 100,
translateY: 50,
rotate: 360,
duration: 2000
});
Both libraries offer similar basic functionality, but GSAP's syntax is often more concise. GSAP uses a single object for properties, while Anime separates transform properties. GSAP measures duration in seconds, whereas Anime uses milliseconds.
GSAP generally provides more granular control over animations and offers a wider range of features, making it suitable for complex projects. Anime, on the other hand, has a simpler API and is often preferred for smaller projects or by developers who prioritize ease of use.
JavaScript 3D Library.
Pros of three.js
- More comprehensive 3D graphics library, offering a wide range of features for creating complex 3D scenes and animations
- Larger community and ecosystem, with extensive documentation and numerous examples
- Supports WebGL rendering, providing high-performance 3D graphics in web browsers
Cons of three.js
- Steeper learning curve due to its complexity and extensive API
- Larger file size, which may impact load times for web applications
- Overkill for simple 2D animations or basic UI transitions
Code Comparison
three.js (3D scene creation):
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
anime (2D animation):
anime({
targets: '.element',
translateX: 250,
rotate: '1turn',
duration: 800,
easing: 'easeInOutQuad'
});
While three.js is focused on creating and rendering 3D scenes, anime is designed for simpler 2D animations and transitions. three.js offers more power and flexibility for complex 3D graphics, but anime provides a more straightforward API for basic animations, making it easier to use for simple projects.
JavaScript/TypeScript animation engine
Pros of tween.js
- Lightweight and focused solely on tweening, making it more efficient for simple animations
- Longer development history and potentially more stable codebase
- Supports a wider range of easing functions out of the box
Cons of tween.js
- Less feature-rich compared to anime, lacking advanced animation capabilities
- Smaller community and fewer updates in recent years
- Requires more manual setup for complex animations
Code Comparison
anime:
anime({
targets: '.element',
translateX: 250,
rotate: '1turn',
duration: 800,
easing: 'easeInOutQuad'
});
tween.js:
new TWEEN.Tween({ x: 0, rotation: 0 })
.to({ x: 250, rotation: Math.PI * 2 }, 800)
.easing(TWEEN.Easing.Quadratic.InOut)
.onUpdate(function(obj) {
element.style.transform = `translateX(${obj.x}px) rotate(${obj.rotation}rad)`;
})
.start();
The code comparison shows that anime provides a more concise and declarative API, while tween.js requires more manual setup and update handling. anime automatically handles DOM updates, whereas tween.js needs explicit onUpdate callbacks to modify element properties.
JavaScript library to make drawing animation on SVG
Pros of Vivus
- Specialized in SVG animation, particularly for drawing/tracing effects
- Lightweight and focused on a specific use case
- Offers multiple animation styles for SVG drawing
Cons of Vivus
- Limited to SVG animations only
- Fewer animation options compared to Anime's versatility
- Less active development and smaller community
Code Comparison
Vivus example:
new Vivus('my-svg', {duration: 200, type: 'sync'}, myCallback);
Anime example:
anime({
targets: '.my-element',
translateX: 250,
rotate: '1turn',
duration: 800
});
Summary
Vivus is a specialized library for SVG drawing animations, while Anime is a more comprehensive animation library. Vivus excels in its specific use case but is limited in scope. Anime offers broader animation capabilities across various properties and elements, making it more versatile for general web animations. The choice between the two depends on the project's specific requirements and the desired animation effects.
Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
Pros of Lottie-web
- Supports complex, high-quality animations exported from Adobe After Effects
- Offers a wide range of animation capabilities, including shape morphing and expressions
- Provides better performance for intricate animations due to its vector-based approach
Cons of Lottie-web
- Larger file size and more complex implementation compared to Anime
- Steeper learning curve, especially for designers unfamiliar with After Effects
- Limited runtime manipulation of animations without additional libraries
Code Comparison
Lottie-web:
lottie.loadAnimation({
container: document.getElementById('lottie-container'),
renderer: 'svg',
loop: true,
autoplay: true,
path: 'animation.json'
});
Anime:
anime({
targets: '.element',
translateX: 250,
rotate: '1turn',
duration: 800,
easing: 'easeInOutQuad'
});
Both libraries offer powerful animation capabilities, but they cater to different use cases. Lottie-web excels in reproducing complex After Effects animations, while Anime provides a more lightweight and flexible JavaScript-based approach for simpler animations and transitions.
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
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:
|
![]() |
V4 Documentation
The full documentation is available here.
V3 Migration guide
You can find the v3 to v4 migration guide here.
NPM development scripts
First, run npm i
to install all the necessary packages.
Then, execute the following scripts with npm run <script>
.
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 GitHub Sponsors.
Platinum sponsors
|
|
|
Huly | Ice Open Network | Your logo here |
Top Related Projects
The motion graphics toolbelt for the web
GSAP (GreenSock Animation Platform), a JavaScript animation library for the modern web
JavaScript 3D Library.
JavaScript/TypeScript animation engine
JavaScript library to make drawing animation on SVG
Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot