I am trying to create a image animation pinning effect, it's hard to explain but heres a working demo deveb.co like this:
I'm using next js 14.1.2 and the scrolling effect on the images dosn't work. Any ideas?
function ScrollingSection() {
const details = gsap.utils.toArray("#details:not(:first-child)")
const photos = gsap.utils.toArray("#photo:not(:first-child)")
let allPhotos = gsap.utils.toArray('#photos')
const trigger = useRef()
const pin = useRef()
useGSAP( () => {
ScrollTrigger.create({
trigger: trigger.current,
start: "top top",
end: "bottom bottom",
pin: pin.current
})
gsap.set(photos, { yPercent: 101 })
details.forEach((detail, index) => {
const animation = gsap.timeline()
.to(photos[index], { yPercent: 0 })
.set(allPhotos[index], { autoAlpha: 0 })
ScrollTrigger({
trigger: `.hd-${index}`,
start: "top 80%",
end: "top 50%",
animation: animation,
scrub: 1,
markers: true
})
})
}, [])
return (
<>
<div className="w-full flex">
<div ref={trigger} className="w-1/2">
{
list.map((item, index) => {
return (
<TextBox title={item.title} index={index} desc={item.desc} key={index} />
)
})
}
</div>
<div ref={pin} className="w-1/2">
<div className="w-full h-screen flex justify-center items-center">
<div className="w-[40vw] relative aspect-square shadow-2xl rounded-lg overflow-hidden">
{
list.map((item, index) => {
return (
<>
<div id="photo" key={index} className={`w-full h-full absolute ${item.color}`}></div>
</>
)
})
}
</div>
</div>
</div>
</div>
</>
)
}
function TextBox({ title, desc, index }) {
return (
<>
<div id="details" className="h-[100vh] flex flex-col items-center justify-center gap-8">
<h2 className={`headline hd-${index} text-5xl`}>{title}</h2>
<p className="text-center w-1/2">
{desc}
</p>
<Button>Explore</Button>
</div>
</>
)
}
