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)
The minimum value (inclusive)
The maximum value (inclusive)
Number of decimal places to round to
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)
The seed value for the random number generator
Default minimum value for the returned function
Default maximum value for the returned function
Default number of decimal places for the returned function
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.
The array or string to pick from
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.
The array to shuffle (modified in-place)
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.
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)
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.
increment
Number | Array<Number>
required
Step size or array of snap points
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).
Example:
import { wrap } from 'animejs';
wrap(370, 0, 360); // 10
wrap(-10, 0, 360); // 350
lerp()
Linear interpolation between two values.
Interpolation factor in the range [0, 1]
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)
Delta time in milliseconds
Interpolation factor in the range [0, 1]
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)
import { mapRange } from 'animejs';
mapRange(5, 0, 10, 0, 100); // 50
mapRange(75, 0, 100, 0, 1); // 0.75
degToRad()
Converts degrees to radians.
Example:
import { degToRad } from 'animejs';
degToRad(180); // 3.14159...
degToRad(90); // 1.5708...
radToDeg()
Converts radians to degrees.
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)
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)
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)
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
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)
});