JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <p id="firstPara">text</p>
</div> >

CSS

body {
height: 1000px;
}

div {
position: relative;
top: 700px;
padding-bottom: 400px;
}

div #firstPara {
border: 1px solid;
}

JavaScript

var firstString = ["This ", "is ", " me."];
var firstPara = document.querySelector("#firstPara");

window.addEventListener("scroll", function() {
  // console.log('handler runs');
  setInterval(slideIn, 450);
});

function slideIn() {
  console.log('slide runs');
  var distanceSoFar = document.documentElement.scrollTop;
  if (distanceSoFar > 130) {
    for (var i = 0; i < firstString.length; i++) {
      var stringOut = firstString.shift();
      firstPara.innerHTML += stringOut;
      console.log("5");
    }
  }
};