<div class="head"></div>
<div class="bodyblue">
  <div class="hello">
    <h1>This is the animated Text</h1>
  </div>
</div>




<script  src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>

.head{
  height:100vh;
  width:100%;
  background-color:red;
}
.bodyblue{
  height:100vh;
  width:100%;
  background-color:blue;
}
.hello{
  display: flex;
  justify-content: center;
  align-items: center;
  color:#fff;
}

// init controller
var controller = new ScrollMagic.Controller();

var  hello = gsap.timeline({ paused:  true });

hello.from(".hello", { duration:  1, y: 100, opacity:  0 });

new  ScrollMagic.Scene({
    triggerElement:  ".hello",
    triggerHook:  0.5
}).setTween(hello)
  .addIndicators()
  .addTo(controller);