A fast and versatile JavaScript
library to animate the web.
npm i animejsBreak free from browser limitations and animate anything on the web with a single API.
Animate faster with an easy-to-use, yet powerful animation API.
Smoothly blend individual CSS transform properties with a versatile composition API.
Synchronise and trigger animations on scroll with the Scroll Observer API.
Create stunning effects in seconds with the built-in Stagger utility function.
Morph shapes, follow motion paths, and draw lines easily with the built-in SVG utilities.
Drag, snap, flick and throw HTML elements with the fully-featured Draggable API.
Orchestrate animation sequences and keep callbacks in sync with the powerfull Timeline API.
Make animations respond to media queries easily with the Scope API.
Keep your bundle size small by only importing the parts you need.
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));
});