JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="http://jquery-swip.googlecode.com/svn-history/r4/trunk/jquery.easing.1.3.js"></script>

</head>
<body>




 <button id="go">&raquo; Button1</button>
 
 
<div style="display:block; width:100%; height:1000px; background:#F00; z-index:-100; top:0; margin-bottom:15px"></div>

<div class="more">
<div id="block1">block1</div>

<div id="block2">block2</div>

<div id="block3">block3</div>

<div id="block4">block4</div>

<div id="block5">block5</div>
</div>

<button id="go2">&raquo; Button2</button>
<div class="more2">

<div id="block6">block6</div>

<div id="block7">block7</div>

<div id="block8">block8</div>

<div id="block9">block9</div>

<div id="block10">block10</div>
</div>
 

</body>
</html>

CSS

body {
	padding:0; margin:0;
}
button#go {
	position: fixed;
	margin-top:10px;
	float:left;
	z-index:100;
}
button#go2 {
	position: fixed;
	top:60px;
	float:left;
	z-index:100;
}
div.more {
display:none;
width:955px;
height:427px;
overflow:hidden;
margin: 0 auto;
}
div.more2 {
display:none;
width:955px;
height:427px;
overflow:hidden;
margin: 0 auto;
margin-top:15px;
}
div#block1, div#block2, div#block3, div#block4, div#block5 {
font-size:3em;
text-align:center;
opacity:0;
margin-left:10px;
margin-right:10px;
background:#333;
display:block;
}
div#block1 {
	width:284px;
	height:427px;
	margin-top:200px;
	line-height:427px;
	float:left;
	margin-right:6px;
}
div#block2 {
	width:314px;
	height:207px;
	line-height:207px;
	float:left;
	margin-top:-109px;
}
div#block3 {
	width:314px;
	height:207px;
	line-height:207px;
	float:left;
	margin-top: 309px;
}
div#block3:after {
	clear:both;
}


div#block4, div#block5 {
	float:right;
	width:314px;
	height:207px;
	line-height:207px;
	font-size:3em;
	margin:0px;
	text-align:center;
	opacity:0;
}
div#block4 {
	margin-top:-409px;
}
div#block5 {
	margin-top:409px;
	margin-left:0;
}
div#block5:after {
	clear:both;
}



div#block6, div#block7, div#block8, div#block9, div#block10 {
font-size:3em;
text-align:center;
opacity:0;
margin-left:10px;
margin-right:10px;
background:#333;
display:block;
}
div#block6 {
	width:284px;
	height:427px;
	margin-top:-427px;
	line-height:427px;
	float:right;
	margin-right:0;
}
div#block7 {
	width:314px;
	height:207px;
	line-height:207px;
	float:left;
	margin-top:-109px;
}
div#block8 {
	width:314px;
	height:207px;
	line-height:207px;
	float:left;
	margin-top: 309px;
}
div#block8:after {
	clear:both;
}


div#block9, div#block10 {
	float:right;
	width:314px;
	height:207px;
	line-height:207px;
	font-size:3em;
	margin:0px;
	text-align:center;
	opacity:0;
}
div#block9 {
	margin-top:-409px;
	margin-right:6px;
}
div#block10 {
	margin-top:409px;
	margin-right:6px;
}
div#block10:after {
	clear:both;
}

JavaScript

$(window).scroll(function() {
    console.log($(this).scrollTop()+$(window).height());
    if ($(this).scrollTop()+$(window).height() >= 1000 && $(this).scrollTop()+$(window).height()< 1442) { // instead of the click button#go tried bellow code
      $(".more").css("display", "block");
      $("#block1").removeAttr('style');
      $("#block2").removeAttr('style');
      $("#block3").removeAttr('style');
      $("#block4").removeAttr('style');
      $("#block5").removeAttr('style');
      $("#block1").css('display', 'block').animate({
          opacity: 1,
          marginTop: 0,
          top: 0,
          }, 1300, 'easeOutExpo');

      $("#block2").css('display', 'block').animate({
          opacity: 1,
          marginTop: 0,
          top: 0,
          }, 2000, 'easeOutExpo');;

      $("#block3").css('display', 'block').animate({
          opacity: 1,
          marginTop: "13px",
          }, 2000, 'easeOutExpo');

      $("#block4").css('display', 'block').animate({
          opacity: 1,
          marginTop: "-208px",
          marginRight: 0
          }, 2000, 'easeOutExpo');

      $("#block5").css('display', 'block').animate({
          opacity: 1,
          marginTop: "13px",
          marginRight: 0
          }, 2000, 'easeOutExpo');

    }

    else if ($(this).scrollTop()+$(window).height() >= 1442) { // instead of the click button#go2 tried bellow code
      $(".more2").css("display", "block");
      $("#block6").removeAttr('style');
      $("#block7").removeAttr('style');
      $("#block8").removeAttr('style');
      $("#block9").removeAttr('style');
      $("#block10").removeAttr('style');
      $("#block6").css('display', 'block').animate({
          opacity: 1,
          marginTop: 0,
          top: 0,
          }, 1300, 'easeOutExpo');

      $("#block7").css('display', 'block').animate({
          opacity: 1,
          marginTop: 0,
          top: 0,
          }, 2000, 'easeOutExpo');

      $("#block8").css('display', 'block').animate({
     ...