import { animate, scrambleText } from 'animejs';

const [ $p ] = utils.$('p');
const buttons = utils.$('button');
const easeCurves = ['linear', 'inOut(3)', 'outExpo'];

function play(ease) {
  animate($p, { innerHTML: scrambleText({ ease, override: false }) });
}

play(easeCurves[0]);

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

<div class="large row">
  <p class="text-s text-mono">Apply easing functions to control the acceleration and deceleration of the scramble reveal wave.</p>
</div>
<div class="medium row">
  <fieldset class="controls">
    <button>linear</button>
    <button>inOut</button>
    <button>outExpo</button>
  </fieldset>
</div>