JSFiddle - React, Tailwind, and code Playground

by davidxmartins

HTML

<div style="height: 900px"></div>
<div class="animation-test">
     <h1>TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST </h1>

</div>
<div style="height: 900px"></div>

CSS

.element-to-hide{
    visibility:hidden;
}

.slideUp {
   opacity: 1;

   animation-name: slideUp;
  -webkit-animation-name: slideUp;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
   transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -webkit-transition: opacity 1s ease-in-out;
}

@keyframes slideUp {
  0% {
    transform: translateY(30%);
    opacity: 0;
    }
100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(30%);
    opacity: 0;
  }
100% {
    -webkit-transform: translateY(0%);
    opacity: 1;
  }
}

h1 { 
font-size: 100px;
color: black;
}

JavaScript

$(window).scroll(function () {
    $('.animation-test').each(function () {
        var imagePos = $(this).offset().top;
        var imageHeight = $(this).height();
        var topOfWindow = $(window).scrollTop();

        if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
            $(this).addClass("slideUp");
        } else {
            $(this).removeClass("slideUp");
        }
    });
});