问题描述
我正在尝试使用 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",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"),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 </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>解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）