Anime.js
A lightweight JavaScript animation library with a simple, yet powerful API.
HTML
CSS
JavaScript
SVG
Powerful Animation Features
Create complex animations with a simple, unified API
Staggering Animations
Create complex follow-through animations with built-in staggering system.
CSS Transforms
Animate multiple CSS properties simultaneously with different timings.
SVG Animations
Animate SVG properties with precise control and fluid motion.
Timeline Control
Create complex animation sequences with complete timeline control.
Easing Functions
Built-in easing functions for natural and dynamic movement.
Callbacks & Promises
Complete control with built-in callbacks and promise support.
Animation Examples
Explore what's possible with Anime.js
Staggering Animation
Complex follow-through animations made easy
CSS Transforms
Seamless CSS transform animations
Timeline Control
Synchronized animation sequences
Documentation
Everything you need to get started with Anime.js
Getting Started
- Installation
- Basic Usage
- Quick Start Guide
API Reference
- Targets
- Properties
- Animation Parameters
Advanced Features
- Timeline
- Staggering
- Callbacks
SVG Animations
- SVG Properties
- Motion Path
- Morphing
Helpers
- Easings
- Utils
- Helpers
Examples
- Basic Examples
- Advanced Examples
- Codepen Collection
Interactive Playground
Experiment with Anime.js animations in real-time
Code Editor
anime({
targets: '.demo-shape',
translateX: 250,
rotate: '1turn',
duration: 800,
loop: true,
direction: 'alternate',
easing: 'easeInOutSine'
});
Preview
Properties
Duration (ms)
Easing
Animation Showcase
Discover what's possible with Anime.js
Staggering Effects
Complex sequence animations
SVG Morphing
Smooth shape transitions
Timeline Sequences
Synchronized animations
Trusted by Developers Worldwide
Join the Community
Connect with developers and creators worldwide
GitHub
Contribute & Collaborate
- • Submit issues and features
- • Contribute to documentation
- • Join discussions
CodePen
Share & Explore
- • Browse examples
- • Share your creations
- • Get inspired
Connect & Learn
- • Follow updates
- • Share feedback
- • Connect with users
Supported By
Get Started with Anime.js
Begin creating stunning animations in minutes
Quick Installation
Using NPM
npm install animejs
Using CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
Basic Example
anime({
targets: '.element',
translateX: 250,
rotate: '1turn',
duration: 800,
loop: true,
direction: 'alternate',
easing: 'easeInOutSine'
});
Examples
Explore various animation examples and use cases
API Reference
Complete API documentation and guides
CodePen
Live examples and community showcases