maan

thanks @mvaneijgen tl.add(()=>{}, "+=0.5") this line of code almost solved my problem actually i have made my textcontainer to absolute position and i wanted the image to increase to full viewwidth like image should be of full width text should overlap , it should look something like this in video 20240702-1206-53 (1).mp4

Thanks a lot @mvaneijgen now it is more smooth and looking better but one more thing is that i want to unpin the page when the image is get to full width then it should unpin ,i am trying hard to increase the pinning duration but it is having no effect, the page unpins when the image is not even get to full width and the end value no matter what i set to , end is in the center of the page i actually want the page not to unpin until the image is set to full width .

const Projects = () => { const containerRef = useRef(null); useLayoutEffect(() => { const sections = gsap.utils.toArray(".comparisonSection"); sections.forEach((section) => { const tl = gsap.timeline({ scrollTrigger: { trigger: section, start: "center center", end: () => "+=3000", // Increase the end value for longer pinning scrub: true, pin: true, markers: true, pinSpacing: true, }, defaults: { ease: "none" }, }); tl.fromTo( section.querySelector(".afterImage"), { width: "70%" }, { width: "100%" } ).fromTo( section.querySelector(".afterImage img"), { xPercent: -50, x: 0 }, { xPercent: 0 }, 0 ); }); return () => { sections.forEach((section) => { ScrollTrigger.getById(section).kill(); }); }; }, []); return ( <Box ref={containerRef} sx={{ backgroundColor: "#fdce00", width: "100%", minHeight: "400vh", // Increase minHeight for more scrollable content marginTop: "20px", boxSizing: "border-box", overflow: "hidden", padding: { xs: "10px", md: "0" }, }} > <Chip label="Projects" className="font-bold text-[#fdce00] bg-black text-xl border-[1px] mt-10" sx={{ marginLeft: { xs: "calc(50% - 50px)", md: "46%" }, }} /> <Grid container justifyContent="center" alignItems="center"> <Typography sx={{ color: "#4c3e00", margin: "20px", padding: "10px", textAlign: "center", fontWeight: "bold", fontSize: { xs: "24px", md: "48px", lg: "64px" }, position: "relative", zIndex: 10, top: { xs: "0", md: "70%" }, }} > DISCOVER OUR <br /> INCLUSIVE <br /> PLACES </Typography> </Grid> {data.map((project, index) => ( <div key={index} className="comparisonSection" style={{ display: "flex", flexDirection: { xs: "column", md: "row" }, alignItems: "center", marginTop: "20px", minHeight: "100vh", position: "relative", }} > <div className="afterImage" style={{ position: "relative", zIndex: 1, overflow: "hidden", width: "70%", height: "100%", transition: "width 2s ease-in-out, height 2s ease-in-out", }} > <img src={project.src} alt="Project" style={{ width: "100%", height: "100%", objectFit: "cover", }} /> </div> <div className="textContainer" style={{ marginLeft: { xs: "0", md: "20px" }, marginTop: { xs: "20px", md: "0" }, textAlign: "left", zIndex: 10, color: index === 1 ? "white" : "black", textAlign: { xs: "center", md: "left" }, }} > <Typography sx={{ fontSize: { xs: "24px", md: "35px" }, fontWeight: "bold", color: index === 1 ? "white" : "white", }} > {project.heading} </Typography> <Typography sx={{ fontSize: { xs: "18px", md: "28px" }, fontWeight: "bold", color: index === 1 ? "white" : "white", marginTop: "10px", }} > {project.text} </Typography> </div> </div> ))} </Box> ); }; hey this is my code actually i am trying to increase the pinning duration like i want to make the end more delayed like when my image gets to full width then it should unpin but this code is having no effect whatever i change the value in the end .Also the animation is not so smooth like when i scroll the image width increases and when i stop it keeps increasing some more like not exactly moving smoothly with the scroll