¿Cómo implementar el borrado de secciones de ScrollMagic en un sitio web horizontal?

Hasta ahora, construí una página de desplazamiento horizontal en html y css en referencia a este artículo ( https://redstapler.co/pure-css-horizontal-scrolling-website-tutorial/ ). Ahora quiero incluir la limpieza entre dos secciones en la primera diapositiva usando Scroll Magic ( https://scrollmagic.io/ ). Desafortunadamente, no puedo conectar ambos fragmentos de código. puede alguien ayudarme con esto? Básicamente, quiero que la sección .panel.first se deslice hacia .slide.one mientras se desplaza para luego avanzar a la siguiente diapositiva.

$(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>
Answer