Hi Zach,
many thanks for the quick response. I immediately tried to follow your advice and the first thing I did was clean the code. Then I tried to create the timeline.
Unfortunately, I am unable to create the forEach loop in such a way that the comments fade in one after the other. Currently, all of them fade in at the same time. I have adjusted my project in Codepen again so that you can better see what I mean.
As soon as I adjust trigger to "comment", the markers appear in the wrong place.
Greats Chris
gsap.registerPlugin(ScrollTrigger);
const fadein = gsap.utils.toArray('.comment')
fadein.forEach(comment => {
const tl = gsap.timeline({
scrollTrigger: {
trigger: "#scroll-container",
start: "top top",
end: "+=2000",
scrub: true,
pin: true,
anticipatePin: 1,
markers:true
}
});
tl.to(".section-1", 1, {autoAlpha: 0, scale: 2,})
.to(".section-2", 1, {scale: 1.7,})
.to(".section-3", 1, {autoAlpha: 1,})
.to(comment, 1, {autoAlpha: 1,});
});