JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<a id="top"></a>
<div class="spacer s0"></div>
<div id="parallax1" class="parallaxParent">
	<div style="background-image: url(http://janpaepke.github.io/ScrollMagic/img/example_parallax_bg1.png);">
		<div id="box">A</div>
	</div>
</div>
<div class="spacer s1">
	<div class="box2 blue">
		<p>Content 1</p><a href="#" class="viewsource">view source</a>
	</div>
</div>
<div class="spacer s0"></div>
<a id="middle"></a>
<div id="parallax2" class="parallaxParent">
	<div style="background-image: url(http://janpaepke.github.io/ScrollMagic/img/example_parallax_bg2.png);"></div>
</div>
<div class="spacer s1">
	<div class="box2 blue">
		<p>Content 2</p><a href="#" class="viewsource">view source</a>
	</div>
</div>
<div class="spacer s0"></div>
<a id="bottom"></a>
<div id="parallax3" class="parallaxParent">
	<div style="background-image: url(http://janpaepke.github.io/ScrollMagic/img/example_parallax_bg3.png);"></div>
</div>
<div class="spacer s2"></div>

CSS

.parallaxParent {
	height: 100vh;
	overflow: hidden;
}
.parallaxParent > * {
	height: 200%;
	position: relative;
	top: -100%;
}
#box {
	border: 1px solid red;
	position: absolute;
	color: #ff00ff;
	font-size: 70px;
	height: 100px;
	width: 100px;
	left: 50%;
	margin-left: 0;
	z-index: 10;
}
#box_param {
	position: absolute;
	border: 1px solid blue;
	height: 500px;
	width: 100px;
	top: 200px;
	left: 50%;
}
/*
General styles
*/
body {
	font-family: "Source Sans Pro", Arial, sans-serif;
	background-color: #c7e1ff;
	font-size: 13px;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body, html {
	height: 100%;
}
h1, h2, h3, h4 {
	font-family: "Josefin Slab", serif;
}
h1 {
	font-style: italic;
	font-weight: bold;
	font-size: 40px;
}
h2 {
	font-size: 20px;
}
a, a:visited {
	text-decoration: none;
	color: #2e639e;
}
a:hover {
	text-decoration: underline;
}
.touchonly {
	display: none;
}
html.touch .touchonly {
	display: block;
}
.noselect * {
	user-select: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
}
.doselect * {
	/*user-select: auto;*/
	-webkit-user-select: auto;
	-khtml-user-select: auto;
	/*-moz-user-select: auto;*/
	-o-user-select: auto;
}
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.clearfix {
	display: inline-block;
}
html[xmlns] .clearfix {
	display: block;
}
* html .clearfix {
	height: 1%;
}
/*
Containers
*/
#content-wrapper, #example-wrapper {
	height: 100%;
}
.scrollContainer {
	overflow-y: scroll;
	overflow-x: hidden;
	width: 100%
}
.scrollContainer {
	height: 100%;
	margin: auto;
}
#example-wrapper .scrollContent {
	height: 100%;
}
.horizontal.scrollContainer {
	overflow-y: hidden;
	overflow-x: scroll;
}
#example-wrapper.scrollContainer .scrollContent {
	width: 100%;
	height: auto;
}
#example-wrapper.scrollContainer.horizontal .scrollContent {
	width: auto;
	height: 100%;
}
#example-wrapper.horizontal {
	white-space:...

JavaScript

var controller=new ScrollMagic.Controller({globalSceneOptions:{triggerHook:'onEnter',duration:'200%'}});
var ease=Linear.easeNone;
TweenMax.set('#box',{alpha:2,y:650});
new ScrollMagic.Scene({triggerElement:'#parallax1'}).setTween('#box',{alpha:0,yPercent:-200,ease:ease}).addIndicators().addTo(controller);
new ScrollMagic.Scene({triggerElement:'#parallax1'}).setTween('#parallax1 > div',{yPercent:60,ease:ease}).addIndicators().addTo(controller);
new ScrollMagic.Scene({triggerElement:'#parallax2'}).setTween('#parallax2 > div',{yPercent:80,ease:ease}).addIndicators().addTo(controller);
new ScrollMagic.Scene({triggerElement:'#parallax3'}).setTween('#parallax3 > div',{yPercent:80,ease:ease}).addIndicators().addTo(controller);