perturbation

Randomizes each character's reveal timing. At 0, characters reveal at evenly spaced intervals. Increasing the value adds a random offset to each character's start and end times, scaled relative to the settle window. At 1, offsets can equal the full settle duration, causing characters to overlap and settle out of order.

Accepts

Number between 0 and 1

Default

0

perturbation code example

import { animate, scrambleText } from 'animejs';

const [ $p ] = utils.$('p');
const buttons = utils.$('button');

const values = [0, 0.5, 1];

function play(i) {
  animate($p, {
    innerHTML: scrambleText({ perturbation: values[i], cursor: '_________' }),
  });
}

buttons.forEach(($btn, i) => $btn.addEventListener('click', () => play(i)));

<div class="large row">
  <p class="text-s text-mono">Add random timing offsets to each character for a more organic and less uniform reveal effect.</p>
</div>
<div class="medium row">
  <fieldset class="controls">
    <button>0</button>
    <button>0.5</button>
    <button>1</button>
  </fieldset>
</div>

Previous Next