Utility Functions

Mathematical and string manipulation utilities for animations

Anime.js provides a comprehensive set of utility functions for mathematical operations, value manipulation, and functional composition. These utilities support chainable operations for elegant function composition.

Random Utilities

random()

Generates a random number between min and max (inclusive) with optional decimal precision.

random(min, max, decimalLength)

min · Number · default: "0"

The minimum value (inclusive)

max · Number · default: "1"

The maximum value (inclusive)

decimalLength · Number · default: "0"

Number of decimal places to round to

Example:

import { random } from 'animejs';

random(); // Random float between 0-1
random(1, 10); // Random integer between 1-10
random(0, 100, 2); // Random number with 2 decimals: e.g., 42.37

createSeededRandom()

Creates a seeded pseudorandom number generator function for reproducible randomness.

createSeededRandom(seed, seededMin, seededMax, seededDecimalLength)

seed · Number

The seed value for the random number generator

seededMin · Number · default: "0"

Default minimum value for the returned function

seededMax · Number · default: "1"

Default maximum value for the returned function

seededDecimalLength · Number · default: "0"

Default number of decimal places for the returned function

Example:

import { createSeededRandom } from 'animejs';

const rng = createSeededRandom(12345);
rng(); // Same sequence every time with seed 12345
rng(1, 10); // Random between 1-10 using the seeded generator

randomPick()

Picks a random element from an array or a random character from a string.

randomPick(items)

items · String | Array · required

The array or string to pick from

Example:

import { randomPick } from 'animejs';

randomPick(['red', 'blue', 'green']); // Returns random color
randomPick('ABCDE'); // Returns random character

shuffle()

Shuffles an array in-place using the Fisher-Yates algorithm.

shuffle(items)

items · Array · required

The array to shuffle (modified in-place)

Example:

import { shuffle } from 'animejs';

const arr = [1, 2, 3, 4, 5];
shuffle(arr); // arr is now shuffled

Mathematical Utilities

clamp()

Clamps a value between minimum and maximum bounds.

clamp(value, min, max)

value · Number · required

Value to clamp

min · Number · required

Minimum boundary

max · Number · required

Maximum boundary

Example:

import { clamp } from 'animejs';

clamp(150, 0, 100); // 100
clamp(-10, 0, 100); // 0
clamp(50, 0, 100);  // 50

round()

Rounds a number to specified decimal places.

round(value, decimalLength)

value · Number · required

Value to round

decimalLength · Number · required

Number of decimal places

Example:

import { round } from 'animejs';

round(3.14159, 2); // 3.14
round(123.456, 0); // 123

snap()

Snaps a value to the nearest increment or closest array value.

snap(value, increment)

value · Number · required

Value to snap

increment · Number | Array<Number> · required

Step size or array of snap points

Example:

import { snap } from 'animejs';

snap(23, 10);           // 20
snap(42, [0, 25, 50]);  // 50 (closest value)

wrap()

Wraps a value within a range (circular wrapping).

wrap(value, min, max)

value · Number · required

Value to wrap

min · Number · required

Minimum boundary

max · Number · required

Maximum boundary

Example:

import { wrap } from 'animejs';

wrap(370, 0, 360); // 10
wrap(-10, 0, 360); // 350

lerp()

Linear interpolation between two values.

lerp(start, end, factor)

start · Number · required

Starting value

end · Number · required

Ending value

factor · Number · required

Interpolation factor in the range [0, 1]

Example:

import { lerp } from 'animejs';

lerp(0, 100, 0.5);  // 50
lerp(0, 100, 0.25); // 25

damp()

Frame rate independent damped linear interpolation.

damp(start, end, deltaTime, factor)

start · Number · required

Starting value

end · Number · required

Target value

deltaTime · Number · required

Delta time in milliseconds

factor · Number · required

Interpolation factor in the range [0, 1]

Example:

import { damp } from 'animejs';

let position = 0;
const target = 100;
const deltaTime = 16.67; // ~60fps

position = damp(position, target, deltaTime, 0.1);

mapRange()

Maps a value from one range to another.

mapRange(value, inLow, inHigh, outLow, outHigh)

value · Number · required

Input value

inLow · Number · required

Input range minimum

inHigh · Number · required

Input range maximum

outLow · Number · required

Output range minimum

outHigh · Number · required

Output range maximum

Example:

import { mapRange } from 'animejs';

mapRange(5, 0, 10, 0, 100); // 50
mapRange(75, 0, 100, 0, 1); // 0.75

degToRad()

Converts degrees to radians.

degToRad(degrees)

degrees · Number · required

Angle in degrees

Example:

import { degToRad } from 'animejs';

degToRad(180); // 3.14159...
degToRad(90);  // 1.5708...

radToDeg()

Converts radians to degrees.

radToDeg(radians)

radians · Number · required

Angle in radians

Example:

import { radToDeg } from 'animejs';

radToDeg(Math.PI);     // 180
radToDeg(Math.PI / 2); // 90

String Utilities

roundPad()

Rounds a number to fixed decimal places and returns as string.

roundPad(value, decimalLength)

value · Number | String · required

Value to round

decimalLength · Number · required

Number of decimal places

Example:

import { roundPad } from 'animejs';

roundPad(3.1, 2);    // "3.10"
roundPad(5.6789, 2); // "5.68"

padStart()

Pads the start of a value with a string.

padStart(value, totalLength, padString)

value · Number · required

Value to pad

totalLength · Number · required

Target length

padString · String · required

String to pad with

Example:

import { padStart } from 'animejs';

padStart(5, 3, '0');    // "005"
padStart(42, 5, '0');   // "00042"

padEnd()

Pads the end of a value with a string.

padEnd(value, totalLength, padString)

value · Number · required

Value to pad

totalLength · Number · required

Target length

padString · String · required

String to pad with

Example:

import { padEnd } from 'animejs';

padEnd(5, 3, '0');    // "500"
padEnd(42, 5, '0');   // "42000"

Chainable Utilities

All mathematical utilities support chainable operations for elegant function composition:

import { clamp, round, mapRange } from 'animejs';

// Chain operations
const process = clamp(0, 100).round(2).mapRange(0, 100, 0, 1);

const result = process(75.6789); // Clamp → Round → Map

Chainable utilities:

• clamp(min, max)
• round(decimalLength)
• snap(increment)
• wrap(min, max)
• lerp(start, end)
• damp(start, end, deltaTime)
• mapRange(inLow, inHigh, outLow, outHigh)
• roundPad(decimalLength)
• padStart(totalLength, padString)
• padEnd(totalLength, padString)
• degToRad()
• radToDeg()

Example:

import anime from 'animejs';

anime({
  targets: '.box',
  translateX: anime.clamp(0, 500).snap(50),
  rotate: anime.mapRange(0, 1, 0, 360).round(0)
});