1

我已将 TimeLineMax 添加到我正在处理的场景中。该功能运行良好，但我在一些细节上遇到了麻烦。

我希望我的场景像这个网站一样固定http://www.google.com/inbox/#bundles。通过这种方式，我希望在一个场景中有多个引脚，这样用户就无法在不查看动画的情况下滚动浏览我的动画。

这是我迄今为止工作的演示站点：https ://so-staging.herokuapp.com/users/sign_in#publisher-demo-container

如果您向下滚动，您可以看到我的进度。三个步骤将弹出，然后动画消失。我还根据滚动调整了#publisher-demo-steps 的背景位置。

然而，这不是理想的目标。我想要这个： 1. Pin #publisher-demo 2. 在滚动时触发第 1 步动画背景位置。3. 启动第 2 步 4. 启动第 3 步

我希望每个步骤都被固定，以便用户在动画完成之前无法进入下一步。

我知道这很令人困惑，而且我一直盯着它看太久了。谢谢您的帮助。这是我的滚动魔术和 GSAP 代码。

var controller = new ScrollMagic();

    var tween = new TimelineMax()
      .add(TweenMax.to("#publisher-demo-steps", 0.5, {backgroundPosition : "50% 23%"}))
      .add(TweenMax.to(".blue-circle", 1, {display: "block"}))
      .add(TweenMax.to(".blue-circle", 1, {className: "+=animated zoomOut", display: "none", delay:3}))
      .add(TweenMax.to("#publisher-demo-steps", 0.5, {backgroundPosition : "22% 52%"}))
      .add(TweenMax.to(".red-circle", 1, {display: "block"}))
      .add(TweenMax.to(".red-circle", 1, {className: "+=animated zoomOut", display: "none", delay:3}))
      .add(TweenMax.to("#publisher-demo-steps", 0.5, {backgroundPosition : "76% 50%"}))
      .add(TweenMax.to(".green-circle", 1, {display: "block"}))
      .add(TweenMax.to(".green-circle", 1, {className: "+=animated zoomOut", display: "none", delay:3}));

    var scene = new ScrollScene({triggerElement: "#publisher-demo", duration: 4000, triggerHook: -100})
              .setPin("#publisher-demo")
              .setTween(tween)
              .addTo(controller);
4

1 回答 1

1

如果我对您的理解正确，您想触发动画以不受滚动进度的限制。

这样做的方法是不链接执行 pin 的场景。一旦场景具有持续时间，它将动画进度链接到滚动进度。

然后，您只需为每个动画触发点添加一个场景。

即像这样：

new ScrollScene({triggerElement: "#trigger-element", duration: 4000, triggerHook: 0})
          .setPin("#publisher-demo")
          .addTo(controller);

new ScrollScene({triggerElement: "#trigger-element", triggerHook: 0})
          .setTween(new TimelineMax()
               .to("#publisher-demo-steps", 0.5, {backgroundPosition : "50% 23%"})
               .to(".blue-circle", 1, {display: "block"})
          )
          .addTo(controller);

new ScrollScene({triggerElement: "#trigger-element", triggerHook: 0, offset: 300)
          .setTween(TweenMax.to(".blue-circle", 1, {className: "+=animated zoomOut", display: "none", delay:3}))
          .addTo(controller);

一般注意事项：

  • 如您所见，我使用了与固定元素不同的触发元素。它应该绝对定位并且与固定元素位于相同的位置。我这样做的原因是，因为固定元素会移动，并且会为其他场景提供错误的起始位置。
  • -100的 AtriggerHook没有任何意义。根据定义，该值只能介于 0 和 1 之间。
  • 而不是 TimelineMax().add(TweenMax.to()) 您可以使用简写 TimelineMax().to() （请参阅http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/to/）
  • 请注意，ScrollMagic 2 已经发布了一段时间。语法非常相似，因此您应该考虑升级。
于 2015-04-28T09:17:56.003 回答