问题标签 [scrolltrigger]

我正在尝试一个简单的 ScrollTrigger 动画，当我滚动时，我的文本会在 x 轴上移动。然而，它根本不动。

HTML：

CSS：

JS：

这是我第一次使用 GSAP，但这应该很简单。我也在使用 locomotive.js 但我不知道这是否会影响它。

GSAP 有这个ScrollTrigger插件，它会在滚动时触发动画，我想使用它。

我已经有了一个工作 SVG 动画（没有 GSAP）：

如前所述，这个 SVG 动画没有与 GSAP 挂钩（如果它应该与 ScrollTrigger 插件一起使用，我认为这是必须的？）

这就是我尝试使用 GSAP 创建此动画的原因：

如您所知，我基本上只是尝试<animate>用一些 GSAP 代码替换这三个元素。

此时，点会立即显示出来，而不是以从左上角到右下角的线性方式显示。

另外，不知什么原因，整个矩形都是渐变的（其实我不介意这种效果，但我不明白为什么会这样？）。

1. 我是否必须在 GSAP 中为这个 SVG 设置动画才能使用 ScrollTrigger？
2. 如何使用 GSAP 获得原始动画结果？
3. 为什么在 GSAP 代码中会出现这种颜色渐变？

我根据这个 codepen 中的示例制作了一个带有滚动触发器的动画。

问题是，当我加载页面而不是滚动超过预期的触发点时播放动画。

有谁知道为什么会这样？我将触发方法称为 in mounted，我认为这就是问题所在。但这就是 codepen 示例的方式，并且动画没有在页面加载时触发。在方法中调用方法应该只确定页面上有触发器。

我还从方法this.animation()内部删除了调用，scrollTransition因为我认为这可能会调用和触发动画。但是删除括号会使滚动触发标记（我猜是触发器本身）完全从屏幕上消失。

这是代码：

我正在尝试重现这种效果https://oasiscannabis.co但我真的被卡住了。

我正在使用 GSAP 和 scrolltrigger 使其工作，但问题是在我的代码中，缩放并不平滑，但它直接从缩放 1 到缩放 2。我希望它像参考网站一样顺利扩展。

我正在使用 elementor 作为视觉作曲家来开发 WordPress。这是我的代码：

这是我正在处理的网页http://www.beyconsulting.it/Factanza/test-nuovo/

我正在试验 gsap 的 ScrollTrigger。我有一个自定义滚动容器，想使用 ScrollTiggers 滚动代理来劫持滚动。结果非常不稳定。难道我做错了什么？这是我到目前为止的一个例子。代码沙盒

正如您从代码和框演示中看到的那样，滚动非常平滑，但标记在各处弹跳，绿色方块应该平滑放大，但是当您滚动时它会弹跳而不是平滑缩放。其他库中的演示可以实现非常平滑的效果，例如ScrollTigger Locomotive Scroll。这是文档页面，您可以在其中找到更多示例ScrollTrigger ScrollProxy()我无法弄清楚为什么我的如此笨拙。

我正在用 GSAP 开发动画。所以我想做的是当团队成员卡进入视口时为其设置动画。

当该部分仅发生一次时很容易，但该卡片组件在页面团队中发生了 10 次。使用我当前的代码，当第一个被击中时，它们都会触发动画。

在定义动画时，有没有办法只针对当前触发元素的子元素？在 Jquery 中使用某种 This like。

我的项目有一个问题，我有一个带有完整图像的页面与库机车滚动一起显示，但是要滚动页面，我需要先调整他的大小。我该如何解决这个问题以避免之前调整我的窗口大小滚动页面我使用的是4.1.0版本的机车滚动，目前是最后一个。

您可以在此链接中看到问题： 网站演示

我的代码如下：

}

我正在使用 GSAP 和 ScrollTrigger 做一些滚动动画。我面临的问题是动画在页面加载时开始，而不是在我向下滚动到元素时开始。这是代码：

我正在尝试使用 GSAP ScrollTrigger 动画创建时间线部分。我有五个带有五个不同图像的文本块（5 个时间线元素）。默认情况下，只有一个文本块可见，但在滚动隐藏文本块（第二个文本块）后会以 100% 的不透明度淡出，并且前一个文本块（第一个文本块）的不透明度会降低。当第三个文本块激活时（通过滚动可见），第一个文本块将从屏幕上消失，第二个文本块的不透明度降低。

注意：默认情况下，只有一个活动文本块。但滚动后会有 2 个文本块，其中一个会以 100% 的不透明度处于活动状态，而另一个会以 50% 的不透明度变得模糊。

对于默认状态，它工作正常，但是当我滚动前一个文本块时，它并没有从屏幕上消失。如果你们可以看看我在 codepen 上做了什么（https://codepen.io/shuvosd/pen/RwKZEEe）并帮助我解决问题，那么我将非常感激。提前致谢。

我对 vue-router 和 gsap 的滚动触发器插件有一些问题。我有一些使用 scrolltrigger 的 vue 组件，当我转到另一个页面并返回具有滚动触发器效果的页面时，它不会触发，但如果我手动刷新页面，它就可以工作。

我发现这个主题与 NuxtJs 有相同问题的人，但 ScrollTrigger.disable() 和 ScrollTrigger.kill() 解决方案对我不起作用： https ://greensock.com/forums/topic/24886-in-nuxt- when-using-scrolltriggerkill-how-can-it-run-again-when-page-is-viewed/

这是我用 ScrollTrigger 制作的一个组件：

模板部分

脚本部分