javascript - ScrollMagic ピンが TimelineMax で機能しない

Question

ScrollMagic は初めてですが、気に入っています。

そのため、飛行機のパーツをまとめて飛行機を形成するタイムラインがあります。飛行機のトゥイーン部分を飛行機全体の単一の画像に変更し、単一の画像をピン留めするつもりです。

飛行機の部品を組み立てることができましたが、どのように進めればよいかわかりません。

これを達成する方法の手がかりはありますか？

これは私が今まで達成したことのフィドルです

HTML -

<section class="intro-container"></section>
<section class="airplane-container">
    <div id="plane-left-wing"></div>
    <div id="plane-right-wing"></div>
    <div id="plane-propeller-left"></div>
    <div id="plane-propeller-right"></div>
    <div id="plane-body"></div>
    <div id="plane-tail"></div>
</section>
<!--/airplane-container-->

JS -

var controller = new ScrollMagic.Controller();
    var airplane_tween = new TimelineMax()
                .to("#plane-left-wing", 1, {left:"50%" , top:"-150px"  },0)
                .to("#plane-right-wing", 1, {right:"50%" , top:"-150px"},0)
                .to("#plane-body", 1, {top:"-250px"},0)
                .to("#plane-tail", 1, {top:"-404px" },0.5)
                .to("#plane-propeller-left", 1, {left:"50%" , top:"-230px" },0.5)
                .to("#plane-propeller-right", 1, {right:"50%" , top:"-230px"},0.5);
var scene1 = new ScrollMagic.Scene({triggerElement: ".airplane-container" , duration: 300})
                .setTween(airplane_tween)
                // .setPin("#airplane-pin")
                .addIndicators({name: "airplane"}); // add indicators (requires plugin)
// Add Scenes to ScrollMagic Controller
controller.addScene([
  scene1
]);

CSS -

* {
    margin: 0;
    padding: 0;
}

html, body {
  margin: 0;
  height: 100%;
  background: #ededed;
}

a {
  color: #fff;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a.active {
  color: #ededed;
}


.intro-container {
  width: 100%;
  height: 700px;
  float: left;
  background: #ffd134;
}
.airplane-container {
  width: 100%;
  /*height: 900px;*/
  overflow: hidden;
  float: left;
  background: #678ecf;
  background: rgba(103, 142, 207, 0.9) url(../images/top-view.jpg) no-repeat;
}
#plane-left-wing {
  margin: 300px auto auto -252.5px;
  position: relative;
  float: left;
  width: 231px;
  height: 92px;
  background: url(../images/plane-left-wing.png) no-repeat;
}

#plane-right-wing {
  margin-top: 300px;
  margin-right: -252.5px;
  position: relative;
  float: right;
  width: 231px;
  height: 92px;
  background: url(../images/plane-right-wing.png) no-repeat;
}


#plane-propeller-left  {
  margin: 300px auto auto -130px;
  position: relative;
  float: left;
  width: 92px;
  height: 149px;
  background: url(../images/plane-propeller-left.png) no-repeat;
}

#plane-propeller-right {
  margin: 300px -130px auto auto;
  position: relative;
  float: right;
  width: 92px;
  height: 149px;
  background: url(../images/plane-propeller-right.png) no-repeat;
}

#plane-body {
  margin: 300px auto 0 auto;
  position: relative;
  z-index: 500;
  width: 54px;
  height: 333px;
  background: url(../images/plane-body.png) no-repeat;
}

#plane-tail {
  margin: 100px auto 0 auto;
  position: relative;
  width: 184px;
  height: 52px;
  background: url(../images/plane-tail.png) no-repeat;
}

これは同じフィドルです - http://jsfiddle.net/joystan/x2f0atdj/