setTween 在 ScrollMagic 中不起作用

Question

我刚开始尝试弄清楚 GSAP 和 ScrollMagic 如何协同工作，当我在这个很酷的指南站点中跟踪源代码时：http://scrollmagic.io/examples/basic/simple_velocity.html，它在我的 codepen 中不起作用。

这是我的，打算在黑线到达 window 顶部后扩大 '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>

Answer 1

在我看来，您缺少 animation.gsap.js dependency 以便 ScrollMagic 与 TweenMax 一起工作。

Here是你的分叉笔。通过单击菜单中的 Settings（或单击每个编辑面板下方的任何 gear 图标）查看 Pen Settings，然后查看所有外部 JS JavaScript 选项卡下的文件。

setTween 在 ScrollMagic 中不起作用

setTween does't work in ScrollMagic

jquery

gsap

scrollmagic