Question

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

这是我的意图扩大＆＃39; scene2＆＃39;在黑线到达窗口顶部之后：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 是您的分叉笔。通过单击菜单中的Pen Settings（或通过单击每个编辑面板下的任何Settings图标）查看gear，然后查看所有外部JS JavaScript标签下的文件。

setTween在ScrollMagic中不起作用

1 个答案: