Используйте Scroll Magic, чтобы прокручивать div над закрепленным или фиксированным div

Question

Я пытаюсь использовать Scroll Magic, чтобы div делала прокрутку на закрепленном элементе div, но элемент div (#text-content), который должен прокручиваться на закрепленном элементе div (#wallpaper), застрял внизу. Какое решение для этого?

Я знаю, что есть другие методы, но я ищу один в Scroll Magic, потому что я пытаюсь понять это.

Fiddle: https://jsfiddle.net/ufkxrwea/10/ (Кажется, есть проблема с закреплением div (#wallpaper) в скрипте, но код работает в моем локальном проекте. Если кто-нибудь заметит, почему это не работает в скрипке, я исправлю)

$(function() {

    // init controller
    var controller = new ScrollMagic.Controller();

    // for text blocks
    var text = new TimelineMax()
    .add(TweenMax.to("#slide1", 1,{
     transform: "translateY(0)"
    }))
    
    // create a scene
    new ScrollMagic.Scene({
       duration: 2000, 
       offset: 0  
    })
    .setTween(text)
    .setPin("#wallpaper") 
    .addTo(controller); 
});

#wallpaper{
  background-color: red;
  height: 300px;
}

.slide{
  height: 300px;
}

.text-block{
  background-color: pink;
  margin-left: 50px;
  margin-right: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js. "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>



<div id="wallpaper" class="wallpaper"></div>

<div id="text-content">

  <div id="slide1" class="slide">
    <div class="col-md-8 col-lg-6 text-block">
      <p>First block of text here</p>
    </div>
  </div>
  
  <div id="slide1" class="slide">
    <div class="col-md-8 col-lg-6 text-block">
      <p>Second block of text goes here</p>
    </div>
  </div>
  
  <div id="slide1" class="slide">
    <div class="col-md-8 col-lg-6 text-block">
      <p>And third block of text here</p>
    </div>
  </div>

</div>