JSFiddle - React, Tailwind, and code Playground

by davidcl64

HTML

<div id="container">http://jsfiddle.net/davidcl64/JpMhp/#run
  
 <div class="row"><div class="leftcol">Left Col</div><div class="rightcol">rightcol</div></div>
  <div class="row"><div class="leftcol">Left Col</div><div class="rightcol">rightcol</div></div>
 <div class="row"><div class="leftcol">Left Col</div><div class="rightcol">rightcol</div></div>
 <div class="row"><div class="leftcol">Left Col</div><div class="rightcol">rightcol</div></div>
 <div class="row"><div class="leftcol">Left Col</div><div class="rightcol">rightcol</div></div>
 <div class="row"><div class="leftcol">Left Col</div><div class="rightcol">rightcol</div></div>
 <div class="row"><div class="leftcol">Left Col</div><div class="rightcol">rightcol</div></div> 
 <div class="row"><div class="leftcol">Left Col</div><div class="rightcol">rightcol</div></div>
  <div class="row"><div class="leftcol">Left Col</div><div class="rightcol">rightcol</div></div>
 <div class="row"><div class="leftcol">Left Col</div><div class="rightcol">rightcol</div></div>
 <div class="row"><div class="leftcol">Left Col</div><div class="rightcol">rightcol</div></div>
 <div class="row"><div class="leftcol">Left Col</div><div class="rightcol">rightcol</div></div>
 <div class="row"><div class="leftcol">Left Col</div><div class="rightcol">rightcol</div></div>
 <div class="row"><div class="leftcol">Left Col</div><div class="rightcol">rightcol</div></div>      
  <div class="row"><div class="leftcol">Left Col</div><div class="rightcol">rightcol</div></div>
  <div class="row"><div class="leftcol">Left Col</div><div class="rightcol">rightcol</div></div>
 <div class="row"><div class="leftcol">Left Col</div><div class="rightcol">rightcol</div></div>
 <div class="row"><div class="leftcol">Left Col</div><div class="rightcol">rightcol</div></div>
 <div class="row"><div class="leftcol">Left Col</div><div class="rightcol">rightcol</div></div>
 <div class="row"><div class="leftcol">Left Col</div><div class="rightcol">rightcol</div></div>
...

CSS

/*
==============================================
CSS3 ANIMATION CHEAT SHEET
==============================================

Made by Justin Aguilar

www.justinaguilar.com/animations/

Questions, comments, concerns, love letters:
[email protected]
==============================================
*/

/*
==============================================
slideDown
==============================================
*/


.slideDown{
	animation-name: slideDown;
	-webkit-animation-name: slideDown;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	

	visibility: visible !important;						
}

@keyframes slideDown {
	0% {
		transform: translateY(-100%);
	}
	50%{
		transform: translateY(8%);
	}
	65%{
		transform: translateY(-4%);
	}
	80%{
		transform: translateY(4%);
	}
	95%{
		transform: translateY(-2%);
	}			
	100% {
		transform: translateY(0%);
	}		
}

@-webkit-keyframes slideDown {
	0% {
		-webkit-transform: translateY(-100%);
	}
	50%{
		-webkit-transform: translateY(8%);
	}
	65%{
		-webkit-transform: translateY(-4%);
	}
	80%{
		-webkit-transform: translateY(4%);
	}
	95%{
		-webkit-transform: translateY(-2%);
	}			
	100% {
		-webkit-transform: translateY(0%);
	}	
}

/*
==============================================
slideUp
==============================================
*/


.slideUp{
	animation-name: slideUp;
	-webkit-animation-name: slideUp;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;

	visibility: visible !important;			
}

@keyframes slideUp {
	0% {
		transform: translateY(100%);
	}
	50%{
		transform: translateY(-8%);
	}
	65%{
		transform: translateY(4%);
	}
	80%{
		transform: translateY(-4%);
	}
	95%{
		transform: translateY(2%);
	}			
	100% {
		transform: translateY(0%);
	}	
}

@-webkit-keyframes slideUp {
	0% {
		-webkit-transform: translateY(100%);
	}
	50%{
		-webkit-transform:...

JavaScript

/* Every time the window is scrolled ... */
    var previousScroll = 0;

    $(window).scroll(function () {
        var currentScroll = $(this).scrollTop();
        var down = true;
        if (currentScroll < previousScroll) down = false;
        
        /* Check the location of each desired element */
        $('.hideme').each(function (i, ele) {
            var top_of_object    = $(ele).position().top;
            var bottom_of_object = top_of_object + $(ele).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();

            /* If the object is completely visible in the window, fade it it */
            if (down && bottom_of_window > bottom_of_object) {
                $(ele).addClass("expandUp").removeClass("jsShrunk");
            } else if(!down && bottom_of_window < bottom_of_object + 50 /*&& check for window bottom here*/) {
                if(bottom_of_window < top_of_object + 100) {
                    $(ele).removeClass("shrinkDown").addClass('jsShrunk');
                } else if(!$(ele).hasClass("jsShrunk")) {
                    $(ele).removeClass("expandUp").addClass("shrinkDown");
                }
            }
        });

        /* Check the location of each desired element */
        $('.leftcol').each(function (i) {
            var bottom_of_object = $(this).position().top + $(this).outerHeight() - 100;
            var bottom_of_window = $(window).scrollTop() + $(window).height();

            /* If the object is completely visible in the window, fade it it */
            if (down && bottom_of_window > bottom_of_object) {
                $(this).addClass("slideRight");
            } else if(!down && bottom_of_window < bottom_of_object + 50 /*&& check for window bottom here*/) {
                $(this).removeClass("slideRight");
            }
        });

        /* Check the location of each desired element */
        $('.rightcol').each(function (i) {
            var bottom_of_object =...