JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div class="reveal" data-effect="fadeIn">Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test Animation</div>
<div>Test...

CSS

/*
    https://github.com/daneden/animate.css
*/

body {
    max-width: 400px;
}

.reveal {
    margin: 50px;
}



@charset "UTF-8";
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2014 Daniel Eden
*/

.animated {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

@-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
            transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
            transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
            transform: translate3d(0,-4px,0);
  }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755,...

JavaScript

$(document).ready(function() {
    

    $('.reveal').each( function() {
        
        var x = {};

        x.this = $(this),
        x.thisD = x.this.data(),
        x.win = $(window),
        x.animation = x.thisD.effect || 'fadeInRight';
        
        // Animate on document ready...
        revealAnimation( x );

        // Animate on scroll...
        x.win.on("scroll", function() {

                revealAnimation( x );
            
        });
        
    }); 
    
});

function revealAnimation( x ) {

        var bottom_of_object = x.this.position().top + x.this.outerHeight(),
            bottom_of_window = x.win.scrollTop() + x.win.height();
        
        if ( bottom_of_window > bottom_of_object ){

            x.this.addClass('animated ' + x.animation );

        }

}