Anime.js Targets — Complete Guide with Examples

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

Anime.js targets define which elements or objects you animate, supporting CSS selectors, DOM node lists, JavaScript objects, arrays, and SVG elements with a unified API.

What You'll Learn

By the end of this tutorial, you'll select elements by class, ID, and tag name, animate JavaScript objects, target multiple elements simultaneously, and pass SVG elements to Anime.

Why It Matters

Choosing the right target method determines how flexible and reusable your animations are. Learning all target types lets you animate anything in your application, not just DOM elements.

Real-World Use

DodaZIP uses Anime.js to animate progress bars during file extraction. The target is a JavaScript object representing the progress value, not a DOM element, allowing smooth numeric interpolation that updates the UI via requestAnimationFrame.

Where This Fits in Your Learning Path

flowchart LR
    A["Getting Started"] --> B["**Anime.js Targets**"]
    B --> C["Animation Parameters"]
    C --> D["Timeline & Controls"]
    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

CSS Selector Targets

The most common way to specify targets is with CSS selectors as strings.

anime({
  targets: '.box',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#ff6b6b',
  duration: 1500
})

<div class="box" style="width:50px;height:50px;background:#4ecdc4"></div>
<div class="box" style="width:50px;height:50px;background:#4ecdc4"></div>

Expected output: Both divs slide right 250px, rotate 360 degrees, and change color to red over 1.5 seconds.

DOM Node Targets

Pass DOM elements directly using JavaScript references.

const element = document.querySelector('#myElement')
anime({
  targets: element,
  scale: 1.5,
  borderRadius: '50%',
  duration: 1000,
  easing: 'easeInOutQuad'
})

<div id="myElement" style="width:80px;height:80px;background:#ffe66d;border-radius:4px"></div>

Expected output: The element scales up to 1.5x and becomes a circle.

JavaScript Object Targets

Anime can animate plain JavaScript objects, not just DOM elements.

const myObject = { value: 0, progress: 0 }
anime({
  targets: myObject,
  value: 100,
  progress: 1,
  easing: 'linear',
  round: 1,
  update: function() {
    console.log(myObject.value, myObject.progress)
  }
})

Expected output: The console logs values from 0 to 100 for value and 0 to 1 for progress over the animation duration.

Array Targets

Pass an array of selectors or elements to animate different types together.

anime({
  targets: ['.circle', '#square', document.querySelector('.triangle')],
  translateY: 200,
  duration: 2000,
  delay: function(el, i) { return i * 200 }
})

Expected output: Each element animates with a staggered delay of 200ms between them, all moving down 200px.

SVG Targets

Anime excels at animating SVG elements and attributes.

anime({
  targets: 'circle',
  cx: 300,
  cy: 200,
  r: 50,
  fill: '#ff6b6b',
  duration: 1500,
  easing: 'easeOutElastic'
})

<svg width="400" height="300">
  <circle cx="100" cy="150" r="30" fill="#4ecdc4"/>
</svg>

Expected output: The circle moves from (100,150) to (300,200), grows to radius 50, and changes color with an elastic easing.

Common Mistakes

1. Using invalid CSS selectors

Anime uses document.querySelectorAll internally. Invalid selectors throw JavaScript errors. Always test your selector in the browser console first.

2. Forgetting to wait for the DOM to load

If you call anime() before the DOM is ready, no elements are found. Wrap anime calls in DOMContentLoaded or place scripts at the end of body.

3. Passing a single element instead of a NodeList

When using getElementsByClassName, the live HTMLCollection changes as Anime modifies elements. Use querySelectorAll for static NodeLists.

4. Animating JavaScript objects without an update callback

Object targets don't update the UI automatically. Always use the update callback to apply changes to the DOM or other targets.

5. Targeting elements inside Shadow Dom

Standard CSS selectors don't penetrate Shadow DOM. Pass shadow root elements directly as DOM node targets.

Practice Questions

1. What types of targets does Anime.js support? CSS selectors, DOM nodes, JavaScript objects, arrays of targets, and SVG elements.

2. How do you animate a JavaScript object? Pass the object as targets and use the update callback to apply the animated values.

3. Can you mix different target types in one animation? Yes. Pass an array containing selectors, DOM nodes, and objects as the targets value.

4. What happens if a CSS selector matches no elements? No animation runs. Anime does not throw an error for empty target lists.

5. How do you animate multiple elements with different delays? Use the delay parameter as a function: delay: function(el, i) { return i * 200 }.

Challenge

Create an animation that targets a mix of divs, SVGs, and a JavaScript object. The divs and SVGs animate visually while the object logs its progress to the console.

FAQ

Mini Project

Build an animated grid where each cell is a target. Use Anime to animate all cells with staggered delays, creating a wave effect. Include a reset button that reverses the animation.

const grid = document.querySelector('.grid')
const items = grid.querySelectorAll('.cell')

function waveAnimation() {
  anime({
    targets: items,
    scale: [1, 1.3, 1],
    rotate: [0, 180, 360],
    borderRadius: ['4px', '50%', '4px'],
    duration: 800,
    delay: function(el, i) { return i * 50 },
    easing: 'easeInOutQuad'
  })
}

document.querySelector('#animateBtn').addEventListener('click', waveAnimation)

<style>.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-width: 300px; } .cell { width: 50px; height: 50px; background: #4ecdc4; border-radius: 4px; }</style>
<div class="grid">
  <div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div>
  <div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div>
  <div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div>
</div>
<button id="animateBtn">Animate Wave</button>

What's Next

Continue with animation parameters:

Related topics: DOM querySelector and selectors, CSS selectors reference.