Anime.js Animation Parameters — Complete Guide

In this tutorial, you'll learn about Anime.js animation parameters. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

Anime.js animation parameters control every aspect of how an animation behaves: how long it lasts, when it starts, how it accelerates, whether it repeats, and what happens when it finishes.

What You'll Learn

By the end of this tutorial, you'll configure duration, delay, easing functions, loop behavior, direction (normal/alternate/reverse), autoplay, and completion callbacks.

Why It Matters

Parameters transform a basic animation into a polished user experience. The right easing makes motion feel natural. Proper delays create stunning staggered effects. Loop and direction control infinite animations like loading spinners.

Real-World Use

Durga Antivirus Pro uses Anime.js parameters to create a scanning animation. The progress bar uses easeInOutQuad for smooth acceleration, loops with alternate direction for the pulsing scan indicator, and a complete callback to show the scan results panel.

Where This Fits in Your Learning Path

flowchart LR
    A["Anime.js Targets"] --> B["**Animation Parameters**"]
    B --> C["Timeline & Controls"]
    C --> D["Easing & Callbacks"]
    D --> E["Advanced Anime.js"]
    style B fill:#f97316,stroke:#c2410c,color:#fff
    style A fill:#e5e7eb,stroke:#9ca3af,color:#374151
    style E fill:#22c55e,stroke:#16a34a,color:#fff
---

## Duration

Duration controls how long the animation takes in milliseconds.

```JavaScript
anime({
  targets: '.box',
  translateX: 300,
  duration: 2000
})

Expected output: The element takes 2 seconds to move 300px to the right.

Delay

Delay adds a wait time before the animation starts. As a function, it creates staggered effects.

anime({
  targets: '.dot',
  translateY: -100,
  duration: 1000,
  delay: function(el, i) { return i * 150 }
})

<div class="dot" style="width:20px;height:20px;background:#ff6b6b;border-radius:50%"></div>
<div class="dot" style="width:20px;height:20px;background:#4ecdc4;border-radius:50%"></div>
<div class="dot" style="width:20px;height:20px;background:#ffe66d;border-radius:50%"></div>

Expected output: Each dot jumps up 100px, one after another with 150ms between them.

Easing

Easing functions control the acceleration curve of the animation.

anime({
  targets: '.ball',
  translateX: 500,
  duration: 2000,
  easing: 'easeOutElastic'
})

Expected output: The ball slides fast initially then overshoots and settles with a bouncy elastic effect at the end.

Loop

Loop controls how many times the animation repeats. Use true for infinite.

anime({
  targets: '.spinner',
  rotate: 360,
  duration: 1000,
  loop: true,
  easing: 'linear'
})

Expected output: The element rotates continuously in an infinite loop.

Direction

Direction controls the playback direction and behavior on loop.

anime({
  targets: '.pulse',
  scale: [1, 1.5],
  duration: 500,
  loop: true,
  direction: 'alternate',
  easing: 'easeInOutQuad'
})

Expected output: The element scales up to 1.5x, then scales back down to 1x, repeating infinitely.

Autoplay

Set autoplay to false to prevent the animation from starting immediately.

const animation = anime({
  targets: '.box',
  translateX: 300,
  autoplay: false,
  duration: 1000
})

document.querySelector('#playBtn').addEventListener('click', function() {
  animation.play()
})

Expected output: Nothing happens until the Play button is clicked, then the box animates.

Complete Callback

The complete callback fires when the animation finishes.

anime({
  targets: '.box',
  translateX: 300,
  duration: 1000,
  complete: function(anim) {
    console.log('Animation finished!')
    document.querySelector('.status').textContent = 'Done!'
  }
})

Expected output: After the box finishes moving, the console logs and the status text updates.

Common Mistakes

1. Using too many loop iterations

Setting loop: 10000 creates a long-running animation. Use loop: true for infinite and stop it programmatically when needed.

2. Forgetting that delay applies per element

With multiple targets, delay: 200 applies the same 200ms to all. Use a function for staggered delays.

3. Using the wrong easing function name

Easing names are camelCase: easeInOutQuad, not ease-in-out-quad. Check the Anime.js docs for the exact names.

4. Setting direction without loop

Direction only has effect when loop is set. Without loop, direction is ignored.

5. Mutating animation parameters after creation

Parameters cannot be changed after the animation starts. Create a new animation with updated parameters if needed.

Practice Questions

1. What unit does duration use? Milliseconds. 1000 means 1 second.

2. How do you create a staggered delay? Pass a function to delay: delay: function(el, i) { return i * 100 }.

3. What does direction: 'alternate' do? The animation plays forward, then backward on each loop iteration.

4. How do you prevent an animation from autoplaying? Set autoplay to false and call .play() manually.

5. Which easing is best for a bouncy effect? easeOutElastic or easeOutBounce.

Challenge

Create a loading spinner that rotates infinitely with linear easing, pulses in size with alternate direction, and changes color through a cycle of three hues.

FAQ

Mini Project

Build a bouncing ball loader with multiple parameters. The ball bounces up and down with easeOutBounce, loops infinitely with alternate direction, and changes color each cycle using a begin callback.

const colors = ['#ff6b6b', '#4ecdc4', '#ffe66d', '#a29bfe']
let colorIndex = 0

anime({
  targets: '.ball',
  translateY: [0, -150],
  scale: [1, 0.8],
  duration: 600,
  loop: true,
  direction: 'alternate',
  easing: 'easeOutBounce',
  begin: function() {
    colorIndex = (colorIndex + 1) % colors.length
    document.querySelector('.ball').style.background = colors[colorIndex]
  }
})

<div class="ball" style="width:60px;height:60px;background:#ff6b6b;border-radius:50%;position:relative;top:200px;margin:0 auto;"></div>

What's Next

Advance to timeline and controls:

Related topics: CSS easing functions, JavaScript callback functions.