JSFiddle - React, Tailwind, and code Playground

by pradeep

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.js"></script>
      <div class="js-page-scroll">
        <main>
          <section>
            <h2>1</h2>
            <p class="wow" data-inanimation="fadeInUp" data-outanimation="fadeOutUp" data-inanimationn="dsfsdg">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
            </p>
          </section>
          <section>
            <h2>2</h2>
            <p class="wow" data-inanimation="fadeInUp" data-outanimation="fadeOutUp">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
            </p>
          </section>
          <section>
            <h2>3</h2>
            <p class="wow" data-inanimation="fadeInLeft" data-outanimation="fadeOutLeft">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
            </p>
          </section>
          <section>
            <h2>4</h2>
            <p class="wow" data-inanimation="fadeInUp" data-outanimation="fadeOutUp">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
            </p>
          </section>
          <section>
            <h2>5</h2>
            <p class="wow"...

CSS

main {
        display: flex;
        flex-flow: column;
        align-items: center;
        align-content: center;
        justify-content: space-between;
    }

    section {
        display: block;
        width: 300px;
        border: 1px solid #000;
        padding: 1rem;
    }

    .js-page-scroll {
        width: 100%;
        height: 500px;
        overflow-y: auto;
    }

JavaScript

$(window).ready(function(){
    	// Horizontal scroll
        if($(".js-page-scroll").length){
            $(".js-page-scroll").mCustomScrollbar({
            	axis:"y",
                theme:"dark-3",
                // scrollbarPosition: 'outside',
                callbacks:{
                        whileScrolling:function(){
                     animateContent();
                        }
                    }
            });
        }
    });
    animateContent();
                //	new WOW().init();
                
                function animateContent() {
                
              
                
                   var divWidth = $(".js-page-scroll").height();
                   var divWidthLg = $(".js-page-scroll").height() - 20;
                   var divWidthMd = $(".js-page-scroll").height() - 40;
                   var divWidthSm = $(".js-page-scroll").height() - 100;
                        //console.log(divWidth);
                         //console.log(divWidthLg);console.log(divWidthMd);
                         
                         
                    var section =$("section");
                          
                          
                     section.each(function(){
                     
                 			var inAnimation = $("p" , this).data("inanimation");
                     var outAnimation = $("p" , this).data("outanimation");
                     var offset = $(this).offset().top;
                     var ind = $(this).index() + 1;
                     
 						console.log(ind, offset, inAnimation, outAnimation);
                     
                     if(offset > divWidthLg) {
                     
											$("p" , this).addClass("animated "+ outAnimation);
                      
                      }
                      
										if ( (offset < divWidthLg)){
                     
                     if ($("p" , this).hasClass("animated")){
                     $("p" , this).removeClass();
              ...