Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Introduction to Anime.js
Anime.js is a lightweight JavaScript animation library with a simple yet powerful API. It works seamlessly with CSS properties, DOM elements, SVG attributes, and JavaScript objects, making it an excellent choice for creating smooth web animations without the complexity of traditional JavaScript animation methods.
Traditional JavaScript animations require manually calculating property changes over time, which becomes complex even for simple effects. Anime.js simplifies this process by providing a unified interface for animating multiple properties simultaneously, handling timing calculations, and managing animation states automatically.
Key Features
Anime.js offers several advantages over vanilla JavaScript animations:
Lightweight: Small file size with no dependencies
Flexible targets: Animate CSS selectors, DOM nodes, or JavaScript objects
Multiple properties: Animate several CSS properties simultaneously
Timeline control: Built-in play, pause, restart, and reverse functions
Cross-browser compatible: Works in all modern browsers
Installation
You can include Anime.js in your project using either method:
Download and host locally:
<script src="/js/anime.min.js"></script>
Use CDN (recommended):
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
Basic Syntax
Anime.js animations are created using the anime() function, which accepts a configuration object:
let animation = anime({
targets: 'selector', // Element(s) to animate
property: 'value', // CSS property and target value
duration: 1000, // Animation duration in milliseconds
easing: 'easeInOutQuad', // Easing function
loop: true, // Loop animation
direction: 'alternate' // Animation direction
});
Configuration Parameters
Targets: Specifies which elements to animate. Can be CSS selectors, DOM nodes, or JavaScript objects.
Properties: CSS properties (translateX, opacity), SVG attributes (cx, cy), or object properties to animate.
Animation Parameters: Control timing and behavior including duration, delay, easing, direction, and loop settings.
Control Methods: Built-in functions like play(), pause(), restart(), and reverse() for interactive animations.
Example: Basic Translation Animation
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
</head>
<body>
<h2>Basic Anime.js Animation</h2>
<div id="box" style="background: #3498db; width: 50px; height: 50px;"></div>
<script>
anime({
targets: '#box',
translateX: 250,
scale: 1.5,
duration: 2000,
easing: 'easeInOutQuad',
direction: 'alternate',
loop: true
});
</script>
</body>
</html>
Example: Morphing Shape Animation
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
</head>
<body>
<h2>Shape Morphing with Anime.js</h2>
<div id="morphing-box" style="background: #e74c3c; width: 80px; height: 80px;"></div>
<script>
anime({
targets: '#morphing-box',
borderRadius: ['0%', '50%'],
backgroundColor: ['#e74c3c', '#2ecc71'],
width: [80, 120],
height: [80, 120],
duration: 2500,
easing: 'easeInOutCubic',
direction: 'alternate',
loop: true
});
</script>
</body>
</html>
Example: Multiple Elements Animation
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
</head>
<body>
<h2>Staggered Animation</h2>
<div class="circle" style="background: #9b59b6; width: 30px; height: 30px; border-radius: 50%; margin: 5px; display: inline-block;"></div>
<div class="circle" style="background: #9b59b6; width: 30px; height: 30px; border-radius: 50%; margin: 5px; display: inline-block;"></div>
<div class="circle" style="background: #9b59b6; width: 30px; height: 30px; border-radius: 50%; margin: 5px; display: inline-block;"></div>
<div class="circle" style="background: #9b59b6; width: 30px; height: 30px; border-radius: 50%; margin: 5px; display: inline-block;"></div>
<script>
anime({
targets: '.circle',
translateY: -50,
scale: 1.3,
duration: 800,
delay: anime.stagger(100),
direction: 'alternate',
easing: 'easeInOutSine',
loop: true
});
</script>
</body>
</html>
Common Use Cases
UI Transitions: Smooth page transitions and element state changes
Loading Animations: Progress bars, spinners, and skeleton screens
Interactive Feedback: Button hover effects and form validation indicators
Data Visualization: Animated charts and graph transitions
Conclusion
Anime.js provides a powerful yet simple solution for creating smooth web animations. Its lightweight nature, intuitive API, and extensive browser support make it an excellent choice for adding engaging animations to modern web applications.
2K+ Views
