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（）;

sourceSheet.Activate

Answer 1

如果我理解正确，你想触发动画从滚动进度中解除绑定。

执行此操作的方法是不链接执行引脚的场景。一旦场景有持续时间，它就会将动画进度链接到滚动进度。

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

即。像这样：

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之间。
而不是TimelineMax（）。add（TweenMax.to（））你可以使用简写的TimelineMax（）。to（）（见http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/to/）
请注意，ScrollMagic 2现已发布一段时间了。语法非常相似，因此您应该考虑升级。

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

1 个答案: