我有一个svg，这是我的horizontal卷轴的基础.
在这svg个元素中，我已经将类.animate添加到我想要在项目进入视图时淡入的元素中.用于引用的.Animate类已添加到svg中的所有文本项中.
目前，只有视图中的.animate个元素最初会逐渐消失.当我向下滚动以继续滚动时，其他元素是静态的.它们没有以任何方式减弱或上升或下降？
TL;DR, here is what I'm trying to achieve:个
- 当滚动条固定到位，用户继续向下滚动时，开始淡出
.horizontalScroller__intro. -
.horizontalScroller__intro消失后，开始水平滚动.horizontalScroller__items - 在我的滚动条中，任何
.animate级的元素都会淡入原来的位置.
Note:我理解在这里发布代码的规则和偏好.但是，我的演示包含一个长度SVG，我不能在这里发布，因为它超过了SO的字符限制.
Here is a demo of my latest approach个
从scrollTrigger docs开始，containerAnimation有助于在水平滚动条上实现动画，这也是我一直试图实现的.
但是，在上面的演示中，我有以下问题:
-
.horizontalScroller__intro最初不会在应该显示的时候显示，并且应该会在滚动中淡出. - 水平滚轴不再工作了
- 视图中的
.animate个元素不会逐渐淡入
如果我使用timeline(见下面的代码片断)，那么Introo就会淡出，滚动条就会正常工作.但是，没有在子元素中设置动画，这是我需要containerAnimation的地方
$(function() {
let container = document.querySelector(".horizontalScroller__items");
let tl = gsap.timeline({
scrollTrigger: {
trigger: ".horizontalScroller",
pin: ".horizontalScroller",
anticipatePin: 1,
scrub: true,
invalidateOnRefresh: true,
refreshPriority: 1,
end: '+=4000px',
markers: true,
}
});
tl.to('.horizontalScroller__intro', {
opacity: 0,
})
tl.to(container, {
x: () => -(container.scrollWidth - document.documentElement.clientWidth) + "px",
ease: "none",
})
});我正在努力寻找一种方法，让导言淡入，滚动条水平滚动，.animate个元素淡入或淡入.
Edit:
@onkar ruikar，请参阅下面基于your sandbox的注释:
- 当您向下滚动进入视图时，我希望最初的
.animate个元素向上滚动到视图中(目前，一旦文本淡出，然后水平滚动开始工作，那么应该在视图中的.animate个元素才会向上淡入 - 在加载了最初的
.animate个元素之后，接下来的.animate个元素是滚动条的一部分，它们不会淡入.它们是静电.当每.animate个元素进入视野时，它应该会淡出(我认为它当前对所有元素都触发一次).
请在此处查看视觉效果:
在上面的gif中，您可以看到前两个文本块是隐藏的，一旦它们出现在视图中，我希望它们淡出.然后第三个和第四个文本块是静电，当用户滚动到该部分时，它们应该会淡出.