I have text animated in JavaScript and CSS but the problem is that text is repeated constantly. How I can stop repeating after is shown once and stay displayed.
Javascript code is:
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script>
// Wrap every letter in a span
var textWrapper = document.querySelector('.slogan');
textWrapper.innerHTML = textWrapper.textContent.replace(/S/g, "<span class='letter'>$&</span>");
anime.timeline({loop: true})
.add({
targets: '.slogan .letter',
opacity: [0,1],
easing: "easeInOutQuad",
duration: 2250,
delay: (el, i) => 150 * (i+1)
}).add({
targets: '.slogan',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
</script>
The final result that I need is an after-show slogan to stay like that till customers refresh the page and stop repeating after 1 time.
Thanks all