Pinned section while other are scrolling

[balocreation]

Hello, I want to pin the image while the FAQs is still scrolling, I've tried pin and pin spacing is not working.

See the Pen poLeEMm by olawale-balo (@olawale-balo) on CodePen

[GreenSock]

I'm not sure exactly what you want, but maybe this is a good jumping-off point: 

See the Pen yLKMMNE?editors=0010 by GreenSock (@GreenSock) on CodePen

[balocreation]

That is not what I wan't to do, I want it to pin + the image animation. 

[GreenSock]

I don’t understand what you mean, sorry. 

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[balocreation]

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

}

});