Masta

Hi, Thx Cassie and Rodrigo ? superheroes are real !! it's works like a charm have a good day and a great weekend ?

Hi Cassie thanks for your help I'll try to make it but codesandbox for Nextjs is in beta and lock the edit mod ....have no solution to make it editable for now and i try other solution but have error all time when i try to reproduce my environment and lost my afternoon on it (if u have account on codesandbox u can fork the project for test some things but i understand if u won't) ? ! Anyway we have the code in the sandbox can u just explain me how u use gsap.context in my case and can solved my problem ? I see the documentation about it and try to implement it but i don't understand his implementation in my code, i try some things but no one works https://codesandbox.io/p/sandbox/test-sfopos useEffect(() => { gsap.registerPlugin(ScrollTrigger); ScrollTrigger.defaults({ markers: { startColor: "green", endColor: "red" }, }); let sections = gsap.utils.toArray(".item"); const container: HTMLElement = document.querySelector("#test111")!; let ctx = gsap.context(() => { gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", scrollTrigger: { pin: true, pinnedContainer: container, trigger: container, scrub: 0.5, end: () => "+=" + `${container.offsetWidth}`, onEnter: () => console.log("in"), onLeave: () => console.log("out"), }, }, container); }); return () => ctx.revert(); }, []); Thanks for your help ^^

Hi, I have already used nextjs and GSAP together on other projects especially for a horizontal scroll for landing pages and it works without any problem However, for a new project I need to use the scroll only on one section and that's where my problem starts. I have read the documentation about the scrollTrigger and its properties, I have skimmed the GSAP forums as well as the different sandboxes and codepens but nothing to do, I'm stuck! The best result I could get is the one you see here and in the sandbox .... https://codesandbox.io/p/github/Masta2000/Test-/draft/trusting-field?file=%2Fcomponents%2FHome%2FResults%2Findex.tsx&selection=[{"endColumn"%3A4%2C"endLineNumber"%3A19%2C"startColumn"%3A4%2C"startLineNumber"%3A19}] useEffect(() => { gsap.registerPlugin(ScrollTrigger); ScrollTrigger.defaults({ markers: { startColor: "green", endColor: "red" }, }); let sections = gsap.utils.toArray(".item"); const container: HTMLElement = document.querySelector(".wrapper")!; gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", scrollTrigger: { pin: true, pinnedContainer: container, trigger: container, scrub: 0.5, end: () => "+=" + `${container.offsetWidth}`, onEnter: () => console.log("in"), onLeave: () => console.log("out"), }, }); ScrollTrigger.refresh(); }, []); I don't understand why my scroll doesn't stop at the end of my container as I think I told it to and also why it duplicates the element on which the scroll is applied twice ? Besides, I don't really understand why either, I tested the pinnedContainer property which allows me to have the horizontal scroll because without it it doesn't work, for me it should because on my other works I didn't need to use this property at all but now it becomes indispensable and I would like to understand why in my case. Here it is, I don't think that the problem comes from next or something else but we are never safe from a surprise and maybe someone more erudite than me on GSAP will be able to help me to see it more clearly ? Thanks in advance and have a nice day ?