JSFiddle - React, Tailwind, and code Playground

by raphaelwilker

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<script src="https://wowjs.uk/dist/wow.min.js"></script>
<div id="loader">
  <i>loading</i>
</div>
<div class="body">
  <div class="wow bounceInUp">
  Content to Reveal Here
</div>
 <section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">
 1
</section>

<section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="1">
2
</section>
 <section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">
 1
</section>

<section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="1">
2
</section>
 <section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">
 1
</section>

<section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="1">
2
</section>
 <section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">
 1
</section>

<section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="1">
2
</section>
 <section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">
 1
</section>

<section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="1">
2
</section>
 <section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">
 1
</section>

<section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="1">
2
</section>
 <section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">
 1
</section>

<section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="1">
2
</section>
 <section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">
 1
</section>

<section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="1">
2
</section>
 <section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">
 1
</section>

<section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="1">
2
</section>
 <section class="wow slideInLeft"...

CSS

.slideInLeft{
  background-color: greenyellow;
}
.slideInRight{
  background-color: blueviolet;
}

JavaScript

var block = false;
var startAnimation = function(){
	new WOW().init();
}
document.onreadystatechange = function() { 
            if (document.readyState !== "complete") {
            	
								document.querySelector(".body").style.visibility = "hidden"; 
                document.querySelector("#loader").style.visibility = "visible";

            } else { 
                
setTimeout(function(){
                	
                  
                document.addEventListener('scroll', function(e) {
								if(!block){
                	block = true
									startAnimation();
                }
								
});
document.addEventListener('scroll', function(e) {
								if(!block){
                	block = true
									startAnimation();
                }
								
});
document.addEventListener('mousemove', function(e) {
								if(!block){
                	block = true
									startAnimation();
                }
								
});
document.addEventListener('keypress', function(e) {
								if(!block){
                	block = true
									startAnimation();
                }
								
});

document.querySelector("#loader").style.display = "none"; 
                document.querySelector(".body").style.visibility = "visible";
                
                },5000)

            } 
        };
var block = false;
var startAnimation = function(){
	new WOW().init();
}
document.onreadystatechange = function() { 
            if (document.readyState !== "complete") {
            	
								document.querySelector(".body").style.visibility = "hidden"; 
                document.querySelector("#loader").style.visibility = "visible";

            } else { 
                
setTimeout(function(){
                	
                  
                document.addEventListener('scroll', function(e) {
								if(!block){
                	block = true
									startAnimation();
                }
								
});
document.addEventListener('scroll', function(e) {
								if(!block){
                	block =...