JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<?php $title='Account'; ?>

<?php ob_start(); ?>

<h2 class="title"><a href="index.php?action=about_personality">Personality</a> / <a href="index.php?action=about_interests">Interests</a></h2>
<section>
  <section class="section_test">
    <div class="grid_test">
      <h1 class="h1_test">StrengthsQuest!</h1>
      <p>scroll down</p>
    </div>
  </section>
  <section class="section_test">
    <div class="project_div project_left">
      <div class="box_test">
        <img class="img_test" src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80" alt="korea">
        <div class="overlay_test"></div>
      </div>
      <div class="project_info">
        <p class="small_title">Identity // Website // Print</p>
        <h4 class="h4_test">This is the first project</h4>
        <a href="" class="project_link">See case study</a>
      </div>
    </div>
    <div class="project_div project_right">
      <div class="box_test">
        <img class="img_test" src="https://images.unsplash.com/photo-1553696801-25638feb93fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" alt="korea">
        <div class="overlay_test"></div>
      </div>
      <div class="project_info">
        <p class="small_title">Identity // Website // Print</p>
        <h4 class="h4_test">This is the first project</h4>
        <a href="" class="project_link">See case study</a>
      </div>
    </div>
    <div class="project_div project_left">
      <div class="box_test">
        <img class="img_test" src="https://images.unsplash.com/photo-1553714191-c89281730c67?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="korea">
        <div class="overlay_test"></div>
      </div>
      <div class="project_info">
        <p class="small_title">Identity // Website // Print</p>
        <h4...

CSS

.h1_test {
  font-weight: 600;
  font-size: 48px;
  color: red;
  margin: 0;
  line-height: 1.3;
  letter-spacing: 0.0001em;
}

.h4_test {
  font-weight: 600;
  font-size: 28px;
  color: #666;
  margin: 0;
  line-height: 1.3;
  letter-spacing: 0.0001em;
}

p.top_titles {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.small_title {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.project_link {
  text-decoration: none;
  border-bottom: 2px solid #b00f24;
  padding: 5px 0;
  font-size: 1.5rem;
}

.section_test {
  height: 90vh;
  width: 100vw;
}

.grid_test {
  display: grid;
  height: 100%;
  align-content: center;
  justify-content: center;
  text-align: center;
}

.project_div {
  display: grid;
  position: relative;
  grid-template-columns: repeat(12, 1fr);
}

.project_left .box_test {
  position: relative;
  overflow: hidden;
  height: 90vh;
  grid-row: 1/span 3;
  width: 100%;
}

.project_left .project_info {
  position: absolute;
  height: 200px;
  width: 400px;
  top: 20%;
  background: lightgoldenrodyellow;
  padding: 20px;
}

.project_left .box_test {
  grid-column: 2/span 7;
}

.project_left .project_info {
  left: 5%;
}

.project_right .box_test {
  position: relative;
  overflow: hidden;
  height: 90vh;
  grid-row: 1/span 3;
  width: 100%;
}

.project_right .project_info {
  position: absolute;
  height: 200px;
  width: 400px;
  top: 20%;
  background: lightgoldenrodyellow;
  padding: 20px;
}

.project_right .box_test {
  grid-column: 5/span 7;
}

.project_right .project_info {
  right: 5%;
}

.img_test {
  width: 100%;
}

.overlay_test {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  background: white;
  width: 100%;
  height: 100%;
}

footer {
  display: flex;
  margin-top: 10px;
  padding-top: 7px;
  justify-content: space-between;
  height: 80px;
  background-color: orange;
}

#footer_left {
  display: flex;
  flex-direction: row;
 ...

JavaScript

var controller = new ScrollMagic.Controller();

var project_left = document.querySelectorAll('.project_left');

project_left.forEach((element) => {
  var pic_overlay = element.children[0].children[1],
    project_info = element.children[1],
    small_title = element.children[1].children[0],
    h4_test = element.children[1].children[1],
    project_link = element.children[1].children[2];

  var animate_in = new TimelineMax();

  animate_in
    .fromTo(pic_overlay, 2, {
      skewX: 10,
      scale: 1.5
    }, {
      skewX: 0,
      xPercent: 100,
      transformOrigin: "0% 100%",
      ease: Power2.easeOut
    })
    .from(project_info, 1, {
      scaleY: 0,
      transformOrigin: 'bottom left'
    }, '-=1.5')
    .from(small_title, 0.3, {
      autoAlpha: 0,
      y: 30,
      ease: Power4.easeOut
    }, '-=0.8')
    .from(project_link, 0.2, {
      autoAlpha: 0,
      y: 30,
      ease: Power4.easeOut
    }, '-=0.8')
    .from(h4_test, 0.2, {
      autoAlpha: 0,
      y: 30,
      ease: Power4.easeOut
    }, '-=0.8');

  // Make a ScrollMagic scene
  var scene = new ScrollMagic.Scene({
      triggerElement: element
    })
    .addIndicators()
    .setTween(animate_in).addTo(controller);
});

var project_right = document.querySelectorAll('.project_right');

project_right.forEach((element) => {
  var pic_overlay = element.children[0].children[1],
    project_info = element.children[1],
    small_title = element.children[1].children[0],
    h4_test = element.children[1].children[1],
    project_link = element.children[1].children[2];

  var animate_in = new TimelineMax();

  animate_in
    .fromTo(pic_overlay, 2, {
      skewX: 10,
      scale: 1.5
    }, {
      skewX: 0,
      xPercent: 100,
      transformOrigin: "0% 100%",
      ease: Power2.easeOut
    })
    .from(project_info, 1, {
      scaleY: 0,
      transformOrigin: 'bottom left'
    }, '-=1.5')
    .from(small_title, 0.3, {
      autoAlpha: 0,
      y: 30,
      ease: Power4.easeOut
    }, '-=0.8')
 ...