Sorumeiji

@OSUblake Yeah, I am trying to do something exactly like that, as in the example there.

Oh, I had no clue. Give me some time to fix the HTML and see what I can do. Is there also a way to delay after the snapping happens?

I changed innerHeight to window.innerHeight and I am still getting the same results. I fixed the errors in the console as well.

Oh that error doesn't exist on my local, it happens because of strict mode on CodeSandBox. Because innerHeight is a property of window it warns me about that, it really doesn't throw a hard error. Unless, there is another way I can get innerHeight in react. I was thinking of using the window property directly. Let me try to fix that though.

Hello guys, I am in need of some dire help. I am trying to implement a scrolltrigger effect with snapping exactly like the GSAP codepen demo here, but in React / Next JS. I been working on it for days trying to implement on a website. I also created a mini codesandbox demo with the effect, but as you see, the behavior snapping and scroll is not the same. I was wondering if I could get some assistance. Sandbox link: https://codesandbox.io/s/festive-babycat-b8lh74?file=/pages/_app.js useEffect(() => { let panels = gsap.utils.toArray(".panel"); let scrollTween; function scrollTo(arg) { return { y: arg * innerHeight, autoKill: false }; } function goToSection(i) { scrollTween = gsap.to(window, { scrollTo: () => { scrollTo(i); console.log(i); }, duration: 1, onComplete: () => (scrollTween = null), overwrite: true }); } panels.forEach((panel, i) => { ScrollTrigger.create({ trigger: panel, start: "top bottom", markers: true, onToggle: (self) => self.isActive && !scrollTween && goToSection(i) }); ScrollTrigger.create({ start: 0, end: "max", snap: 1 / (panels.length - 1) }); }); }, []);

Yes, the pinning part! Thank you for the simpler example. I am new to animation and GSAP. So jut been trying to wrap my head around everything. I might just need to practice more simple things with GSAP. Then slowly approach the advance things as well.

Oh, it is working. I am just not understanding how it is working. I been trying to study the code to make it vertical, but I am kinda struggling with the formula he is using to make it go horizontal. Mostly this section here: gsap.to(panels.current, { xPercent: -100 * (totalPanels - 1), ease: "none", scrollTrigger: { trigger: panelsContainer.current, pin: true, scrub: 1, snap: 1 / (totalPanels - 1), // base vertical scrolling on how wide the container is so it feels more natural. end: () => "+=" + panelsContainer.current.offsetWidth } }); }, []);

@Rodrigo I was wondering if it was possible to have a react demo of the vertical version as well? What confuses me is understand how the panels are set up, so you don't have to call an effect for each section?