Animatable

The Animatable API creates a persistent, reactive binding between an element and its animatable properties — great for interaction-driven animations.

createAnimatable()

Returns an object with setters for each declared property. Updating a setter instantly animates the element to the new value.

import { createAnimatable } from 'animejs';

const box = createAnimatable('.box', {
  x: { duration: 600, ease: 'outElastic' },
  y: { duration: 600, ease: 'outElastic' },
  scale: { duration: 300 },
});

// Animate on mouse move
document.addEventListener('mousemove', (e) => {
  box.x = e.clientX;
  box.y = e.clientY;
});

Use Cases

• Mouse-follow cursor animations
• Hover and interaction-driven state transitions
• Physics-based UI that reacts to user input
• Real-time data visualization that animates between values

Per-Property Options