Javascript GSAP ScrollTrigger动画淡入淡出不透明度问题

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

注意：默认情况下，只有一个活动文本块。但在滚动之后，将有两个文本块，一个是100%不透明度的活动文本块，另一个是50%不透明度的模糊文本块

对于默认状态，它工作正常，但当我滚动上一个文本块时，它不会从屏幕上消失。如果你们能看看我在codepen（）上做了什么，并帮助我解决这个问题，我将非常感谢。提前谢谢

ScrollTrigger.defaults({
马克：对
});
var points=gsap.utils.toArray（“.point”）；
变量高度=100*points.length；
var tl=gsap.timeline({
持续时间：点。长度，
滚动触发器：{
触发：“哲学”，
开始：“上下”，
结束：“++=”+高度+“%”，
是的，
id:“点数”
}
});
var pinner=gsap.timeline({
滚动触发器：{
触发器：“.哲理.包装器”，
开始：“顶上”，
结束：“++=”+高度+“%”，
错,，
pin:“.哲理.包装”，
是的，
id:“钉住”，
//马克：对
}
});
点。forEach（函数（elem，i）{
//不允许渲染链接
gsap.set（元素，{位置：“绝对”，顶部：0}）；
tl.from（elem.querySelector（“img”），{autoAlpha:0}，i）；
tl.from（elem.querySelector（“article”），{autoAlpha:0，y:200}，i）；
如果（i！=points.length-1）{
tl.to(
查询选择器（“条款”），
{autoAlpha:.2，y:-200}，
i+0.90
);
tl.to（元素查询选择器（“img”），{autoAlpha:0}，i+0.90）；
}
});
*{
保证金：0；
padidng:0；
}
.哲学{
位置：相对位置；
}
.哲学观点{
高度：100vh；
宽度：100%；
显示器：flex；
对齐项目：柔性端；
填充：4rem；
框大小：边框框；
}
要点：在{
位置：绝对位置；
内容：“；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：rgb（0/18%）；
}
.哲学.包装{
高度：100vh；
宽度：100%；
}
.重点文章{
弹性基准：60%；
右边距：自动；
位置：相对位置；
z指数：9；
颜色：#fff；
}
.点img{
弹性基准：100%；
身高：100%；
位置：绝对位置；
宽度：100%；
对象匹配：覆盖；
左：0；
排名：0；
}

你是说除了最后一个元素外，
文章
元素的不透明度为20%吗？您正在将它们设置为
autoAlpha:.2
，这就是它们从未达到0的原因。您好，@chazsolo感谢您的回复。我在GSAP论坛上找到了解决方案。如果您感兴趣，可以在这里查看