Skip to main content
Anime.js can animate virtually any numeric property across different target types. Understanding how properties work is essential for creating sophisticated animations.

​
Property Types

Anime.js automatically detects and handles different property types:

​
CSS Properties

Standard CSS properties can be animated: 
import { animate } from 'animejs';

animate('.box', {
  opacity: 0.5,
  backgroundColor: '#FF4B4B',
  width: '100px',
  padding: '20px'
});

​
Transform Properties

Transforms are treated specially for better performance: 
animate('.box', {
  translateX: 100,
  translateY: 50,
  rotate: 180,
  scale: 1.5,
  skewX: 10
});

// Shorthand properties
animate('.box', {
  x: 100,      // translateX
  y: 50,       // translateY
  z: 25,       // translateZ
  rotate: 180, // rotateZ
  scale: 1.5   // scale
});
Transform properties are rendered together for optimal performance, avoiding layout thrashing.

​
SVG Attributes

SVG-specific attributes are fully supported: 
animate('circle', {
  r: 50,
  cx: 100,
  cy: 100,
  fill: '#FF4B4B'
});

animate('rect', {
  x: 50,
  y: 50,
  width: 100,
  height: 100,
  rx: 10
});

​
Object Properties

Animate properties on any JavaScript object: 
const obj = { value: 0, count: 0 };

animate(obj, {
  value: 100,
  count: 50,
  duration: 2000,
  onUpdate: () => {
    console.log(`Value: ${obj.value}, Count: ${obj.count}`);
  }
});

​
CSS Variables

Custom CSS properties (variables) can be animated: 
animate('.element', {
  '--custom-color': 255,
  '--progress': 100
});

​
Value Formats

​
Simple Values

The simplest form - animate to a specific value: 
animate('.box', {
  x: 100,
  opacity: 0.5,
  scale: 1.5
});

​
From-To Values

Specify both start and end values: 
animate('.box', {
  x: { from: -100, to: 100 },
  opacity: { from: 0, to: 1 }
});

// Shorthand array syntax
animate('.box', {
  x: [-100, 100],
  opacity: [0, 1]
});

​
Unit Values

Include units in your values: 
animate('.box', {
  width: '100px',
  height: '50%',
  margin: '2rem',
  fontSize: '2em'
});

​
Unit Conversion

Anime.js automatically converts between compatible units: 
animate('.box', {
  width: { from: '50px', to: '10rem' } // Converts units automatically
});

​
Color Values

Animate colors in various formats: 
animate('.box', {
  backgroundColor: '#FF4B4B',
  color: 'rgb(255, 75, 75)',
  borderColor: 'rgba(255, 75, 75, 0.5)',
  fill: 'hsl(0, 100%, 64%)'
});

// From-to colors
animate('.box', {
  backgroundColor: { from: '#FF4B4B', to: '#4BFF4B' }
});

​
Complex Values

Complex string values with multiple numbers: 
animate('.box', {
  filter: 'blur(10px) brightness(1.5)',
  transform: 'translateX(100px) rotate(45deg)',
  boxShadow: '0 10px 20px rgba(0,0,0,0.5)'
});

​
Relative Values

Use operators for relative animations:

​
Addition

animate('.box', {
  x: '+=100',  // Add 100 to current value
  y: '+=50'
});

​
Subtraction

animate('.box', {
  opacity: '-=0.5',  // Subtract 0.5 from current value
  scale: '-=0.2'
});

​
Multiplication

animate('.box', {
  scale: '*=2',  // Multiply current value by 2
  width: '*=1.5'
});

​
Chaining Relative Values

const box = document.querySelector('.box');

// First animation
animate(box, { x: 100 });

// Second animation continues from previous
animate(box, { x: '+=100' }); // Now at x: 200

​
Function-Based Values

Generate values dynamically for each target: 
animate('.box', {
  x: (el, i, total) => {
    // el: the current element
    // i: element index (0-based)
    // total: total number of elements
    return (i + 1) * 50;
  },
  rotate: (el, i) => i * 45,
  scale: (el, i, total) => 1 + (i / total)
});

​
CSS Variable Functions

Access CSS variables as values: 
// HTML: <div class="box" style="--end-pos: 200;"></div>

animate('.box', {
  x: 'var(--end-pos)',           // Use variable
  y: 'var(--y-pos, 100)'         // With fallback
});

​
Per-Property Timing

Different properties can have different durations and easings: 
animate('.box', {
  x: {
    value: 100,
    duration: 2000,
    ease: 'easeInOutQuad'
  },
  opacity: {
    value: 0.5,
    duration: 500,
    ease: 'linear'
  }
});

​
Property Detection

Anime.js detects property types from source code (src/core/values.js): 
export const getTweenType = (target, prop) => {
  return !target[isDomSymbol] ? tweenTypes.OBJECT :
    // Handle SVG attributes
    target[isSvgSymbol] && isValidSVGAttribute(target, prop) 
      ? tweenTypes.ATTRIBUTE :
    // Handle CSS Transform properties
    validTransforms.includes(prop) || shortTransforms.get(prop) 
      ? tweenTypes.TRANSFORM :
    // CSS variables
    stringStartsWith(prop, '--') ? tweenTypes.CSS_VAR :
    // All other CSS properties
    prop in target.style ? tweenTypes.CSS :
    // Handle other DOM Attributes
    prop in target ? tweenTypes.OBJECT :
    tweenTypes.ATTRIBUTE;
}

​
SVG Line Drawing

Animate SVG paths with the draw property: 
import { svg, createTimeline, stagger } from 'animejs';

createTim eline({
  defaults: {
    ease: 'inOut(4)',
    duration: 10000,
    loop: true
  }
})
.add(svg.createDrawable('.line'), {
  draw: [
    '0.5 0.5',  // Start and end at middle
    '0 1',      // Draw full line
    '0.5 0.5'   // Return to middle
  ],
  stroke: '#FF4B4B'
}, stagger([0, 8000], { from: 'first' }));

​
Multiple Values (Keyframe Values)

Animate through multiple values in sequence: 
animate('.box', {
  x: [0, 100, 50, 150],  // Animates: 0→100→50→150
  opacity: [1, 0.5, 0.8, 0]
});
For more control over keyframes, see the Keyframes documentation.

​
Property Modifiers

Apply modifiers to transform values before rendering: 
animate('.counter', {
  textContent: 100,
  duration: 2000,
  modifier: (value) => Math.round(value),
  onUpdate: (anim) => {
    // textContent will always be an integer
  }
});

// Round to specific decimal places
animate('.progress', {
  value: 100,
  modifier: (value) => Math.round(value * 100) / 100
});

​
Original Value Retrieval

Anime.js intelligently retrieves original values: 
// From source: src/core/values.js
export const getOriginalAnimatableValue = (target, propName, tweenType, animationInlineStyles) => {
  const type = !isUnd(tweenType) ? tweenType : getTweenType(target, propName);
  return type === tweenTypes.OBJECT ? target[propName] || 0 :
         type === tweenTypes.ATTRIBUTE ? target.getAttribute(propName) :
         type === tweenTypes.TRANSFORM ? parseInlineTransforms(target, propName, animationInlineStyles) :
         type === tweenTypes.CSS_VAR ? getCSSValue(target, propName, animationInlineStyles).trimStart() :
         getCSSValue(target, propName, animationInlineStyles);
}

​
Layered Transforms

Create complex layered transform animations: 
import { animate } from 'animejs';

// Multiple transforms on same element don't conflict
animate('.box', { rotate: 360, duration: 2000 });
animate('.box', { x: 100, duration: 1000, composition: 'blend' });

​
Best Practices

Shorthand properties are more readable and concise.
// Good
animate('.box', { x: 100, y: 50, rotate: 180 });

// Also works but more verbose
animate('.box', { 
  translateX: 100, 
  translateY: 50, 
  rotateZ: 180 
});
Including units prevents ambiguity and improves reliability.
// Good - explicit units
animate('.box', { width: '100px', margin: '2rem' });

// Avoid - ambiguous
animate('.box', { width: 100 }); // Might be px, %, or unitless
Specify both values when you need exact control.
animate('.box', {
  opacity: { from: 0, to: 1 },
  x: { from: -100, to: 100 }
});

​
API Reference

​
Property Value Formats

Simple value: 
propertyName: value
From-to object: 
propertyName: { from: startValue, to: endValue }
Array syntax: 
propertyName: [startValue, endValue]
Extended object: 
propertyName: {
  value: endValue,
  duration: 1000,
  delay: 100,
  ease: 'easeInQuad'
}
Function: 
propertyName: (element, index, total) => value

Build docs developers (and LLMs) love

Get started for freeTalk to us