问题标签 [scrolltrigger]

我在 Nuxt 应用程序中使用 GSAP ScrollTrigger 和 LocomotiveScroll。到目前为止一切正常，除了改变路线。我想，我必须杀死并重新初始化 LocomotiveScroll和ScrollTrigger？

相关JS：

我设置了一个最小的代码框： https ://codesandbox.io/s/scrolltrigger-routechange-gv75r?file=/mixins/locomotive.js

将不胜感激任何提示！:)

更新的 JS：

我是 gsap 滚动触发器动画的新手。我正在创建一个动画，但我需要创建另一个动画，我指定一个新触发器并创建一个新的 gsap 时间线。它不是那样工作的。如何正确实现多个动画？

我正在使用 ScrollTrigger 来启动和停止音频。这似乎在 Chrome 上运行良好，但在 Firefox 或 Safari 或任何移动浏览器上根本无法运行。如果您单击播放或暂停按钮，音频当然会起作用。浏览器在处理音频方面有什么不同吗？为什么这在手机上不起作用？

我正在尝试从该网站重新制作滚动效果：https ://wemakefab.com/

它实际上在滚动上翻译，但它也在网站末尾创建了一些巨大的空白区域。例如，他们将 css 溢出：隐藏在身体上，但对我来说它完全阻止了滚动。

我正在用 SvelteKit 和 Gsap + scrollTrigger 构建一个简单的网站。结构是这样的：Startpage / About / Services / Contact

在整个站点中，我在 SVG、文本和其他元素上使用了许多简单的动画。一切似乎都很好，但是当我在页面之间来回移动时，我注意到网页真的变慢了，最终开始崩溃。刷新浏览器后一切都很好......（直到我再次开始在页面之间导航）。我发现我需要在页面转换时终止 GSAP ScrollTriggers 并再次重新初始化它们。

所以我杀死了scrollTriggers，但出现了一个新问题：当我开始导航（例如，从/about 到/contact）并返回到之前访问过的页面时 - onMount 不再被调用并且我的所有动画都没有开始...我在所有路由页面上都使用这样的 gsap：

当我导航到其中一个页面时，如果 onMount 和 onDestroy 触发，我检查了 console.log。结果如下：

我不是编程专家，SvelteKit 与 GSAP 相结合似乎是我项目的绝佳选择……但现在我被困住了：-/

我将不胜感激任何帮助

我目前正在进行一个使用Locomotive Scroll进行平滑滚动的项目。我想做的就是让我的主导航标题菜单在加载时固定，然后在向下滚动时隐藏并在向上滚动时显示。首先，我尝试创建这个无机车卷轴，它运行良好。但是当我添加机车滚动时，代码根本不起作用。它只是被视为另一个正常元素。不固定也不显露。如果有人可以帮助我，将不胜感激。谢谢..！

元素样式

没有机车卷轴的工作代码

不使用机车滚动的代码

实际上，我不知道在这段代码中应该在哪里插入 Scroller Proxy 和 Trigger。此外，此元素没有任何 data-scroll* 属性。（而且我认为这里不需要）。

我使用机车进行平滑滚动，使用 gsap 进行动画。现在我想创建一个指令来动画一些错字。

我的应用程序包含此代码来创建平滑滚动并将其与 gsap 结合（从https://codepen.io/GreenSock/pen/zYrELYe复制）

此代码工作正常

现在我想创建一些指令来轻松重用某些类型的动画。

该指令在加载时执行一次，但不会触发 onUpdate 或 onEnter 函数。

如果我调整窗口大小，onUpdate 函数会被触发，但不会在滚动时触发。

更新 addet 一个小演示 https://codesandbox.io/s/gsap-scrolltrigger-ihfbg?file=/directives/char-animation.js

我错过了什么？

我一直在努力使用机车滚动和 gsap scrollTrigger 和 Scrollproxy 在我的 Nuxtjs 项目上实现平滑滚动效果。但是在我的中途遇到了一些我无法回头的有线问题。我在我的 Nuxt 项目中使用 Typescript 和 Class Component。

这是我的代码仓库 和演示链接

问题是

1. 更改路线滚动效果被破坏并且页面高度变得如此之高。然后必须重新加载该特定页面才能正常工作。需要一个路线更改解决方案，我在此设置中没有任何线索。

这是代码

2. 机车具有视差和其他效果的实例，例如data-scroll和data-scroll-speed='1'。刷新页面时它可以正常工作，但是当我更改路线时它不起作用。你可以在我的demo-project-link上看到它。

3. 想要滚动页面上具有overflow-scroll固定的特定部分height。但是，当尝试滚动整个页面时，将会滚动，这是意料之外的。查看从导航转到**scrollable-div** 菜单。

这部分我想以不同的方式滚动，当我滚动这部分时需要停止整个页面滚动。

需要您的支持和解决方案，因为我遇到了这些有线问题。任何解决方案都将是合适的。

第一件事。我非常喜欢 GSAP 和他们的 Scrolltrigger。一切正常，但不幸的是，当用户调整浏览器窗口的大小时，我基于滚动在 x 轴上移动的对象不会更新。

x 值基于我编写的公式。

以下是稍后使用 matchMedia Scrolltrigger 在主时间轴中添加的部分功能：

非常感谢您！

滚动时，我的代码中有容器宽度的问题。例如，我没有在列表中看到我的 las 项目。我不明白为什么会出现这个问题。我使用 ScrollTrigger 和 GSAP 进行水平滚动。活动元素也是错误的，因为我无法滚动到列表末尾

``https://codepen.io/afonin_vlad/pen/BadoYqM```