Thanks, I have fixed it... I add extra class to the element I want to pin, then adjust the start and end value...
const faqsContent = gsap.timeline({
scrollTrigger: {
trigger: ".faqs",
start: "top center",
end: "bottom top",
scrub: 1
}
});
faqsContent.from(".faqs-img", { scale: 1.5 });
faqsContent.to(".faqs-mask", { clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)" }, 0);
faqsContent.to(".faqs-mask", { duration: 1, scale: 1 });
gsap.from(".faqs .card", {
y: 50,
opacity: 0,
duration: 1,
stagger: 0.25,
ease: "expo.out",
scrollTrigger: {
trigger: ".faqs",
pin: ".sticky",
pinSpacing: false,
start: "top 70px",
end: "bottom bottom",
scrub: 1
}
});