问题标签 [scrolltrigger]

我遇到了一个在其他情况下描述过的问题，但还没有找到解决方案。我的项目正在使用 Next.js 框架进行 react、Smooth Scrollbar 和 ScrollTrigger。我有一个 .to() ，里面有一个 scrollTrigger 对象，它在一个<Navigation />组件中。页面顶部的文本只是应该固定自己并随窗口滚动，但它只在某些情况下有效。我想我在这里没有完全理解一些生命周期的东西。所有这些重现我的错误的方法也在沙箱中的 index.js 文件的顶部进行了注释。

1. 开启Smooth Scrollbar，组件中存储的scrollTrigger对象<Navigation />，以及<Navigation />导入嵌套在主功能组件中的组件，刷新页面后效果不起作用。如果您进入<Navigation />组件中的 scrollTrigger 对象并更新其中一个值（将“结束”值更改为不同的数字），这将触发热重载而不刷新浏览器。如果您滚动回顶部并向下滚动，您将看到效果现在正在工作。
2. 如果您注释掉主 index.js 组件中的整个 useEffect() 挂钩，这将禁用平滑滚动条。如果您保存文件并刷新，您将看到效果按预期工作，无需触发热重载，但现在没有平滑滚动条。
3. 如果将沙箱重置为原始状态，取消注释主 index.js 组件返回中的 HTML，将其正上方的组件注释掉<Navigation />，保存然后刷新，您会看到效果在加载时起作用，带有平滑滚动条，没有不得不触发热重载，但现在我失去了嵌套组件的能力。

代码沙盒链接

直接链接到浏览器中的结果（更容易刷新）

任何帮助将不胜感激。在这一点上我没有想法。

CodePen我刚刚为我的演示创建了笔。我尝试了不同的状态，但没有奏效。我想像这样在中间部分添加和删除类：https ://codepen.io/Designer12/pen/qBryyrp

演示图片：

我正在尝试使用 ScrollTrigger 做一个简单的 onScroll 动画，但它让我发疯了 4 小时。

其中一个按预期工作并淡化内容，另一个只是在触发时将元素不透明度设置为 0。

然后，当我向后滚动时，它开始从 0 不透明度设置为 1 的动画，但是当我向下滚动时，它只是将不透明度直接设置为 0，不会褪色。

我疯了，有什么建议吗？

感谢任何人的阅读

我希望有一个页面可以正常滚动，直到到达一个部分，我有几张幻灯片，这里的滚动行为应该更改为 fullpage.js 之类的东西，直到幻灯片结束，然后恢复正常的滚动行为。

页面的html结构https://codepen.io/skb089/full/poPbdqe

这三个项目：.a-item和.b-item是.c-item我想要 fullpage.js 之类的功能的幻灯片，.normal-scroll是我希望页面正常滚动的部分

到目前为止，我已经尝试过：

启用了鼠标控制的 Swiper Js，但它在边缘功能上的发布非常有问题，并且无法正常工作。此处突出显示的问题，但提供的解决方案对我不起作用。

交叉点观察者检查对象何时完全在视口中并使用 jquery 鼠标滚轮禁用滚动，然后根据滚动方向和其他条件循环显示每张幻灯片，但每当我滚动太快时，交叉点观察者不会在右侧触发时间，并导致可怕的不一致体验。

我试过这个来规避它，但它没有改变任何东西

然后是 Gsap 的 ScrollTrigger，我可以使用它来固定该部分，但时间线无法按预期工作，我必须不断滚动以使其动画化，如果滚动太快，则会跳过该部分。按方向捕捉标签也不顺畅，而且经常滞后。

对此的一些解决方案将不胜感激。

大家好

抱歉我的问题，但是有没有解决方案可以将 GSAP 的 ScrollTrigger 设置为 Swipers Slides？在我的情况下，我需要 ScrollTrigger 在更改幻灯片时为 THREE.js szene 中的对象设置动画。这可能吗？如果它可以工作，我认为这将是与 THREE.js 交互的一个很好的解决方案。

我是编程新手，所以一些帮助会很棒。

谢谢

我目前有一个带有 GSAP 的滚动触发器设置，它固定在一个点上，然后垂直滚动一些幻灯片。一切都按预期工作。但是，在转到下一张幻灯片之前，我不确定如何在每张幻灯片中设置内部时间线。理想情况下，幻灯片 1 会按原样显示，然后幻灯片中的内容会循环播放其内容（淡出、淡入），然后再转到下一张幻灯片索引等等。

https://codepen.io/mDDDD/pen/dyWRqJW

我有一个使用 nuxt /vue 和 gsap / scrolltrigger 的水平轮播滑块。一切都按预期工作，但是当我尝试使用导航控制滑块时，它非常笨拙。它不会滑到正确的面板，不确定我在哪里犯了错误，但如果有人有任何想法，我将不胜感激！

https://codepen.io/mDDDD/pen/QWvqVzV

我正在尝试进行水平滚动，而我的项目在移动时缩放到 0.5，但无法在 Foreach 中制作滚动触发器，这是我的代码的代码笔： https ://codepen.io/beatlesbob/pen /eYWMREW

经过长时间的搜索，我找不到解决我面临的问题的方法，

我有一个用 Three.js 制作的场景，其中包含：

• 帆布
• 现场
• 相机
• 一个平面几何（显示桌面屏幕）
• 4 在我们滚动时移动到特定位置的图钉
• 当引脚到达他们需要到达的位置时，一些消息会弹出并消失。

现在，桌面屏幕正在通过 y 轴移动（这是我想要的），但我希望它被固定在某个位置一段时间，而引脚和消息正在移动，然后它又开始移动.

我与你分享一个织机视频，这样你就可以想象我在这里试图解释的内容。

动画是使用 GSAP 的 ScrollTrigger 制作的。我不知道这是否是使用 Three.js 执行动画的最佳方式，还是我应该开始考虑另一种选择。

动画的织机视频：https ://www.loom.com/share/a40cdd63bbeb47298fb211994b2e89ba

我构建了一个使用 GSAP 的 ScrollTrigger 触发的缩放效果，它工作正常，但我想在滚动时缓慢（擦洗）缩放图像，而不是在输入触发器时为滚动缩放设置动画。

我在这里的评论中找到了一个 javascript 解决方案，但我正在寻找一个 GSAP ScrollTrigger 解决方案，但它很好地说明了我在寻找什么：
Zoom an image on scroll with javascript

这是我到目前为止所拥有的：