JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.1/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.1/plugins/animation.gsap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/debug.addIndicators.min.js"></script>
<div data-am-hero>
  <div class="content">This is hero</div>
</div>

<div data-am-presentation>
  <div class="background-image fixed-back"></div>
  <div class="grid">
    <div class="grid-col left">
      <div class="grid-item parallax">
        <div class="container">
          <h2>This is headline</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel dolor leo. Ut sed velit vitae libero interdum blandit id a risus. Nunc nisi ex, ultrices eu tempus in, dapibus et diam. Praesent dapibus finibus odio. Duis faucibus urna eget
          pretium dictum. Aliquam sagittis neque in tellus bibendum, eu pulvinar ante sagittis.</div>
      </div>
      <div class="grid-item" data-parallax="bouble">
        <div class="container quote start" id="first">
          <h2>"</h2>
          <p>Vestibulum vitae congue nibh. Aliquam erat volutpat. Proin pretium mauris a quam molestie porttitor. Nulla vel molestie enim. Aenean suscipit cursus volutpat.</p>
        </div>
      </div>
      <div class="grid-item">
        <div class="container">
          <h2>This is headline</h2> Vestibulum vitae congue nibh. Aliquam erat volutpat. Proin pretium mauris a quam molestie porttitor. Nulla vel molestie enim. Aenean suscipit cursus volutpat. Mauris enim orci, dictum sit amet augue et, faucibus hendrerit turpis. Ut nec accumsan
          neque, ac elementum nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur id sapien nec mauris rhoncus venenatis. Nam viverra dictum interdum. Mauris nec nunc ac ex efficitur dignissim et ut libero.</div>
     ...

SCSS

body {
  padding: 30px;
  font-size: 1rem;
  line-height: 1.6;
}

[data-am-hero] {
  background-image: url(https://images.unsplash.com/photo-1444842741774-771cf4455a78?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=8a3ab90d4d20b1628fa8d6007b100469);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 630px;
  width: 100%;
  margin-bottom: 60px;
  position: relative;
  .content {
    position: absolute;
    top: 100px;
    left: 100px;
    font-size: 4rem;
    text-transform: uppercase;
    color: #fff;
    font-family: impact;
  }
}

[data-am-presentation] {
  background-color: #ededed;
  padding: 0 0 30px 30px;
  position: relative;
  min-height: 5000px;
  .fixed-back {
    background-attachment: fixed;
  }
  .background-image {
    background-image: url(https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1b0aa3802706c803f1c2f261d761f584);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    right: 0;
    height: 800px;
    width: 90%;
  }
  .grid {
    position: relative;
    z-index: 10;
    width: 100%;
    &:after {
      content: '';
      clear: both;
      display: table;
    }
    .grid-col {
      position: relative;
      float: left;
      width: 50%;
      &.left {
        margin-top: 20px;
      }
      &.right {
        margin-top: 300px;
      }
    }
    .grid-item {
      background-color: #ffffff;
      position: relative;
      .container {
        padding: 30px;
        transition: all .5s cubic-bezier(.39, -0.7, .62, 1.81);
      }
      .quote {
        background-color: deepskyblue;
        &.start {
          border-radius: 50%;
          opacity: 0;
          transform: scale(0);
        }
        &.bouble {
          border-radius: 0;
          opacity: 1;
          transform: scale(1);
        }
      }
      .slide-from-left {
        background-color: red;
     ...

JavaScript

var controller = new ScrollMagic.Controller();

$.each($('[data-parallax]'), function(i, item) {
  var parallaxClass = $(this).data('parallax');
	var element = $(this).find('.container');
  if (parallaxClass === 'bouble') {
    new ScrollMagic.Scene({
        triggerElement: this,
        triggerHook: 0.7
      })
      .addIndicators()
      .setClassToggle("#first", parallaxClass)
      .addTo(controller);
  }

  if (parallaxClass === 'from-left') {

  }
});