JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="http://www.thebuddygroup.com/js/lib/scrollmagic/jquery.scrollmagic.js"></script>

<div class="container" style="height:1000px;">
    <div class="spacer" style="height:400px;">
        Scroll Down
    </div>
    <div id="trigger1"></div>
    <div id="animate1">Hello World!</div>    
</div>

CSS

#animate1{
    opacity:0; 
    position:relative; 
    top:300px; 
    background-color:#eee; 
    height:400px; 
    padding:25px; 
    font-family:Arial, Sans-serif;
    font-weight:bold;
}

JavaScript

$(document).ready(function(){
   // init controller
    var controller = new ScrollMagic();
    
    var tween = TweenMax.to("#animate1", 0.5, {opacity:1, top:0});

    // build scene
    var scene = new ScrollScene({triggerElement: "#trigger1"})
    .setTween(tween)
    .addTo(controller);
   
});