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:absolute;
    /* top:200px; */
    height:150px;
    width:100%;
    font-size: 9em;
}

JavaScript

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

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