JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.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>
 <div class="box">Title</div>

        <main>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut ullamcorper velit. Quisque luctus molestie nibh id ultricies. Nam convallis, sapien ac aliquet finibus, risus nibh aliquam augue, in scelerisque felis ante quis ante. Aliquam pharetra in tortor quis ultrices. Cras ut lacus semper, scelerisque tortor eu, imperdiet leo. Fusce id ante felis. Duis vel faucibus metus, sit amet lacinia quam. Aenean scelerisque enim eu venenatis pharetra.

            Morbi tempus elit id lorem viverra, et iaculis magna egestas. Nulla sed interdum magna. Nullam laoreet lacinia nibh, ac pretium odio molestie nec. Nullam facilisis semper lacus, non pulvinar nisl fringilla ac. Phasellus enim odio, posuere sit amet risus vel, venenatis gravida dui. Proin mollis nec velit id malesuada. Quisque lacinia, enim sit amet semper facilisis, purus nibh ullamcorper ipsum, id tristique justo tortor id nisi. Nullam mattis tincidunt mauris non porta. Ut vel finibus orci. Nunc eu mattis nisi, eget condimentum lacus. Aenean turpis orci, mollis quis metus ut, mattis sollicitudin quam. Fusce urna enim, ornare nec ullamcorper eu, hendrerit at neque. Aenean gravida convallis mauris, eget faucibus massa. Cras consequat ipsum velit, et feugiat est posuere nec. Praesent porta felis vel dui pellentesque, lacinia dignissim odio varius.

            Curabitur non molestie enim. Donec sollicitudin, odio a tempor facilisis, magna quam auctor nisi, vel varius lectus sapien sit amet augue. Vestibulum in ante nec arcu hendrerit...

CSS

body, html{
  margin:0;padding:0
}

.box {
  position:fixed;
  width: 100vw;
  height: 100vh;
  font-size:30vw;
  line-height:80vw;
  z-index:999;
  background:white;
  text-align:center;
  border-bottom:2px solid;opacity:.5
}
main {
  border-top:2px solid red;
  margin-top:100vh;
  width: 100vw;
  height: 100vh;
  font-size:10vw;
  display: inline-block;
  height:auto;
  line-height:1em;
  text-align:center;
  background:#ccc;
}

JavaScript

var controller = new ScrollMagic.Controller();
            
var scene = new ScrollMagic.Scene({
		duration: '100%',
		triggerHook: 0, 
})
.setTween(".box", {
		fontSize: '45pt',
		lineHeight: '68pt',
		height: 120
})
.addIndicators()
.addTo(controller);