Irregular easing

An irregular easing defines the pace of an animation using linear interpolation between randomized points.

import { animate, irregular } from 'animejs';

animate(target, { x: 100, ease: irregular(10, 1.5);

Parameters

The irregular function takes up to 2 parameters irregular(steps, randomness):

Name	Type	Info
steps	`Number`	Represents the number of random steps to generate. Must be a positive integer.
randomness ^(opt)	`Number`	Controls the amplitude of random variations. Higher values create more dramatic jumps between steps (default: `1`).

Examples

Name	Editor link
Light irregular easing	Open in editor
Heavy irregular easing	Open in editor

Irregular easing code example

import { animate, waapi, irregular } from 'animejs';

animate('.row:nth-child(1) .square', {
  x: '17rem',
  rotate: 360,
  duration: 2000,
  ease: irregular(10, .5)
});

animate('.row:nth-child(2) .square', {
  x: '17rem',
  rotate: 360,
  duration: 2000,
  ease: irregular(10, 1)
});

waapi.animate('.row:nth-child(3) .square', {
  x: '17rem',
  rotate: 360,
  duration: 2000,
  ease: irregular(10, 2)
});

<div class="medium row">
  <div class="square"></div>
  <div class="padded label">irregular(10, .5)</div>
</div>
<div class="medium row">
  <div class="square"></div>
  <div class="padded label">irregular(10, 1)</div>
</div>
<div class="medium row">
  <div class="square"></div>
  <div class="padded label">irregular(10, 2)</div>
</div>

Previous Next