Animation

Core animation module for creating individual animations with tween-based property interpolation

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.

Related

• Timeline - Sequence multiple animations
• Timer - Base timing functionality
• Engine - Global animation engine