Skip to main content
The animate() function is the primary way to create animations in Anime.js. It accepts targets and animation parameters, returning a new animation instance that automatically initializes and starts playing.

​
Signature

function animate(
  targets: TargetsParam,
  parameters: AnimationParams
): JSAnimation

​
Parameters

​
targets
TargetsParam
required
The element(s) to animate. Can be:
  • CSS selector string (e.g., '.my-element')
  • DOM element (e.g., document.querySelector('.my-element'))
  • NodeList or array of elements
  • Plain JavaScript object
  • Array of any combination of the above
​
parameters
AnimationParams
required
Animation configuration object containing properties to animate and animation settings.

​
Return Value

Returns a JSAnimation instance with the following characteristics:
  • Automatically initialized via .init()
  • Starts playing immediately if autoplay is true (default)
  • Provides control methods (play, pause, restart, etc.)
  • Extends the Timer class, inheriting all timer functionality

​
Examples

​
Basic Animation

import { animate } from 'animejs';

// Animate a single element
animate('.box', {
  translateX: 250,
  duration: 1000,
  ease: 'outQuad'
});

​
Multiple Properties

animate('.box', {
  translateX: 250,
  scale: 2,
  rotate: '1turn',
  duration: 2000,
  ease: 'inOutQuad'
});

​
Array Values (From-To)

animate('.box', {
  translateX: [0, 250],  // From 0 to 250
  opacity: [1, 0],       // From 1 to 0
  duration: 1500
});

​
Function-Based Values

animate('.box', {
  translateX: (target, index, total) => {
    return index * 100;  // Stagger based on index
  },
  duration: 1000
});

​
With Callbacks

const anim = animate('.box', {
  translateX: 250,
  duration: 1000,
  onBegin: (animation) => {
    console.log('Animation started');
  },
  onUpdate: (animation) => {
    console.log('Progress:', animation.progress);
  },
  onComplete: (animation) => {
    console.log('Animation completed');
  }
});

​
Keyframe Animation

// Duration-based keyframes
animate('.box', {
  keyframes: [
    { translateX: 100, duration: 500 },
    { translateY: 100, duration: 500 },
    { translateX: 0, duration: 500 },
    { translateY: 0, duration: 500 }
  ]
});

// Percentage-based keyframes
animate('.box', {
  duration: 2000,
  keyframes: {
    '0%': { translateX: 0, scale: 1 },
    '50%': { translateX: 250, scale: 1.5 },
    '100%': { translateX: 0, scale: 1 }
  }
});

​
Controlling the Animation

const anim = animate('.box', {
  translateX: 250,
  duration: 1000,
  autoplay: false  // Don't start automatically
});

// Control methods
anim.play();      // Start playing
anim.pause();     // Pause
anim.restart();   // Restart from beginning
anim.reverse();   // Play in reverse

​
Notes

  • The animate() function is equivalent to new JSAnimation(targets, parameters).init()
  • All animations are automatically added to the global animation engine
  • Properties can use various value formats: numbers, strings with units, arrays, objects, or functions
  • The returned animation instance is chainable and can be used with Promises via .then()

Build docs developers (and LLMs) love

Get started for freeTalk to us