问题标签 [scrolltrigger]

我的网站上有部分正在使用ScrollTrigger. 一旦我实现Locomotive JS了，我所有的ScrollTrigger动画都停止了工作。

我通读了论坛，发现您需要update() ScrollTrigger何时Locomotive滚动。我实施了这一点，但没有看到任何结果。

然后，我调整了窗口的大小和我的ScrollTrigger动画，它们开始工作。

简而言之，动画会在调整大小时触发，但不会在页面加载时触发。

我已经实施update()并尝试过refresh()，但没有运气。

演示（这里也显示问题）：

测试 1

我意识到的是，如果我注释掉我的所有内容locomotive js并运行：

将logs显示，但它们不会在locomotive活动时显示。

不确定这是否表明出了什么问题？

测试 2

在我的代码片段的最后，我运行了以下命令来检查是否refresh()正在运行并且它正在返回else语句。再次，不知道为什么。

重建步骤：

1. 打开这个小提琴
2. 将输出框扩大到某个宽度（即1300px）
3. 运行小提琴
4. 向下滚动，您会看到未加载的元素
5. 将输出框调整为更小的尺寸
6. scrollTrigger动画现在出现

这是一个展示问题的 gif：

如果一个element有类，.stagger那么我正在尝试执行一个动画来一张一张地显示卡片。

在我当前的演示中，cards所有这些都一起淡入淡出。即使我指定了delay?

我怎样才能让卡片一张一张出现？

我有一个ScrollTrigger我只想运行一次的动画。

根据文档，“如果为真，则 ScrollTrigger 将在到达结束位置后立即 kill() 自身。 ”

但是，就我而言，当我添加时once: true，我在控制台中收到消息"Invalid property", "once", "set to", true, "Missing plugin? gsap.registerPlugin()"，当我已经注册插件时？

我有一个块，它变成pinned并水平滚动。

在这个块中，我有vector一个宽度为3573px.

当用户水平滚动时，我vector也希望在演示中的图像旁边滚动。

已尝试移动我的vectorunder .horizontalScroller__scroll，以便它与图像一起滚动，但这不起作用。

见演示：

我有一个问题，GSAP 和 ScrollTrigger 不断出现。

我有多个固定部分，当用户滚动到一个部分时，图像从侧面滑入。

当我让这些图像从同一侧滑入时，一切都很好，但是一旦我从右侧滑入一个部分，这些部分就开始重叠，就好像它在前一个引脚完成之前执行一样。

奇怪的是，如果顶部从右侧滑入，那么下一部分就可以了，但是页面再往下会导致问题。

我在这里有一个 Codepen： https ://codepen.io/rob-wahlberg-beaney/pen/BamNxaN?editors=1010

这是向左滑动的代码：

这是使它们向右滑动的代码：

如您所见，它们完全相同，只是运动方向不同，因此没有意义。

导致问题的部分具有类“.product-container--slide-left”，当您滚动到第二部分时会显示问题。

我一直在尝试ScrollTrigger以实现多步动画。

简而言之，这是我的预期行为/我想要实现的目标：  

1. 用户向下滚动页面并.horizontalScroller__intro固定并向下移动到.horizontalScroller我当前定义为的我的中心end: "+=30%"）。
2. 一旦它到达末尾，随着用户继续向下滚动，我现在想.horizontalScroller__intro慢慢淡出。
3. 一旦.horizontalScroller__intro完全淡出，我现在想淡入css中的.horizontalScroller__items一个。opacity0
4. 一旦.horizontalScroller__items 完全淡入，我希望用户能够水平滚动。
5. 然后当用户向上滚动时相反  

当前结果：

1. .horizontalScroller__intro立即开始淡出（并且完全被该end位置所取代）。我正在寻找 .horizontalScroller__intro在它到达其结束位置后开始淡出。 

2. 我scrollTrigger为水平滚动（只包含一个图像）单独定义了一个。当此触发器与.horizontalScroller__intro触发器一起使用时，.horizontalScroller__intro跳跃。无法.horizontalScroller__items淡入（不确定它是否不喜欢它，因为它是在 css 中定义的？）

  我尝试了什么？

• 用这个demo实现淡出
• 用这个demo实现了基本的pin
• 尝试了下面的代码片段来让介绍也淡出  

感谢我在这篇文章中提出了几个问题。任何帮助，将不胜感激 ：）

演示：

注意：如果你注释掉第二个scrollTrigger，你会看到介绍的 pin 有点工作。

我有一个svg构成我的horizontal滚动条的基础。

在此范围内svg，我已将类添加.animate到要在项目出现时淡入淡出的元素中。.animate 类供参考已添加到 .animate 中的所有文本项中svg。

目前，只有.animate最初在视图中的元素才会淡出。当我向下滚动以继续滚动时，其他元素是静态的。他们没有translating以任何方式淡入或上升或下降？

TL; DR，这就是我想要实现的目标：

• 当滚动条固定到位，并且用户继续向下滚动时，开始逐渐消失.horizontalScroller__intro。
• 一旦.horizontalScroller__intro消失，开始水平滚动.horizontalScroller__items
• 我的滚动条中任何具有类的元素.animate都将淡入到其原始位置。

注意：我了解在此处发布代码的 SO 规则和偏好。但是，我的演示包含一个长度 SVG，我无法在此处发布，因为它超出了 SO 的字符限制。

这是我最新方法的演示

从scrollTrigger 文档中，containerAnimation有助于在水平滚动条上实现动画，也是我试图实现的。

但是，在我上面的演示中，我遇到了以下问题：

1. .horizontalScroller__intro最初不显示，何时应该，并且应该在滚动时淡出。
2. 水平滚动条不再起作用
3. 视图中的.animate元素不会淡出

如果我使用timeline（见下面的片段），那么介绍会淡出并且滚动条可以工作。但是，不在子元素中设置动画，这是我需要的containerAnimation

我正在努力寻找一种方法来让介绍淡入、滚动条水平滚动以及.animate元素淡入或淡入。

编辑：

@onkar ruikar，请参阅下面基于您的沙箱的注释：

1. 当您向下滚动并进入视图时，我希望初始.animate元素向上滚动到视图中（当前，一旦文本消失，然后水平滚动条开始工作，只有这样.animate应该在视图中的元素才会消失在上
2. .animate加载初始元素后.animate，作为滚动条一部分的下一个元素不会淡入。它们是静态的。当每个.animate元素进入视野时，它应该淡入淡出（我认为它当前触发一次，对于所有元素）。

在此处查看视觉效果：

在上面的 gif 中，你可以看到前两个文本块是隐藏的，一旦它们出现，我希望它们淡出。然后第三和第四个文本块是静态的，当用户滚动到该部分时它们应该淡出。

我实际上只是在我的元素在视口中但我无法使其工作时才尝试应用我的滚动触发器视差效果......有人已经经历过类似的事情吗？有人可以帮我唤醒它吗？

这是演示：Codepen

提前致谢。

勇气

我在 Nextjs 中使用 GSAP，这是我的页面。在开发模式（npm run dev）下一切正常，但是当我静态构建项目（npm run build）时，元素不会出现；所以这发生在 scrollTrigger 插件上。因此，一切正常，但元素不会出现在构建中。提前谢谢谁能帮我一把。

我只是想知道我是否可以在垂直滚动捕捉之间的某个地方获得水平平滑滚动捕捉？

到目前为止，这是我正在使用的 - https://codepen.io/tarunpatnayak/pen/rNYvvQb

我试图在垂直滚动之间包含这样的东西 - https://codepen.io/tarunpatnayak/pen/OJOQXwp

有人可以帮我实现这一目标吗？