Hi there,
As the title suggests Im trying to make a 2 column section where one columns content (an image) gets pinned at some point and as its opposing column scrolls that image changes at certain points until all content is done and then it unpins and site flow continues.
Now I have this working ( thanks to a couple of tutorials) in a traditional codepen however translating it to work in a nextjs project is ... troublemsome.
the useEffect below almost works.... but only in reverse lol. When i scroll down to the section, the image dissapears when It should pin.... however if i scroll down and reenter the section in reverse it works as intended (but in reverse obviously). Also the queryselectors i've had to use the classes that next generates as opposed to my inteneral naming, which im sure based on my limited knowledge is really not ideal.
useEffect(() => {
const details = gsap.utils.toArray(".MindmapAlt_desktopContentSection__yh948:not(:first-child)")
const photos = gsap.utils.toArray(".MindmapAlt_desktopPhoto__9t4m2:not(:first-child)")
gsap.set(photos, {yPercent:101});
const allPhotos = gsap.utils.toArray(".MindmapAlt_desktopPhoto__9t4m2");
ScrollTrigger.create({
trigger:"#gallery",
start:"top top",
end:"bottom bottom",
pin:"#right"
})
details.forEach((detail, index)=> {
let headline = detail.querySelector("h1")
let animation = gsap.timeline().to(photos[index], {yPercent:0}).set(allPhotos[index], {autoAlpha:0})
ScrollTrigger.create({
trigger:headline,
start:"top 80%",
end:"top 50%",
animation:animation,
scrub:true,
markers:false
})
})
console.log(details)
console.log(photos)
}, []);
the html associated to this would look something like:
<section>
<div id="gallery" className={s.gallery}>
<div className={s.left}>
<div className={s.desktopContent}>
<div className={s.desktopContentSection}>
<h1 className={s.title}>Title 1</h1>
<p>lorem ipsum...</p>
</div>
<div className={s.desktopContentSection}>
<h1 className={s.title}>Title 2</h1>
<p>lorem ipsum...</p>
</div>
<div className={s.desktopContentSection}>
<h1 className={s.title}>Title 3</h1>
<p>lorem ipsum...</p>
</div>
<div className={s.desktopContentSection}>
<h1 className={s.title}>Title 4</h1>
<p>lorem ipsum...</p>
</div>
</div>
</div>
<div id="right" className={s.right}>
<div className={s.desktopPhotos}>
<div className={s.desktopPhoto}></div>
<div className={s.desktopPhoto}></div>
<div className={s.desktopPhoto}></div>
<div className={s.desktopPhoto}></div>
</div>
</div>
</div>
</section>
Im new to development in general and this is driving me nuts, any help appreciated.
