Anime.js Getting Started — Complete Beginner's Guide

Anime.js is a lightweight JavaScript animation library that lets you create smooth, expressive animations for CSS properties, SVG elements, DOM attributes, and even JavaScript objects — all with just a few lines of code and no dependencies.

What You’ll Learn

By the end of this tutorial, you’ll install Anime.js, understand how targets and properties work, animate CSS transforms and SVG attributes, control timing and looping, and build your first interactive animation playground.

Why Anime.js Matters

Think about the last great website you visited. Chances are it had animations — buttons that gently pulse, cards that fade in as you scroll, icons that bounce playfully when you hover. These micro-interactions make software feel alive, polished, and responsive.

Security note: Understanding Animejs Getting Started helps build more secure applications — a core principle at DodaTech, where tools like Durga Antivirus Pro and Doda Browser rely on solid implementation practices.

Without a library, creating these animations means writing raw JavaScript with requestAnimationFrame, manually calculating frame-by-frame values, handling easing curves, and managing timing. It’s doable but extremely tedious.

Anime.js handles all of that for you. You declare what you want to animate and how, and Anime.js figures out the frame-by-frame math automatically. It’s fast (under 15KB), works everywhere, and has one of the cleanest APIs of any animation library.

Real-world use: Animation libraries like Anime.js power the loading animations in Doda Browser’s startup screen, the notification transitions in Durga Antivirus Pro, and the chart animations in data visualization dashboards.

Where This Fits in Your Learning Path

    flowchart LR
    A["JavaScript Basics"] --> B["**Anime.js Getting Started**"]
    B --> C["Animation Controls & Timelines"]
    C --> D["SVG & Motion Paths"]
    D --> E["Staggering & Synchronization"]
    E --> F["Complex Web Animations"]
    style B fill:#f97316,stroke:#c2410c,color:#fff
    style A fill:#e5e7eb,stroke:#9ca3af,color:#374151
    style F fill:#22c55e,stroke:#16a34a,color:#fff
  

What is Anime.js?

Imagine you’re making a cartoon. You have a character (say, a bouncing ball). To make it move, you’d draw it in one position, then draw it slightly shifted in the next frame, then again, and again — 24 or 60 times per second. Each individual drawing is a frame, and the sequence of frames creates the illusion of motion.

That’s exactly what Anime.js does, but for HTML elements. It changes a property (like translateX or opacity) by tiny amounts 60 times per second, creating the illusion of smooth motion.

The key insight: You don’t tell Anime.js how to animate. You tell it what the end result should look like, and Anime.js figures out every intermediate step automatically.

// Tell Anime.js: "move this box 250px to the right over 1 second"
anime({
  targets: '.box',
  translateX: 250,
  duration: 1000
})

That’s it. Three lines. Anime.js calculates every frame between 0px and 250px, applies easing for natural motion, and stops when done.

Installation

CDN (Recommended to Start)

Add a single <script> tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js"></script>

Place it right before your custom scripts so anime() is available globally.

npm (For Build Systems)

npm install animejs

import anime from 'animejs'

The anime() Function

Every animation starts with a single function call: anime(). It accepts a parameters object (a set of key-value pairs inside curly braces) and returns an animation instance that starts playing immediately.

anime({
  targets: '.box',
  translateX: 250,
  duration: 1000
})

Let’s break down each part:

targets: '.box' — This tells Anime.js which element(s) to animate. It uses a CSS selector, just like in CSS or document.querySelector(). The .box class must exist on at least one element in your HTML.

translateX: 250 — This is the CSS property to animate, written in camelCase. translateX becomes transform: translateX(250px) in the browser. The value 250 means “move 250 pixels from the current position.”

duration: 1000 — How long the animation takes in milliseconds. 1000ms = 1 second.

What happens when you run this:

1. Anime.js reads the element’s current translateX value (probably 0)
2. It calculates every intermediate value between 0 and 250
3. It applies each value 60 times per second for 1 second
4. The element smoothly slides 250px to the right

Understanding Targets

Targets answer the question: what are we animating? Anime.js accepts several target types:

CSS Selector (Most Common)

anime({ targets: '.box', translateX: 200 })     // All elements with class "box"
anime({ targets: '#logo', scale: 1.5 })          // Element with id "logo"
anime({ targets: 'div', opacity: 0.5 })          // All <div> elements

Think of these as the same selectors you’d use in CSS — .class, #id, tag, or any valid CSS selector.

Direct DOM Node

const el = document.querySelector('.box')
anime({ targets: el, rotate: 360 })

Useful when you already have a reference to the element from other JavaScript code.

Multiple DOM Nodes

anime({ targets: document.querySelectorAll('.box'), translateY: 100 })

When you pass multiple elements, Anime.js animates all of them in parallel.

JavaScript Object (Non-DOM)

This is a unique feature — you can animate plain JavaScript objects:

const obj = { x: 0, y: 0 }
anime({ targets: obj, x: 200, y: 150 })
// After animation: obj.x = 200, obj.y = 150

Why animate a JavaScript object? This is incredibly useful for driving canvas animations, WebGL scenes, or any scenario where you need to interpolate values that aren’t directly tied to DOM elements. For example, you could animate a color’s hue value and use the changing value to draw on a canvas.

Animating CSS Properties

You can animate any CSS property. Use camelCase names instead of the CSS hyphenated names:

anime({
  targets: '.card',
  opacity: [0, 1],
  backgroundColor: '#ff6b6b',
  borderRadius: ['0px', '20px'],
  duration: 1200
})

The array syntax [startValue, endValue] lets you specify both the starting and ending values. If you provide only one value (like opacity: 1), Anime.js uses the element’s current computed value as the starting point.

CSS Transforms

Transforms are special because each transform function gets its own property:

anime({
  targets: '.box',
  translateX: 250,    // transform: translateX(250px)
  translateY: 100,    // transform: translateY(100px)
  scale: 1.5,         // transform: scale(1.5)
  rotate: '1turn',    // transform: rotate(360deg)
  skewX: 20,          // transform: skewX(20deg)
  duration: 1500
})

Each property is independent. You can animate just one, or all of them together. Anime.js handles combining them into a single transform string.

The rotate: '1turn' uses CSS turn units — 1turn = 360 degrees, 0.5turn = 180 degrees. You can also use degrees: rotate: 360.

Animating SVG Attributes

SVG elements have special attributes like r (radius), cx (center x), and cy (center y). Animate them using the attr wrapper:

anime({
  targets: 'circle',
  attr: {
    r: 50,
    cx: 200,
    cy: 150
  },
  duration: 1000
})

The attr object tells Anime.js “these are SVG attributes, not CSS properties.” Without it, Anime.js would try to animate CSS r which doesn’t exist.

Timing Controls

Duration, Delay, EndDelay

anime({
  targets: '.box',
  translateX: 300,
  duration: 2000,     // Animates over 2 seconds
  delay: 500,          // Waits 0.5 seconds before starting
  endDelay: 300        // Waits 0.3 seconds before reversing/looping
})

Staggered Starts (Per-Element Delay)

When animating multiple elements, you can give each a different delay using a function:

anime({
  targets: '.box',     // Multiple .box elements
  translateX: 250,
  delay: function(el, index) {
    return index * 100  // Each element starts 100ms later than the previous
  },
  duration: 800
})

What this does: With 5 elements, element 0 starts at 0ms, element 1 at 100ms, element 2 at 200ms, etc. The result is a cascading wave effect.

Looping & Direction

Loop

// Loop 3 times
anime({ targets: '.box', translateX: 300, loop: 3 })

// Infinite loop
anime({ targets: '.box', rotate: 360, loop: true })

Direction

The direction property controls which way the animation plays:

// normal — animate forward, then snap back to start
anime({ targets: '.box', translateX: 300, direction: 'normal' })

// reverse — animate from 300 back to 0
anime({ targets: '.box', translateX: 300, direction: 'reverse' })

// alternate — forward then backward, smooth pendulum motion
anime({ targets: '.box', translateX: 300, direction: 'alternate', loop: true })

The difference between reverse and alternate: reverse plays backwards once and stops. alternate combined with loop creates a back-and-forth oscillation — like a pendulum or a loading pulse.

Easing

Easing controls the speed curve of an animation. Without easing, animations move at a constant speed (linear), which looks robotic. Easing makes motion feel natural:

anime({
  targets: '.box',
  translateX: 300,
  easing: 'easeOutElastic'  // Overshoots then settles
})

Common Mistakes Beginners Make

1. Using CSS hyphenated names instead of camelCase

// Wrong: hyphenated CSS name
anime({ targets: '.box', 'background-color': '#ff6b6b' })

// Correct: camelCase
anime({ targets: '.box', backgroundColor: '#ff6b6b' })

Anime.js property names follow JavaScript conventions, not CSS conventions.

2. Using CSS transform shorthand instead of individual properties

// Wrong: Anime.js doesn't parse the transform string
anime({ targets: '.box', transform: 'translateX(100px)' })

// Correct: use individual transform properties
anime({ targets: '.box', translateX: 100 })

3. Adding px to numeric values

// Wrong: Anime.js treats numbers as pixels by default
anime({ targets: '.box', translateX: '250px' })

// Correct: just use the number
anime({ targets: '.box', translateX: 250 })

If you need a different unit, include it: '100%', '2em', '1turn'.

4. Forgetting the element exists

// No error, but nothing animates — the target doesn't exist
anime({ targets: '.nonexistent-class', translateX: 100 })

Anime.js silently skips missing targets. Always verify your CSS selectors work by testing document.querySelectorAll('.your-selector') in the console first.

5. Assuming loops reset smoothly

// Without alternate, the element snaps back to start instantly
anime({ targets: '.box', translateX: 300, loop: true })

// With alternate, it smoothly goes back and forth
anime({ targets: '.box', translateX: 300, loop: true, direction: 'alternate' })

Practice Questions

1. What does the anime() function return? It returns an animation instance that starts playing immediately. You can store it in a variable to control playback.

2. What’s the difference between direction: 'reverse' and direction: 'alternate'? reverse plays from end to start once. alternate plays forward then backward on each loop, creating smooth oscillation.

3. How do you animate SVG attributes like circle radius? Use the attr wrapper: attr: { r: 50 }. Without attr, Anime.js treats properties as CSS.

4. Why use camelCase for CSS property names? Anime.js is a JavaScript library, so it follows JavaScript naming conventions. backgroundColor instead of background-color.

5. Can you animate a plain JavaScript object (not a DOM element)? Yes. anime({ targets: myObj, x: 100 }) will set myObj.x to 100 over the animation duration — useful for canvas/WebGL.

Challenge

Build an animation that:

• Has 5 colored squares in a row
• On button click, they each bounce to a random Y position
• Each square has a different color
• The animation uses easeOutBounce easing
• Bonus: After all squares settle, log “Done!” to the console

FAQ

Try It Yourself

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Anime.js Getting Started</title>
  <style>
    .box {
      width: 80px; height: 80px;
      background: #6c5ce7;
      border-radius: 8px;
      margin: 10px;
    }
    .container { display: flex; flex-wrap: wrap; margin-top: 40px; }
    button { padding: 8px 16px; font-size: 14px; cursor: pointer; border: none; border-radius: 4px; background: #0984e3; color: #fff; margin-right: 8px; }
    button:hover { background: #0761b3; }
  </style>
</head>
<body>
  <button onclick="moveBoxes()">Translate</button>
  <button onclick="rotateBoxes()">Rotate</button>
  <button onclick="scaleBoxes()">Scale</button>

  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js"></script>
  <script>
    function moveBoxes() {
      anime({ targets: '.box', translateX: 250, duration: 1000, easing: 'easeOutExpo' })
    }
    function rotateBoxes() {
      anime({ targets: '.box', rotate: '1turn', duration: 1200, easing: 'easeInOutCubic' })
    }
    function scaleBoxes() {
      anime({ targets: '.box', scale: 1.8, duration: 800, direction: 'alternate', loop: true, easing: 'easeInOutQuad' })
    }
  </script>
</body>
</html>

What to expect: Three buttons that each trigger a different animation type. “Translate” slides the boxes right, “Rotate” spins them, “Scale” pulses them continuously.

What’s Next

Related topics: JavaScript fundamentals, CSS transitions, SVG basics.

What’s Next

Congratulations on completing this Animejs Getting Started tutorial! Here’s where to go from here:

• Practice daily — Consistency is more important than long study sessions
• Build a project — Apply what you learned by building something real
• Explore related topics — Check out other tutorials in the same category
• Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!