问题标签 [scrolltrigger]

我正在使用 GSAP 产品滚动触发器。我正在做的是，一旦用户滚动，我必须在一个滚动中从下到上滚动下一部分。这将一直发生，直到第六部分出现在视口中。

一旦第六部分来了，我就必须水平滚动他的行。一旦完成所有行，然后从下到上重新开始铰孔部分。

我在这里分享下面的 codepen 链接。我的垂直问题得到了解决，但我在水平行上遇到了问题。我的意思是水平滚动不能与一个滚动一起使用，我有 5 行，但我正在四行。

您也可以在此处查看代码段

我GSAP 3.0 ScrollTrigger在我的一个网站中使用过一切正常，但我希望在离开部分或 div 时反转我的动画。我知道有一个回调电话onLeave，但我不知道如何使用它。我是滚动触发器的新手。我正在粘贴代码示例以供您理解。

盔甲动画配置

装甲部分动画

试图根据窗口宽度修改 gsap scrollTrigger offset_value 。(window).resize(function()不幸的是，当用户“即时”更改窗口大小时，无法弄清楚如何实现这一点。此函数对offset_value变量没有影响。

这是现在的代码，显然我的方法存在根本性错误：

我在使用 GSAP 的 ScrollTrigger 时遇到问题。

我将固定元素的高度设置为不同的视口宽度，并且在调整窗口大小时效果很好。

但是现在我想通过单击按钮来更改固定元素的高度。我使用ScrollTrigger.refresh();但没有任何反应。

有人可以告诉我如何解决吗？

如何将 ScrollTrigger 与其不同的插件（例如 TextPlugin）结合使用？像补间一样

至

当#tweenthat映入眼帘时。

我有一个“项目”页面，我在其中展示项目片段，我希望每个项目都在滚动时淡入。我正在尝试使用以下 HTML 和 JavaScript 为每个项目实施时间表：

我希望图像从左侧淡入，文本从右侧淡入。目前，它不起作用 - 图像在中途消失然后停止，并且文本根本不滚动。

是否有可能实现我所追求的？如果是这样，我哪里错了？

代码笔： https ://codepen.io/jacobcollinsdev/pen/jOrpKja ?editors=1010

我在 Gatsby 中遇到了一个奇怪的问题，它仅在我想使用 gsap 和 scrolltrigger 插件为元素设置动画时才会发生。基本上，当我单击<Link>元素时，一切正常，但是在我添加基于 ScrollTrigger 的代码 gsap 动画之后（正常 gsap 工作正常），出现了问题，当我使用<Link>它时，它不再正常工作。它正在将我重定向到正确的路径，但我只看到一个空白页。我需要刷新才能看到该页面的实际内容。

基本上我想创建很酷的介绍动画。用户将看到 100vh 屏幕，其中包含文本和堆叠的两个框（红色和黑色），并且基于滚动位置，一个框将移至一侧，另一个移至中心，完成整个序列后，用户将被重定向到“/what”页面（我将为此使用 navigate() 。

有人知道可能导致此问题的原因是什么？我很乐意提供帮助，因为我被困在这个问题上......：/

当您滚动页面时，我正在尝试在文本上创建淡入视差效果。到目前为止，效果非常好——除非在每次第一次访问页面时（以及刷新时）都会出现轻微的打嗝。

如果您从 hero 部分向下滚动到 intro 部分，则该元素（其起始不透明度应为 0）清晰可见。一旦它通过滚动条起始点，它就会变为 0 - 导致内容闪烁和抖动。奇怪的是，现在如果您要向上和向下滚动页面 - 它会按预期工作。

演示：https ://codepen.io/adamgian/pen/RwGKKQN

示例 HTML 标记：

GSAP 设置：

我的智慧到此为止。我认为fromTo在动画之前/之后正确处理动画值（它似乎确实但不是马上）并且如果您使用ScrollTrigger / fromTo，immediateRender会自动为真。不知道我还缺少什么。

页面转换后，我无法让 ScrollTrigger 工作。

我正在使用 barbs.init 中的视图数据。

大多数其他代码触发正常。但是，我无法在页面转换后让 gsap 滚动触发器工作。（与 locomotive.js 有同样的问题）

有人可以告诉我可能做错了什么。

我是 Barba 和 ScrollTrigger 的新手，JS 经验有限，因此非常欢迎明确回答。

在我的 HTML 代码中，我<span>在 a 中有几个标签div，我想使用 GSAP 的插件 ScrollTrigger 为它们设置动画。<div>但是当我使用 span 元素而不是几个标签时，它似乎不起作用。这是代码：

HTML：

JS：