I'm trying to create a timeline section using GSAP ScrollTrigger animation. I've five text blocks (5 timeline elements) with five different images. By default, there will be only one text block visible but after scrolling the hidden text block(2nd text block) will fade up with 100% opacity and the opacity of the previous text block(1st text block) will decrease. When the third one will be active (visible via scroll), the first text block will vanish from the screen and the opacity of the second text block decrease.
Note: By default, there will be only one active text block. But after scrolling there will be 2 text blocks one will be active with 100% opacity and another will be blur with 50% opacity.
For the default state it is working fine but when I'm scrolling the previous text block is not vanishing from the screen. If you guys can take a look at what I did on codepen(https://codepen.io/shuvosd/pen/RwKZEEe) and help me to fix the issue then I will be really very thankful. Thanks in advance.
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>