JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="body">
  <div id="par" data-text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi deserunt laboriosam odio quis omnis sed sunt animi assumenda asperiores, eaque ratione maxime tenetur nam illo debitis ipsa fugit voluptas dolorem?">
  </div>
</div>

CSS

body {
  overflow: hidden;
}
div#body {
  white-space: nowrap;
  width: 90%;
  overflow: hidden;
  margin: auto;
  /* animation: b 3s forwards; */
}
#par {
  min-width: 100%;
  animation: b 20s ease-out , a 20s linear infinite 10s;
}
@keyframes a {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes b {
  from {
    transform: translateX(20%);
  }
  to {
    transform: translateX(-100%);
  }
}

JavaScript

var kfn_type = function(element,speed){
    var text = element.dataset.text;
    var arr = Array.from(text);
    var b = 0;
    var int = setInterval(function(){
        if (b === arr.length - 1) {
            clearInterval(int)
        }
        element.innerHTML += arr[b];
        b++;
    },speed)
}

kfn_type(document.querySelector('#par'),10)