问题标签 [scrollmagic]

我有一个视差/动画页面，我在其中固定一个元素在其容器的持续时间内。我还使用以下功能覆盖自然鼠标滚动行为：

这似乎导致我的固定元素不稳定和滞后，我怀疑原因是 scrollMagic 在不自然的滚动完成之前再次更新了我的固定元素的位置（没有我的 smoothscroll，pinend 元素滚动平滑）。

我已经用谷歌搜索并阅读了 scrollmagic 文档，但仍然不知道如何使其顺利进行。有任何想法吗？

编辑：

这是显示问题的两个小提琴：

没有波涛汹涌的平面，但没有平滑的滚动 -> http://codepen.io/anon/pen/azexRm

断断续续的平面 + 平滑滚动 -> http://codepen.io/anon/pen/wBVZYQ

我已将 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();

我正在尝试使用 ScrollMagic 的这个特定动画

http://janpaepke.github.io/ScrollMagic/examples/advanced/parallax_sections.html

但是要正确加载文件非常困难。我正在尝试包含 ScrollMagic、GSAP 和 GreenSock，但不知何故 ScrollMagic 要求我之前加载 GASP，而 GSAP 说缺少主模块并要求我先加载 ScrollMagic。我正在使用 jQuery 进行异步操作，如下所示

当 gsap 第一次出现时，它会记录我以下错误：

错误：找不到 ScrollMagic 主模块。请确保它在此插件之前加载或使用异步加载器，如 requirejs 错误：找不到 TweenLite 或 TweenMax。请确保在 ScrollMagic 之前加载 GSAP 或使用像 requirejs 这样的异步加载器。

这个是在喘息之前加载scrollmagic时的

错误：找不到 TweenLite 或 TweenMax。请确保在 ScrollMagic 之前加载 GSAP 或使用像 requirejs 这样的异步加载器。

以前有人遇到过同样的问题吗？你有一个工作的例子来展示吗？如何解决此加载问题并使示例正常工作？

首先，很棒的图书馆！真的很享受使用 ScrollMagic。极好的！

其次，我希望这个问题的主题足够清楚......

我想要达到的目标：

我有一个场景 - 在视口的全宽和全高 - 上面设置了一个引脚、持续时间和补间时间轴。补间工作正常，没有问题。

我还有一个 HTML5 视频放在背景中。这在进入场景时被注入到场景容器中（自动播放关闭）。我想要做的是，在我所有的补间完成之后，背景中的视频（场景的全尺寸）要播放并且场景仍然固定直到它完成。

问题是，当补间完成时，当视频播放时，场景有效地结束了，因此引脚被移除，我的下一个场景被滚动到。

在我的视频播放完毕之前，将场景固定在那里的最佳方法是什么？有什么我想在这里实现的例子吗？

我试图采取的方向之一是在视频播放时添加另一个延迟这么多秒的空补间。它提供了一些固定，但如果用户在播放过程中继续滚动并且快速，他们将滚动到视频尚未完成的下一个场景......

如果有人有任何初步的想法，那就太好了。我一直在来回尝试想办法，但找不到优雅的解决方案。

在此先感谢，克雷格

我正在尝试从这里的第一个示例中实现代码：

http://janpaepke.github.io/ScrollMagic/examples/advanced/parallax_scrolling.html

以下补间工作（但立即补间）......

当我添加以下代码时...

我收到以下错误：

Uncaught TypeError: (intermediate value).setTween is not a function

我要疯了，想弄清楚这一点。我究竟做错了什么？

嘿所有我试图把我的头包裹在这一切上，整天都在玩它。我想要完成的是当用户向下滚动时放大背景图像（并最终通过不透明度变得透明）。我已经得到了一半的预期效果，但它似乎不想在用户滚动上工作，它只是自动执行。

这一定很简单，但我对此很陌生。

这是我写的代码

http://codepen.io/anon/pen/EjWLyO

我一直在玩 Scrollmagic 并设法让一些事情发挥作用。我现在要做的是在视口底部为我的博客创建一个粘性社交分享栏。我没有任何问题设法让它显示在我的代码中

这是 HTML

我知道我可以使用另一个针对“测试部分”的 Tweenmax 动画淡出共享栏，但我认为使用我最初的 javascript 可能有更好的方法。是否有另一种方法，或者我需要为共享栏创建一个单独的补间以在内容（div.entry）完成后隐藏。

Codepen http://codepen.io/anon/pen/aOWBQZ

我正在尝试使用 GSAP 和 scrollMagic 创建一个简单的 timelineMax，但出现以下错误。一切对我来说都是正确的，所以我不理解这个错误。

下面是第 12 行.to("#parallax1 > div", {y: "80%", ease: Linear.easeNone});。

这是代码：

（我知道该补间中没有持续时间参数，但是如果您查看http://janpaepke.github.io/ScrollMagic/examples/advanced/parallax_sections.html您可以看到他们的 setTween 上没有持续时间参数，它只是美好的）。

我正在试验视差和滚动魔法。在scrollmagic 演示的视差示例中，我尝试在第一个视差部分中为内容设置动画。

这是我的实验的小提琴。

我无法按letter A我#box的意愿移动。我尝试添加一个边界框并将其用作 triggerElement，但这不起作用。

在向下滚动时，它应该向下移动 150 像素并淡出。现在它正在使用"#parallax1"它triggerElement，并且一旦到达该部分的底部就会淡出。我希望它在该部分的底部之前淡出。我如何让它做到这一点？

我究竟做错了什么？

试图让 Meteor template.rendered 为 ScrollMagic 工作，这是我希望让它工作的代码。

Pkg 依赖 hipstersmoothie:scrollmagic 0.0.9

这是基于scotch.io制作的教程。和代码codepen的第一部分

试图在流星中重现魔法。如果有人可以查看这些代码，我将不胜感激。

谢谢你。

-------------------------------------------------- -----------------------------------------

通过引用Using greensocks with meteor找到了另一个解决方案

哪个有效！我仍然在思考如何正确使用 blaze... 同时，我将尝试完成本教程的代码。