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

Question

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

Вот мое с намерением масштабироваться до «СЦЕНЫ2» после того, как черная линия достигает верхней части окна: 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> 

Answer 1

Кажется мне, что вам не хватает animation.gsap.jsdependency для ScrollMagic для работы с TweenMax.

Here - ваше разветвленное ружье. Взгляните на Pen Settings, нажав на Settings в меню (или нажав любую иконку gear, представленную под каждой панелью редактирования), а затем посмотрите на все внешние файлы JS под вкладкой JavaScript.