JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://janpaepke.github.io/ScrollMagic/js/jquery.scrollmagic.js"></script>
<script src="http://janpaepke.github.io/ScrollMagic/js/_dependent/greensock/TweenMax.min.js"></script>
<script src="http://janpaepke.github.io/ScrollMagic/js/jquery.scrollmagic.debug.js"></script>
<div id="thediv"><span>Awesome</span></div>
<div id="imaspacer" style="height:1000px;"></div>

CSS

#thediv {
    color:white;
    background-color:black;
    position:relative;
    top:300px;
    height:150px;
    width:100%;
    font-size: 130px;
}

JavaScript

var controller;
        $(document).ready(function($) {
            controller = new ScrollMagic();
                var tween = TweenMax.to("#thediv", 1, {height:100,fontSize:"100px"});

var scene = new ScrollScene({triggerElement: "#thediv", duration: 200})
						.setTween(tween)
                        .addTo(controller);
	scene.addIndicators({zindex:100});
        });