Good vibrations

Basic recipe

Send letters through a wave

<h1 data-a11y-text-split
    data-split-type="letters"
    data-split-mode="visual">
  Good vibrations
</h1>

<button type="button">Pause wave</button>

import { splitAll } from
  '../dist/index.js';

splitAll();

const letters = document.querySelectorAll(
  '[data-split-letter]'
);

function animate(time) {
  letters.forEach((letter, index) => {
    const phase = time * 0.004 - index * 0.52;
    letter.style.transform =
      `translateY(${Math.sin(phase) * .22}em)`;
  });
  requestAnimationFrame(animate);
}

Each letter receives a staggered sine-wave phase. Because the phase advances continuously, the loop has no endpoint where motion needs to stop and restart.