Поэлементная анимация текста

<!--Поэлементная анимация текста по наведению-->
<!--https://mt-webdesign.ru/element-wise-->
<style>
.shuffle-hover-inside {
word-wrap: break-word;
}
.shuffle-hover-inside:before {
content: '';
display: block;
width: 100%;
height: 1px;
background-color: transparent;
position: absolute;
bottom: 0;
}
.shuffle-hover-inside:hover:before {
content: '';
display: block;
width: 100%;
height: 1px;
background-color: black;
position: absolute;
bottom: 0;
}
</style>
<script>
$('.shuffle-hover .tn-atom').addClass('shuffle-hover-inside');
jQuery(document).ready(function($) {
var shuffleElement = $('.shuffle-hover-inside');
shuffleElement.each(function() {
$(this).attr('data-text', $(this).text());
});
var animationInProgress = false;
shuffleElement.mouseenter(function() {
if (animationInProgress) return;
var element = $(this);
var originalText = element.data('text');
var animationDuration = 500;
animationInProgress = true;
shuffleText(element, originalText, animationDuration, function() {
animationInProgress = false;
});
});
function shuffleText(element, originalText, duration, onComplete) {
var elementTextArray = originalText.split('');
var currentIndex = 0;
function shuffleStep() {
if (currentIndex < elementTextArray.length) {
var randomIndex = Math.floor(Math.random() * elementTextArray.length);
var temp = elementTextArray[currentIndex];
elementTextArray[currentIndex] = elementTextArray[randomIndex];
elementTextArray[randomIndex] = temp;
element.text(elementTextArray.join(''));
currentIndex++;
setTimeout(shuffleStep, duration / elementTextArray.length);
} else {
element.text(originalText);
onComplete();
}
}
shuffleStep();
}
});
</script>