Раздел прокрутки ScrollMagic на том же экране, что и другие компоненты страницы

Question

Я пытаюсь создать раздел / компонент на странице с эффектом прокрутки (по вертикали, снизу вверх) при прокрутке вниз. Но я не хочу, чтобы это была функция полной страницы - этот раздел / компонент должен существовать в том же окне просмотра, что и другие незатронутые разделы. Пока что у меня есть кое-что подготовленное, но проблема в том, что нижняя часть компонента с эффектом смахивания оставляет большое пустое пространство видимым. Как мне достичь компонента, расположенного непосредственно под компонентом «эффект-эд», чтобы он находился заподлицо с нижней частью компонента «эффект-эд», а не прокручивался?

codepen: https://codepen.io/cakePlease/pen/gOOvMMe

HTML:

        <div style="background-color:#000;">
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<div id="pinMaster">
  <div id="pinContainer">
    <section class="panel one">
      <h1>Pin Panel A</h1>
    </section>
    <section class="panel two">
      <h1>Pin Panel B</h1>
    </section>
    <section class="panel three">
      <h1>Pin Panel C</h1>
    </section>
    <section class="panel four">
      <h1>Pin Panel D</h1>
    </section>
    <section class="panel five">
      <h1>Pin Panel E</h1>
    </section>
    <section class="panel six">
      <h1>Pin Panel F</h1>
    </section>
  </div>

</div>
  <div class="other">
    Other page components here, could show up on the same viewport. <br />This section should sit flush at the bottom of the "slider" above it without affecting the scroll-animation effect.</div>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
</div>

        body {
  color: #fff;
}
h1 {
  font-size: 32px;
  color: white;
  position: relative;
  display: block;
  top: 40%;
  text-align: center;
  text-transform: uppercase;
}
#pinMaster {
  position: relative;
  background: #000;
}
#pinContainer {
  width: 80%;
  height: 350px;
  overflow: hidden;
  position: relative;
  margin: 0 10%;
}
.panel {
  height: 100%;
  width: 100%;

  position: absolute;

}



.one {
  background-color: #1bb1a5;
}
.two {
  background-color: #94c356;
}
.three {
  background-color: #e3aa59;
}
.four {
  background-color: #777;
}

.five {
  background-color: #a63ba0;
}
.six {
  background-color: #cf5b21;
}

        console.clear();
var controller = new ScrollMagic.Controller();
var sections = document.querySelectorAll("section");
var tl = new TimelineMax();
var bodyAnim = new TimelineMax();
var offset = window.innerHeight;

for (let i = 1; i < sections.length; i++) {
  tl.from(sections[i], 1, { y: "100%", ease: Linear.easeNone }, "+=1");
}

new ScrollMagic.Scene({
  triggerElement: "#pinMaster",
  triggerHook: "onLeave",
  duration: "500%"
})
  .setPin("#pinMaster")
  .setTween(tl)
  .addIndicators({
    colorTrigger: "white",
    colorStart: "white",
    colorEnd: "white",
    indent: 40
  })
  .addTo(controller);

$("section").each(function(i) {
  var tl = new TimelineMax();
  new ScrollMagic.Scene({
    triggerElement: "#pinMaster",
    triggerHook: 0,
    offset: i * offset
  })
    .setTween(tl)
    .addTo(controller)
    .addIndicators({
      colorTrigger: "white",
      colorStart: "white",
      colorEnd: "white",
      indent: 120
    });
});