Skip to main content
Anime.js provides utility functions for generating random values, useful for creating varied and organic animation effects.

​
random

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

​
Syntax

random(min, max, decimalLength)

​
Parameters

​
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. Use 0 for integers.

​
Returns

A random number between min and max with specified decimal precision.

​
Examples

// Random integer between 0 and 100
const value = anime.random(0, 100);

// Random decimal between 0 and 1 with 2 decimal places
const opacity = anime.random(0, 1, 2);

// Use in animation properties
anime({
  targets: '.box',
  translateX: () => anime.random(-250, 250),
  rotate: () => anime.random(-180, 180),
  scale: () => anime.random(0.5, 1.5, 2)
});

​
createSeededRandom

Creates a seeded pseudorandom number generator function for reproducible random sequences.

​
Syntax

createSeededRandom(seed, seededMin, seededMax, seededDecimalLength)

​
Parameters

​
seed
number
The seed value for the random number generator. Same seed produces same sequence.
​
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.

​
Returns

A random number generator function with signature (min, max, decimalLength).

​
Examples

// Create a seeded random generator
const seededRandom = anime.createSeededRandom(42);

// Will always produce the same sequence
const val1 = seededRandom(0, 100); // Always same for seed 42
const val2 = seededRandom(0, 100); // Always same for seed 42

// Use in animations for reproducible random effects
const myRandom = anime.createSeededRandom(12345, 0, 100);

anime({
  targets: '.box',
  translateX: () => myRandom(),
  translateY: () => myRandom()
});

​
randomPick

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

​
Syntax

randomPick(items)

​
Parameters

​
items
string | array
required
The array or string to pick a random element from.

​
Returns

A random element from the array or a random character from the string.

​
Examples

// Random element from array
const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A'];
const randomColor = anime.randomPick(colors);

// Random character from string
const randomLetter = anime.randomPick('ABCDEFGH');

// Use in animations
anime({
  targets: '.box',
  backgroundColor: () => anime.randomPick(colors),
  duration: 1000
});

​
shuffle

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

​
Syntax

shuffle(items)

​
Parameters

​
items
array
required
The array to shuffle. The array is modified in-place.

​
Returns

The same array reference, now shuffled.

​
Examples

// Shuffle an array of elements
const elements = document.querySelectorAll('.box');
const shuffled = anime.shuffle([...elements]);

// Animate shuffled elements
anime({
  targets: shuffled,
  translateY: -50,
  delay: anime.stagger(100)
});

// Shuffle animation order
const colors = ['red', 'blue', 'green', 'yellow'];
anime.shuffle(colors);

​
Practical Examples

​
Random Particle System

anime({
  targets: '.particle',
  translateX: () => anime.random(-500, 500),
  translateY: () => anime.random(-500, 500),
  scale: () => anime.random(0.2, 1, 2),
  rotate: () => anime.random(-360, 360),
  duration: () => anime.random(1000, 3000),
  delay: anime.stagger(50)
});

​
Randomized Color Transitions

const palette = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#96CEB4'];

anime({
  targets: '.box',
  backgroundColor: () => anime.randomPick(palette),
  duration: 2000,
  easing: 'easeInOutQuad',
  loop: true
});

​
Seeded Animation Playback

// Same animation every time with seed
const seededRandom = anime.createSeededRandom(99999);

anime({
  targets: '.element',
  translateX: () => seededRandom(-200, 200),
  translateY: () => seededRandom(-200, 200),
  rotate: () => seededRandom(-180, 180),
  duration: 2000
});

​
Use Cases

Organic Motion

Add natural variation to animations for more lifelike movement

Particle Effects

Create dynamic particle systems with random velocities and sizes

Testing

Use seeded random for reproducible animation tests

Generative Art

Build procedural animations with controlled randomness

​
Notes

The random() function uses Math.random() internally and produces different values each time.
Use createSeededRandom() when you need consistent “random” behavior for testing or reproducible animations.
The shuffle() function modifies the original array. Create a copy with [...array] if you need to preserve the original order.

Build docs developers (and LLMs) love

Get started for freeTalk to us