How to implement section wipe from ScrollMagic into horizontal website?

So far I built a horizontal scrolling page in html and css in reference to this article (https://redstapler.co/pure-css-horizontal-scrolling-website-tutorial/). Now I want to include wiping between two sections on the first slide using Scroll Magic (https://scrollmagic.io/). Unfotunatly I’m not being able to connect both code snippts together. Can somebody help me with this? I basically want the section .panel.first to be slided onto .slide.one while scrolling to then go forward to the next slide.

$(function () { // wait for document ready
    // init
    var controller = new ScrollMagic.Controller({vertical: false});

    // define movement of panels
    var wipeAnimation = new TimelineMax()
        .fromTo("section.panel.first", 1, {y: "-100%"}, {y: "0%", ease: Linear.easeNone}); // in from top

    // create scene to pin and link animation
    new ScrollMagic.Scene({
            triggerElement: ".slide.one",
            triggerHook: "onLeave",
            duration: "100%"
        })
        .setPin(".slide.one")
        .setTween(wipeAnimation)
        .addIndicators() // add indicators (requires plugin)
        .addTo(controller);
});

body {
  margin: 0;
  padding: 0;
}

/* horizontales scrollen */
.slide {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.wrapper {
  display: flex;
  flex-direction: row;
  width: 400vw;
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
}

.outer-wrapper {
  width: 100vh;
  height: 100vw;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  overflow-y: scroll;
  overflow-x: hidden;
  position: absolute;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

::-webkit-scrollbar {
  display:none;
}

/* Seite 1 - Startseite */
.one {
  background-color: #FFB111;
  width: 100vw;
}

.panel {
    height: 100%;
    width: 100%;
    position: absolute;
}

.panel.first {
    background-color: black;
}
/* Seite 2 */
.two {
  background-color: #FD5145;
  width: 100vw;
}

/* Seite 3 */
.three {
  background-color: #87B6A7;
  width: 100vw;
}

/* Seite 4 */
.four {
  background-color: #305252;
  width: 100vw;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<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>
  </head>
  <body>
    <div class="outer-wrapper">
      <div class="wrapper">
        <div class="slide one">
          <section class="panel first">

          </section>
        </div>
        <div class="slide two"></div>
        <div class="slide three"></div>
        <div class="slide four"></div>
      </div>
    </div>
  </body>
</html>