Skip to main content
Get started with Anime.js by creating your first animation. This guide will walk you through the basics.

​
Your First Animation

Let’s create a simple animation that moves and rotates an element:
1

Create HTML Structure

First, create an HTML file with an element to animate:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Anime.js Quick Start</title>
  <style>
    .square {
      width: 100px;
      height: 100px;
      background: #FF4B4B;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div class="square"></div>
  <script type="module" src="./main.js"></script>
</body>
</html>
2

Import Anime.js

Create a main.js file and import the animate function:
import { animate } from 'animejs';
3

Create the Animation

Call animate() with a target selector and animation properties:
import { animate } from 'animejs';

animate('.square', {
  x: 320,
  rotate: '1turn',
  duration: 1250,
  ease: 'inOutQuint',
  loop: true,
  alternate: true
});
The animation will move the square 320 pixels to the right, rotate it one full turn, and alternate back and forth infinitely.

​
Understanding the Parameters

Let’s break down what each parameter does: 
animate('.square', {
  x: 320,              // Translate 320px on X axis
  rotate: '1turn',     // Rotate 360 degrees (1 full turn)
  duration: 1250,      // Animation lasts 1250ms
  ease: 'inOutQuint',  // Easing function for smooth motion
  loop: true,          // Repeat forever
  alternate: true      // Reverse direction on each iteration
});

​
Common Properties

Transform Properties

x, y, z, rotate, rotateX, rotateY, scale, skew

CSS Properties

opacity, backgroundColor, width, height, borderRadius

Timing Controls

duration, delay, ease, loop, alternate

SVG Attributes

strokeDashoffset, fill, stroke, points, d

​
Multiple Elements with Stagger

Animate multiple elements with cascading delays using stagger(): 
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
stagger() creates a cascading effect by adding incremental delays to each element. The from: 'center' option starts from the middle element.

​
Using Timelines

Create complex animation sequences with createTimeline(): 
import { createTimeline, stagger } from 'animejs';

const timeline = createTimeline({
  loop: true,
  defaults: {
    duration: 800,
    ease: 'inOutQuad'
  }
});

timeline
  .add('.square', {
    x: 320,
    backgroundColor: '#4BFF8C'
  })
  .add('.square', {
    y: 160,
    rotate: '1turn'
  })
  .add('.square', {
    x: 0,
    backgroundColor: '#FF4B4B'
  })
  .add('.square', {
    y: 0,
    rotate: 0
  });
Timelines execute animations in sequence. Use position parameters to control timing (e.g., '-=400' to start 400ms before the previous animation ends).

​
Working with SVG

Anime.js excels at SVG animations. Here’s a line drawing effect: 
<svg width="100" height="100">
  <circle class="circle" 
    cx="50" cy="50" r="40" 
    fill="none" 
    stroke="#A4FF4F" 
    stroke-width="4" />
</svg>

​
Spring Animations

Create natural, physics-based motion with spring easing: 
import { animate, spring } from 'animejs';

animate('.square', {
  x: 320,
  rotate: 180,
  ease: spring({
    mass: 1,
    stiffness: 100,
    damping: 10
  })
});
Spring animations automatically calculate duration based on physics parameters. Adjust mass, stiffness, and damping to control the motion feel.

​
Animating JavaScript Objects

Anime.js can animate any JavaScript object property: 
import { animate } from 'animejs';

const obj = { count: 0 };

animate(obj, {
  count: 100,
  duration: 2000,
  ease: 'linear',
  onUpdate: () => {
    console.log(Math.round(obj.count));
    // Update your UI here
  }
});

​
Playback Controls

Control your animations programmatically: 
import { animate } from 'animejs';

const animation = animate('.square', {
  x: 320,
  duration: 2000,
  autoplay: false  // Don't start automatically
});

// Control the animation
animation.play();           // Start
animation.pause();          // Pause
animation.restart();        // Restart from beginning
animation.reverse();        // Play in reverse
animation.seek(1000);       // Jump to 1000ms
animation.timeScale = 0.5;  // Play at half speed

Play Methods

play(), pause(), restart(), reverse()

Properties

timeScale, currentTime, progress, duration

​
Complete Example

Here’s a complete working example that combines multiple concepts: 
import { createTimeline, stagger, utils } from 'animejs';

// Set initial position
utils.set('.square', {
  opacity: 0,
  scale: 0
});

const timeline = createTimeline({
  loop: true,
  defaults: {
    ease: 'inOutQuad',
    duration: 800
  }
});

timeline
  // Fade in and scale up
  .add('.square', {
    opacity: 1,
    scale: 1,
    delay: stagger(65)
  })
  // Move in sequence
  .add('.square', {
    x: 320,
    rotate: 180,
    backgroundColor: '#4BFF8C',
    delay: stagger(50)
  })
  // Move back
  .add('.square', {
    x: 0,
    rotate: 360,
    backgroundColor: '#FF4B4B',
    delay: stagger(50, { from: 'last' })
  }, '+=500')
  // Fade out
  .add('.square', {
    opacity: 0,
    scale: 0,
    delay: stagger(65, { from: 'center' })
  });

​
Next Steps

1

Explore Animation Properties

Learn about all available properties and how to animate themView Properties Guide →
2

Master Timelines

Create complex sequences with precise timing controlTimeline Documentation →
3

Learn Advanced Techniques

Discover stagger effects, spring physics, and scroll animationsAdvanced Features →

​
Common Patterns

From-To Values: Specify start and end values with object syntax:
animate('.element', {
  x: { from: 0, to: 320 },
  rotate: { from: -180, to: 180 }
});
Function-Based Values: Calculate values dynamically for each element:
animate('.element', {
  x: (el, i) => i * 100,
  delay: (el, i) => i * 50
});
Keyframes: Define multiple states in an animation:
animate('.element', {
  keyframes: [
    { x: 100, backgroundColor: '#FF4B4B' },
    { x: 200, backgroundColor: '#4BFF8C' },
    { x: 300, backgroundColor: '#4B8CFF' }
  ],
  duration: 3000
});

​
Troubleshooting

Element not animating? Make sure the element exists in the DOM before calling animate(). Use DOMContentLoaded or place your script at the end of the body.
Transforms not working? Check that the element has position: relative or absolute set, or use transform properties instead of position properties.

Build docs developers (and LLMs) love

Get started for freeTalk to us