0

我刚开始尝试弄清楚 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>
4

1 回答 1

1

在我看来，您缺少animation.gsap.js 依赖项才能ScrollMagic使用TweenMax.

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

于 2015-12-04T04:12:39.137 回答