Anime Shuffle Text

<div class="ast-wrap" id="ast-wrap"></div>

.ast-wrap {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 4px;
  color: #e2e8f0;
  display: flex;
  justify-content: center;
}
.ast-char {
  display: inline-block;
}

const text = 'SHUFFLE';
const wrap = document.getElementById('ast-wrap');
text.split('').forEach(function(ch) {
  const span = document.createElement('span');
  span.classList.add('ast-char');
  span.textContent = ch;
  wrap.appendChild(span);
});
anime({
  targets: '.ast-char',
  translateX: function() { return anime.random(-100, 100); },
  translateY: function() { return anime.random(-60, 60); },
  rotate: function() { return anime.random(-90, 90); },
  opacity: [0, 1],
  duration: 1200,
  delay: anime.stagger(80),
  easing: 'easeOutElastic(1, 0.5)',
  direction: 'normal'
});