JSFiddle - React, Tailwind, and code Playground

by Kiran G

HTML

<div class="animated bounceInRight">
kiran
</div>

<div class="animated bounceInRight">

Kumar

</div>

CSS

/* Animated */

 
  .animatable {
    
    /* initially hide animatable objects */
    visibility: hidden;
    
    /* initially pause animatable objects their animations */
    -webkit-animation-play-state: paused;   
    -moz-animation-play-state: paused;     
    -ms-animation-play-state: paused;
    -o-animation-play-state: paused;   
    animation-play-state: paused; 
  }
  
  /* show objects being animated */
  .animated {
    visibility: visible;
    
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
  
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -ms-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
  }
  
  /* CSS Animations (extracted from http://glifo.uiparade.com/) */
  
  @-webkit-keyframes bounceInLeft {
      0% {
          opacity: 0;
          -webkit-transform: translateX(-2000px);
      }
      60% {
          -webkit-transform: translateX(20px);
      }
  
      80% {
          -webkit-transform: translateX(-5px);
      }
  
      100% {
          opacity: 1;
          -webkit-transform: translateX(0);
      }
  }
  
  
  
  @-webkit-keyframes bounceInRight {
      0% {
          opacity: 0;
          -webkit-transform: translateX(2000px);
      }
  
      60% {
          -webkit-transform: translateX(-20px);
      }
  
      80% {
          -webkit-transform: translateX(5px);
      }
  
      100% {
          opacity: 1;
          -webkit-transform: translateX(0);
      }
  }
  
   .animated.bounceInRight {
      -webkit-animation-name: bounceInRight;
      -moz-animation-name: bounceInRight;
      -o-animation-name: bounceInRight;
      animation-name:...

JavaScript

<!-- Animated  -->
    <script>
        // Trigger CSS animations on scroll.

        jQuery(function ($) {

            // Function which adds the 'animated' class to any '.animatable' in view
            var doAnimations = function () {

                // Calc current offset and get all animatables
                var offset = $(window).scrollTop() + $(window).height(),
                    $animatables = $('.animatable');

                // Unbind scroll handler if we have no animatables
                if ($animatables.size() == 0) {
                    $(window).off('scroll', doAnimations);
                }

                // Check all animatables and animate them if necessary
                $animatables.each(function (i) {
                    var $animatable = $(this);
                    if (($animatable.offset().top + $animatable.height() - 20) < offset) {
                        $animatable.removeClass('animatable').addClass('animated');
                    }
                });

            };

            // Hook doAnimations on scroll, and trigger a scroll
            $(window).on('scroll', doAnimations);
            $(window).trigger('scroll');

        });
    </script>