setTween не работает в ScrollMagic

Я только начал пытаться понять, как GSAP и ScrollMagic работают вместе, и пока я следил за исходным кодом на этом замечательном сайте с руководствами: http://scrollmagic.io/examples/basic/simple_velocity.html , это не работает в моей кодовой ручке.

Вот мой с намерением увеличить «scene2» после того, как черная линия достигнет верхней части окна: http://codepen.io/anon/pen/xZxZXm

Вот как выглядит мой js:

var controller = new ScrollMagic.Controller
var scene1 = new ScrollMagic.Scene({
  triggerElement:'#pinned-trigger1',
  duration:$(window).height()-50,
  triggerHook:0,
  reverse:true
}).setPin('#pinned-element1');

//I cannot scale it up here.
    var scene2 = new ScrollMagic.Scene({triggerElement: "#scale-trigger",triggerHook:0, duration: 300})
                .setTween("#fstpin", {borderTop: "30px solid white", backgroundColor: "blue", scale: 4})


controller.addScene([
  scene1,
  scene2
]);

и html следующим образом:

<main class="full-screen" role="main">
  <section class="full-screen blue ">
    <div id='scale-trigger'></div>
     <div id='fstpin'>
      <div id='scaled-element'>
        <h1>Basic Pin</h1>
        <p>Elements are pinned for their respective pixel value set as the duration and released again.</p>
      </div>
    </div>
  </section>

  <section id="pinned-trigger1" class="full-screen orange">
    <div id="pinned-element1">
     <p>This element will be pinned </p>
    </div> 
  </section>

  <section id="pinned-trigger2" class="full-screen red">
    <div id="pinned-element2">
      <p>This element should disapeared</p>
    </div>
  </section>

  <section class="full-screen blue">
    <div>
      <p>Section Four!</p>
    </div>
  </section>
</main>