Anime.js | JavaScript Animation Engine

All-in-one<br>animation<br>engine.

A fast and flexible JavaScript<br>library to animate the web.

npm i animejs<br>Learn more

Sponsored by

The complete<br>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

Scroll Observer

Synchronise and trigger animations on scroll with the Scroll Observer API.

Multiple synchronisation modes

Advanced thresholds

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

SVG toolset

Morph shapes, follow motion paths, and draw lines easily with the built-in SVG utilities.

Shape morphing

Line drawing

Motion path

Springs and draggable

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

Versatile settings

Comprehensive callbacks

Useful methods

Runs like<br>clockwork

Orchestrate animation sequences and keep callbacks in sync with the powerful 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<br>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.

Become a sponsor

Start animating

Get started quickly with our in-depth documentation.

Getting started

Timer

Animation

Timeline

Animatable

Draggable

Scope

Scroll

SVG

Utils

Easings

WAAPI

Engine

-->

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

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

animate('.car', {<br>...createMotionPath('.circuit'),<br>});

animate(createDrawable('.circuit'), {<br>draw: '0 1',<br>});

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

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

const options = {<br>grid: [13, 13],<br>from: 'center',<br>};

createTimeline()<br>.add('.dot', {<br>scale: stagger([1.1, .75], options),<br>ease: 'inOutQuad',<br>}, stagger(200, options));

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

createTimeline()<br>.add('.tick', {<br>y: '-=6',<br>duration: 50,<br>}, stagger(10))<br>.add('.ticker', {<br>rotate: 360,<br>duration: 1920,<br>}, '<br>createScope({<br>mediaQueries: {<br>portrait: '(orientation: portrait)',<br>})<br>.add(({ matches }) => {<br>const isPortrait = matches.portrait;<br>createTimeline().add('.circle', {<br>y: isPortrait ? 0 : [-50, 50, -50],<br>x: isPortrait ? [-50, 50, -50] : 0,<br>}, stagger(100));<br>});

Bundle size

24.50 KB

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

SVG 0.35 KB

Stagger +0.48 KB

Spring 0.52 KB

WAAPI 3.50 KB