JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://s3.amazonaws.com/existanze-www/libs/scrollmagic/1.0.7/jquery.scrollmagic.min.js"></script>
<div id="section1">	First Section </div>
<div id="section2">	Second Section </div>
<div id="section3">	Third Section </div>

CSS

html, body {
    overflow-x: hidden;
}
body {
	width: 100%; 
}

#section1{
	background-color:#f29817;
    width: 100%;
    height: 100px;
}

#section2{
	background-color: #fff817;
    width: 100%;
    height: 300px;
    z-index: 0;
}

#section3{
	background-color:#ff9887;
    width: 100%;
    height: 300px;
    position: relative;
}

JavaScript

$(document).ready(function() {
     
     div_height = $("#section2").height();
     $("#section3").css("margin-top", "-"+div_height+"px");
     
     var controller = new ScrollMagic({
		globalSceneOptions: {
			triggerHook: "onLeave"
		}
	});
     
     var topToBottom = new TimelineMax()
     .add(TweenMax.to("#section3", 1, {marginTop: "0",autoRound:false}));
	
	var scene = new ScrollScene({
		triggerElement: "#section1",
		tweenChanges: true
	})
	.addTo(controller)
	.setTween(topToBottom);
 });