我正在尝试使用 GSAP ScrollTrigger 动画创建时间线部分。我有五个带有五个不同图像的文本块（5 个时间线元素）。默认情况下，只有一个文本块可见，但在滚动隐藏文本块（第二个文本块）后会以 100% 的不透明度淡出，并且前一个文本块（第一个文本块）的不透明度会降低。当第三个文本块激活时（通过滚动可见），第一个文本块将从屏幕上消失，第二个文本块的不透明度降低。
注意：默认情况下，只有一个活动文本块。但滚动后会有 2 个文本块，其中一个会以 100% 的不透明度处于活动状态，而另一个会以 50% 的不透明度变得模糊。
对于默认状态，它工作正常，但是当我滚动前一个文本块时，它并没有从屏幕上消失。如果你们可以看看我在 codepen 上做了什么（https://codepen.io/shuvosd/pen/RwKZEEe）并帮助我解决问题，那么我将非常感激。提前致谢。
ScrollTrigger.defaults({
markers: true
});
var points = gsap.utils.toArray(".point");
var height = 100 * points.length;
var tl = gsap.timeline({
duration: points.length,
scrollTrigger: {
trigger: ".philosophie",
start: "top bottom",
end: "+=" + height + "%",
scrub: true,
id: "points"
}
});
var pinner = gsap.timeline({
scrollTrigger: {
trigger: ".philosophie .wrapper",
start: "top top",
end: "+=" + height + "%",
scrub: false,
pin: ".philosophie .wrapper",
pinSpacing: true,
id: "pinning",
//markers: true
}
});
points.forEach(function (elem, i) {
// doesn't allow links to render
gsap.set(elem, { position: "absolute", top: 0 });
tl.from(elem.querySelector("img"), { autoAlpha: 0 }, i);
tl.from(elem.querySelector("article"), { autoAlpha: 0, y: 200 }, i);
if (i != points.length - 1) {
tl.to(
elem.querySelector("article"),
{ autoAlpha: .2, y: -200 },
i + 0.90
);
tl.to(elem.querySelector("img"), { autoAlpha: 0 }, i + 0.90);
}
});*{
margin:0;
padidng:0;
}
.philosophie {
position: relative;
}
.philosophie .point {
height: 100vh;
width: 100%;
display: flex;
align-items: flex-end;
padding: 4rem;
box-sizing:border-box;
}
.philosophie .point:after {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(0 0 0 / 18%);
}
.philosophie .wrapper {
height: 100vh;
width: 100%;
}
.point article {
flex-basis: 60%;
margin-right: auto;
position: relative;
z-index: 9;
color:#fff;
}
.point img {
flex-basis: 100%;
height: 100%;
position:absolute;
width:100%;
object-fit:cover;
left:0;
top:0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/ScrollTrigger.min.js"></script>
<section class="philosophie">
<div class="wrapper">
<div class="point first">
<article>
<h3>Title One</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<a href="https://google.com">I'm a link</a>
</article>
<img src="https://source.unsplash.com/random/500x500" alt="random" width="500" height="500" />
</div>
<div class="point">
<article>
<h3>Title Two</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</p>
<a href="https://google.com">I'm a link</a>
</article>
<img src="https://source.unsplash.com/random/510x500" alt="random" width="500" height="500" />
</div>
<div class="point">
<article>
<h3>Title Three</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<a href="https://google.com">I'm a link</a>
</article>
<img src="https://source.unsplash.com/random/501x500" alt="random" width="500" height="500" />
</div>
<div class="point">
<article>
<h3>Title Four</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer </p>
<a href="https://google.com">I'm a link</a>
</article>
<img src="https://source.unsplash.com/random/501x500" alt="random" width="500" height="500" />
</div>
<div class="point">
<article>
<h3>Title Five</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been </p>
<a href="https://google.com">I'm a link</a>
</article>
<img src="https://source.unsplash.com/random/501x500" alt="random" width="500" height="500" />
</div>
</div>
</section>