revealRate

How many characters reveal per second. Higher values make the reveal wave move faster. Together with settleDuration, it sets the total duration when no explicit duration is given.

Accepts

Number

Default

60

revealRate code example

import { animate, scrambleText } from 'animejs';

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

const values = [20, 60, 120];

function play(i) {
  animate($p, {
    innerHTML: scrambleText({ revealRate: values[i] }),
  });
}

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

<div class="large row">
  <p class="text-s text-mono">Higher values make the reveal wave move faster.</p>
</div>
<div class="medium row">
  <fieldset class="controls">
    <button>20</button>
    <button>60</button>
    <button>120</button>
  </fieldset>
</div>

Previous Next

cursor
revealDelay