All-in-one
animation
engine.
A fast and flexible JavaScript
library to animate the web.
npm i animejs
Sponsored by
All-in-one
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.
Enhanced transforms
Smoothly blend individual CSS transform properties with a versatile composition API.
Scroll Observer
Synchronise and trigger animations on scroll with the Scroll Observer API.
Advanced staggering
Create stunning effects in seconds with the built-in Stagger utility function.
SVG toolset
Morph shapes, follow motion paths, and draw lines easily with the built-in SVG utilities.
Springs and draggable
Drag, snap, flick and throw HTML elements with the fully-featured Draggable API.
Runs like
clockwork
Orchestrate animation sequences and keep callbacks in sync with the powerful Timeline API.
Responsive animations
Make animations respond to media queries easily with the Scope API.
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.
animate('.square', {
rotate: 90,
loop: true,
ease: 'inOutExpo',
});
animate('.shape', {
x: random(-100, 100),
y: random(-100, 100),
rotate: random(-180, 180),
duration: random(500, 1000),
composition: 'blend',
});
animate('.car', {
...createMotionPath('.circuit'),
});
animate(createDrawable('.circuit'), {
draw: '0 1',
});
animate('.circuit-a', {
d: morphTo('.circuit-b'),
});
animate(createDrawable('path'), {
draw: ['0 0', '0 1', '1 1'],
delay: stagger(40),
ease: 'inOut(3)',
autoplay: onScroll({ sync: true }),
});
const options = {
grid: [13, 13],
from: 'center',
};
createTimeline()
.add('.dot', {
scale: stagger([1.1, .75], options),
ease: 'inOutQuad',
}, stagger(200, options));
createDraggable('.circle', {
releaseEase: createSpring({
stiffness: 120,
damping: 6,
})
});
createTimeline()
.add('.tick', {
y: '-=6',
duration: 50,
}, stagger(10))
.add('.ticker', {
rotate: 360,
duration: 1920,
}, '<');
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));
});
Presidio operativo
100
- Timer 15
- Animation 13
- Timeline 7
- Animatable 4
- Draggable 14
- Scroll 12
- Scope 6
- SVG 8
- Stagger 6
- Spring 7
- WAAPI 12
