Utilities

Utils

A collection of helper utilities to work with values, numbers, DOM elements, and animation logic.

stagger()

Distribute animation delay or values across multiple elements:

import { animate, stagger } from 'animejs';

animate('.dots', {
  scale: [0, 1],
  delay: stagger(60),           // 60ms between each element
  duration: 400,
});

// Grid stagger (from center outward)
animate('.grid-item', {
  scale: [0, 1],
  delay: stagger(100, {
    grid: [10, 10],
    from: 'center',
  }),
});

random()

import { animate, random } from 'animejs';

animate('.particle', {
  x: random(-100, 100),
  y: random(-100, 100),
  duration: random(400, 1200),
});

Other Utilities

Function Description
clamp(val, min, max) Clamp a value between min and max
round(val, decimals) Round a number to N decimal places
lerp(start, end, t) Linear interpolation between two values
mapRange(v, in1, in2, out1, out2) Map a value from one range to another
utils.get(target, prop) Get the current animated value of a property
utils.set(target, prop, val) Set a property value instantly
utils.remove(target) Remove an element from all active animations
← SVG