Skip to main content
The Animatable class provides a powerful way to create reactive, animatable properties on DOM elements or JavaScript objects. Each property becomes both a getter and setter that can smoothly animate to new values.

​
Constructor

new Animatable(targets, parameters)
​
targets
TargetsParam
Target element(s) to make animatable. Can be:
  • CSS selector string (e.g., '.element')
  • DOM element
  • Array of elements
  • JavaScript object
​
parameters
AnimatableParams
Configuration object defining animatable properties. Each key becomes an animatable property on the instance.

​
Parameters Object

The parameters object defines which properties should be animatable and their configuration:
​
[propertyName]
number | AnimatablePropertyParamsOptions
Define an animatable property. Can be:
  • number: Duration in milliseconds for default animations
  • object: Configuration options for the property

​
Property Configuration Options

​
duration
number
Default animation duration in milliseconds when property is updated.
​
unit
string
Unit to append to the animated value (e.g., 'px', '%', 'deg').
​
ease
EasingParam
Default easing function for animations.
​
modifier
(value: any) => any
Function to transform the animated value before applying it.
​
composition
'none' | 'replace' | 'blend'
How this animation composes with other animations on the same property.

​
Animation Callbacks

​
onBegin
(self: Animatable) => void
Called when any property animation begins.
​
onUpdate
(self: Animatable) => void
Called on each frame while any property is animating.
​
onComplete
(self: Animatable) => void
Called when all property animations complete.
​
onLoop
(self: Animatable) => void
Called when animations loop.
​
onPause
(self: Animatable) => void
Called when animations are paused.

​
Properties

​
targets
Array<HTMLElement | SVGElement | Object>
Array of target elements being animated.
​
animations
Object
Internal object containing the JSAnimation instances for each property.
​
callbacks
JSAnimation | null
Internal animation instance managing callbacks.

​
Dynamic Properties

Each property defined in the parameters object becomes a dynamic property on the Animatable instance: 
const animatable = new Animatable('.box', {
  x: 500,
  y: { duration: 800, unit: 'px' },
  rotate: 1000
});

// Getter - returns current value
const currentX = animatable.x(); // [0]

// Setter - animates to new value
animatable.x(100); // Animates x to 100 over 500ms
animatable.y(200, 1000); // Animates y to 200px over 1000ms
animatable.rotate(360, 800, 'inOutQuad'); // Animates rotate to 360 over 800ms with custom easing

​
Example

import { Animatable } from 'anime';

// Create animatable properties
const box = new Animatable('.box', {
  // Simple property with duration
  x: 500,
  
  // Property with configuration
  y: {
    duration: 800,
    unit: 'px',
    ease: 'inOutQuad'
  },
  
  // Property with modifier
  rotate: {
    duration: 1000,
    unit: 'deg',
    modifier: (value) => value % 360
  },
  
  // Callbacks
  onUpdate: (self) => {
    console.log('Animating:', self.x());
  },
  onComplete: () => {
    console.log('Animation complete!');
  }
});

// Animate properties
box.x(100); // Move to x: 100
box.y(200, 1000); // Move to y: 200 over 1000ms
box.rotate(360, 800, 'inOutElastic'); // Rotate with custom duration and easing

// Get current values
console.log(box.x()); // Current x position
console.log(box.y()); // Current y position

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us