JSFiddle - React, Tailwind, and code Playground

HTML

<div>Scroll Down</div>
<h1 class="scroll-to js__scroll">I am The H1</h1>

CSS

div {
  height:800px;
}

h1 {
  transform: translateX(2000px);
  transition: transform 1s ease;
}

h1.element-visible {
  transform: translateX(0);
}

JavaScript

(function() {
  var $scrollItem = $('.js__scroll');
  var windowHeight = $(window).height();

  $(window).scroll(function() {
    var hT = $scrollItem.offset().top;
    var hH = $scrollItem.outerHeight();
    var wS = $(this).scrollTop();

    if (wS > (hT + hH - windowHeight)) {
     $scrollItem.addClass('element-visible');
    }
  });
})();