JSFiddle - React, Tailwind, and code Playground

by Glynne Turner

HTML

<section class="sec1" >
  <div id="animate1" class="bounceInRight slowly delay3 animate">
    this is some text
  </div>
  
</section>
<section class="sec2" >
    <div id="animate2" class="bounceInleft slowly delay3 animate">
    this is some text
  </div>
</section>
<section class="sec3" >
  
    <div id="animate3" class="bounceInleft slowly delay3 animate">
    this is some text
  </div>
</section>
<section id="animate4" class="animate sec4" >
  
</section>

CSS

*{margin:0;padding:0}
section{height:50vh; transition:all .5s linear}
.sec1{background:red}
.sec2{background:green}
.sec3{background:blue}
.sec4{background:pink}
.animated{background:grey;height:100%}
.animate {height:100%}


/* ANIMATIONS */
@charset...

JavaScript

$.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();

    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};
$(window).on('resize scroll', function() {
var animatable ='';
	$animatables = $('.animate');
	$animatables.each(function(i) {
	var $animatable = $(this);
 	if ($animatable.isInViewport()) {
  			
				 var animatable = $(this).attr('id'); 
         console.log(animatable )
         $('#'+animatable ).removeClass('animate').addClass('animated');
 
        }

});

   
 
});