import { animate, scrambleText } from 'animejs';

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

let reversed = false;

function play() {
  reversed = !reversed;
  $button.textContent = `reversed: ${reversed}`;
  animate($p, {
    innerHTML: scrambleText({ from: 'center', reversed }),
  });
}

play();

$button.addEventListener('click', play);

<div class="large row">
  <p class="text-s text-mono">The animation flows in the opposite direction of the specified from value.</p>
</div>
<div class="medium row">
  <fieldset class="controls">
    <button>reversed: false</button>
  </fieldset>
</div>