Anime.js - JavaScript Animation Engine

npm i animejs

Learn more

Sponsored by 7UP

The complete animator's toolbox

Break free from browser limitations and animate anything on the web with a single API.

Intuitive API
Animate faster with an easy-to-use, yet powerful animation API.

Per property parameters
Flexible keyframes system
Built-in easings
Enhanced transforms
Smoothly blend individual CSS transform properties with a versatile composition API.
Individual CSS Transforms
Function based values
Blend composition

SVG toolset
Morph shapes, follow motion paths, and draw lines easily with the built-in SVG utilities.
Shape morphing
Line drawing
Motion path

Scroll Observer
Synchronise and trigger animations on scroll with the Scroll Observer API.
Multiple synchronisation modes
Advanced thresholds
Under Construction

Complete set of callbacks
Advanced staggering
Create stunning effects in seconds with the built-in Stagger utility function.
Time staggering
Values staggering
Timeline positions staggering
Divider

Springs and draggable
Drag, snap, flick and throw HTML elements with the fully-featured Draggable API.
Under Construction

Versatile settings
Comprehensive callbacks
Useful methods
Runs like clockwork
Orchestrate animation sequences and keep callbacks in sync with the powerfull Timeline API.
Synchronise animations
Advanced time positions
Playback settings
Responsive animations
Make animations respond to media queries easily with the Scope API.

Media queries
Custom root element
Scopped methods
A lightweight and modular API
Keep your bundle size small by only importing the parts you need.

Our sponsors
Anime.js is 100% free and is only made possible with the help of our sponsors.

Get started quickly with our in-depth documentation.

Getting started
Timer
Animation
Timeline
Animatable
Draggable
Scroll
Scope
Stagger
SVGUtils
WAAPI

animate('.square', { rotate: 90, loop: true, ease: 'inOutExpo', }); Notepad

animate('.shape', { x: random(-100, 100), y: random(-100, 100), rotate: random(-180, 180), duration: random(500, 1000), composition: 'blend', }); Notepad

animate('.car', { ...createMotionPath('.circuit'), }); Notepad

animate(createDrawable('.circuit'), { draw: '0 1', }); Notepad

animate('.circuit-a', { d: morphTo('.circuit-b'), }); Notepad

animate(createDrawable('path'), { draw: ['0 0', '0 1', '1 1'], delay: stagger(40), ease: 'inOut(3)', autoplay: onScroll({ sync: true }), }); Notepad

const options = { grid: [13, 13], from: 'center', }; createTimeline() .add('.dot', { scale: stagger([1.1, .75], options), ease: 'inOutQuad', }, stagger(200, options)); Notepad

createDraggable('.circle', { releaseEase: createSpring({ stiffness: 120, damping: 6, }) }); Notepad

createTimeline() .add('.tick', { y: '-=6', duration: 50, }, stagger(10)) .add('.ticker', { rotate: 360, duration: 1920, }, '<'); Notepad

createScope({ mediaQueries: { portrait: '(orientation: portrait)', } }) .add(({ matches }) => { const isPortrait = matches.portrait; createTimeline().add('.circle', { y: isPortrait ? 0 : [-50, 50, -50], x: isPortrait ? [-50, 50, -50] : 0, }, stagger(100)); }); Notepad

Bundle size
24.50KB

Timer
5.60 KB

Animation
+5.20 KB

Timeline
+0.55 KB

Animatable
+0.40 KB

Draggable
+6.41 KB

Scroll
+4.30 KB

Scope
+0.22 KB

Stagger
+0.48 KB

SVG
0.35 KB

Spring
0.52 KB

WAAPI
3.50 KB