在 Scrollmagic 中添加多个图钉和动画背景位置有问题吗？

Question

我已将 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 步

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

我知道这很令人困惑，而且我已经盯着它看了太久了。谢谢您的帮助。这是我的 scrollmagic 和 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);

Answer 1

如果我对您的理解正确，您希望触发动画不受滚动进度限制地播放。

执行此操作的方法是不 link 制作 pin 的场景。只要场景有持续时间，它就会 link 动画进度滚动进度。

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

即像这样：

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 的 triggerHook 没有任何意义。根据定义，该值只能介于 0 和 1 之间。
您可以使用 shorthand TimelineMax().to() 而不是 TimelineMax().add(TweenMax.to())（参见 http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/to/）
请注意，ScrollMagic 2 已经发布了一段时间。语法非常相似，所以你应该考虑升级。

在 Scrollmagic 中添加多个图钉和动画背景位置有问题吗？

Trouble with adding multiple pins and animating background position in Scrollmagic?

gsap

scrollmagic