JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://johnpolacek.github.io/superscrollorama/js/jquery.superscrollorama.js"></script>
<script src="http://johnpolacek.github.io/superscrollorama/js/greensock/TweenMax.min.js"></script>
<script src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<ul class="menus">
            	<li><a href="#firstPage">Go to Blue</a></li>
                <li><a href="#secondPage">Go to Yellow</a></li>
                <li><a href="#thirdPage">Go to Red</a></li>
                <li><a href="#fourthPage">Go to Green</a></li>
            </ul>
<section id="firstPage"><h1>Blue</h1></section>
<section id="secondPage"><h1>Yellow</h1></section>
<section id="thirdPage"><h1>Red</h1></section>
<section id="fourthPage"><h1>Green</h1></section>

CSS

body { margin:0; padding:0; }
ul.menus { position:fixed; top:0; left:0; width:100%; background-color:#000; padding:5px 0; z-index:100; }
ul.menus li { float:left; list-style:none; margin-left:10px; }
ul.menus li a { color:#fff; }

section { width:100%; }

#firstPage { background-color:blue; }
#secondPage { background-color:yellow; }
#thirdPage { background-color:red; }
#fourthPage { background-color:green; }

h1 { font-family:Arial; font-size:6em; font-weight:bold; line-height:3em; font-style:italic; text-align:center; color:#f1f1f1; margin:0; position:relative; }

JavaScript

$(document).ready(function(){
    var winht = $(window).height();
    $('section').each(function(index, element) {
		$(this).height(winht);
	});
});

$(function(){
	$('.menus a').click(function(e){
		e.preventDefault();
        $.scrollTo(this.hash, 2000, {
			easing:'easeInOutExpo',
			offset:3000,
			axis:'y',
			//queue:true
		});
    });
});

$(window).load(function(){
    (new TimelineLite({onComplete:initScrollAnimations}))
				.append(TweenMax.from( $('#firstPage h1'), 0.5, {css:{opacity: 0, top:'-1000px'}, ease:Expo.easeOut}))

    function initScrollAnimations() {
			
		var controller = $.superscrollorama({
			triggerAtCenter: false,
			playoutAnimations: true
		});
        
        //Second Slide
		controller.pin( $('#secondPage'), 3000, {
			  anim: (new TimelineLite())
			  	.append(TweenMax.from( $('#secondPage h1'), 2,{css:{bottom:'-100px', opacity: 0},ease:Expo.easeOut}))
        });
        //Third Slide
		controller.pin( $('#thirdPage'), 3000, {
			  anim: (new TimelineLite())
			  	.append(TweenMax.from( $('#thirdPage h1'), 2,{css:{bottom:'-100px', opacity: 0},ease:Expo.easeOut}))
        });
    }
});