JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<section>
  <p>
    Section
  </p>
</section>

<div id="trigger-event" style="width: 100%; height: 0px; float: left; "></div>

<div id="block"></div>

CSS

body {
  height: 3000px;
}

section {
  height: 500px;
  width: 100%;
  float: left;
}

#block {
  width: 50px;
  height: 50px;
  float: left;
  background: red;
}

JavaScript

var controller = new ScrollMagic.Controller();
var timeline = new TimelineLite();
var div = $('div#block');

timeline.to(div, 0.5, {
   opacity: 0,
   onComplete: toggleOverlay(0)
}, "part-1")

.to(div, 0.5, {
   opacity: 1,
   onComplete: toggleOverlay(1)
}, "part-2")

.to(div, 0.5, {
   opacity: 0,
   onComplete: toggleOverlay(2)
}, "part-3");

var scene = new ScrollMagic.Scene({
   triggerElement: "#trigger-event",
   duration: 500
})
.setTween(timeline)
.addTo(controller);

function toggleOverlay(i){
   console.log(i);
}

scene.addIndicators();