Skip to main content

​
Overview

The Animation module is the foundation of Anime.js, providing the JSAnimation class and animate() function for creating individual animations. It handles property interpolation, keyframes, easing, and composition.

​
Importing

import { animate, JSAnimation } from 'animejs';

​
Creating Animations

​
animate()

The animate() function creates and initializes a new animation. 
animate(targets, parameters)
Parameters:
  • targets - DOM elements, objects, or CSS selector to animate
  • parameters - Animation configuration object

​
Basic Example

import { animate } from 'animejs';

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

​
Multiple Properties

animate('.box', {
  translateX: 250,
  translateY: 100,
  scale: 1.5,
  opacity: 0.5,
  backgroundColor: '#FF0000',
  duration: 1500
});

​
Animation Parameters

​
Property Values

​
property
number | string | object | array
The target value for any animatable property
// Simple value
animate('.box', { translateX: 100 });

// From-to values
animate('.box', { translateX: [0, 100] });

// Object syntax with options
animate('.box', {
  translateX: {
    from: 0,
    to: 100,
    duration: 500,
    ease: 'linear'
  }
});

​
Timing Parameters

​
duration
number
default:"1000"
Animation duration in milliseconds
​
delay
number
default:"0"
Delay before animation starts in milliseconds
​
ease
string | function
default:"outQuad"
Easing function for the animation
animate('.box', {
  translateX: 250,
  duration: 2000,
  delay: 500,
  ease: 'inOutQuad'
});

​
Keyframes

​
keyframes
array
Array of keyframe objects for complex animations
// Duration keyframes
animate('.box', {
  keyframes: [
    { translateX: 100, duration: 500 },
    { translateX: 200, duration: 500 },
    { translateX: 0, duration: 500 }
  ]
});

// Percentage keyframes
animate('.box', {
  duration: 2000,
  keyframes: {
    '0%': { translateX: 0 },
    '50%': { translateX: 200 },
    '100%': { translateX: 0 }
  }
});

​
Animation Control

The animate() function returns a JSAnimation instance with control methods:

​
Playback Methods

const animation = animate('.box', {
  translateX: 250,
  duration: 1000
});

// Control playback
animation.pause();    // Pause the animation
animation.resume();   // Resume playback
animation.play();     // Play forward
animation.reverse();  // Play in reverse
animation.restart();  // Restart from beginning

​
Seeking

// Seek to specific time
animation.seek(500); // Jump to 500ms

// Seek using progress (0-1)
animation.progress = 0.5; // Jump to 50%

// Seek to specific iteration
animation.currentIteration = 2;

​
State Methods

// Cancel and remove animation
animation.cancel();

// Revert to original values
animation.revert();

// Complete immediately
animation.complete();

​
Advanced Features

​
Composition Modes

​
composition
string
default:"replace"
How animations compose with existing animations: replace, none, or blend
animate('.box', {
  translateX: 100,
  composition: 'blend' // Additive composition
});

​
Function-Based Values

animate('.box', {
  translateX: (el, index, total) => {
    return index * 100; // Different value per element
  },
  duration: 1000
});

​
Modifiers

​
modifier
function
Function to modify the animated value before rendering
animate('.box', {
  translateX: 100,
  modifier: (value) => Math.round(value) // Round to integers
});

​
Looping

​
loop
boolean | number
default:"false"
Number of times to loop, true for infinite
​
alternate
boolean
default:"false"
Whether to alternate direction on each loop
​
loopDelay
number
default:"0"
Delay between loops in milliseconds
animate('.box', {
  translateX: 250,
  duration: 1000,
  loop: 3,
  alternate: true,
  loopDelay: 500
});

​
Callbacks

​
onBegin
function
Called when animation begins
​
onUpdate
function
Called on each frame update
​
onLoop
function
Called when animation loops
​
onComplete
function
Called when animation completes
animate('.box', {
  translateX: 250,
  duration: 1000,
  onBegin: (anim) => console.log('Started'),
  onUpdate: (anim) => console.log('Progress:', anim.progress),
  onComplete: (anim) => console.log('Finished')
});

​
Promise Support

Animations can be awaited using .then(): 
const animation = animate('.box', {
  translateX: 250,
  duration: 1000
});

await animation.then();
console.log('Animation complete!');

​
Animation Properties

​
Read-Only Properties

​
targets
array
Array of target elements/objects being animated
​
duration
number
Total animation duration including loops
​
iterationDuration
number
Duration of a single iteration
​
paused
boolean
Whether animation is currently paused
​
completed
boolean
Whether animation has completed

​
Writable Properties

const anim = animate('.box', { translateX: 250 });

// Modify playback speed
anim.speed = 2; // 2x speed

// Change time unit
anim.timeUnit = 's'; // Use seconds instead of ms

// Control current time
anim.currentTime = 500;
anim.progress = 0.5;

​
JSAnimation Class

For advanced use cases, you can instantiate JSAnimation directly: 
import { JSAnimation } from 'animejs';

const animation = new JSAnimation(
  '.box',
  { translateX: 250, duration: 1000 },
  null, // parent timeline
  0     // position in timeline
).init();
Most users should use the animate() function instead of instantiating JSAnimation directly.
  • Timeline - Sequence multiple animations
  • Timer - Base timing functionality
  • Engine - Global animation engine

Build docs developers (and LLMs) love

Get started for freeTalk to us