Sorumeiji Posted February 25, 2022 Share Posted February 25, 2022 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) }); }); }, []); See the Pen NWxNEwY by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Trapti Posted February 25, 2022 Share Posted February 25, 2022 Your codesandbox has some js error fix that. Maybe your problem will resolve. Link to comment Share on other sites More sharing options...
Sorumeiji Posted February 25, 2022 Author Share Posted February 25, 2022 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. Link to comment Share on other sites More sharing options...
Sorumeiji Posted February 25, 2022 Author Share Posted February 25, 2022 I changed innerHeight to window.innerHeight and I am still getting the same results. I fixed the errors in the console as well. Link to comment Share on other sites More sharing options...
OSUblake Posted February 25, 2022 Share Posted February 25, 2022 Hi Sorumeiji, It looks like you need to fix your styling or HTML structure. That layering effect is not using ScrollTrigger. The only thing ScrollTrigger is used for is the snapping. See how it works when I remove ScrollTrigger. See the Pen LYOJZdj by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Sorumeiji Posted February 25, 2022 Author Share Posted February 25, 2022 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? Link to comment Share on other sites More sharing options...
OSUblake Posted February 25, 2022 Share Posted February 25, 2022 Not sure what you mean by delay, but ScrollTrigger does not control the scrolling. I'm wondering if you are trying to do something like this? See the Pen gOXXqKp by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Sorumeiji Posted February 28, 2022 Author Share Posted February 28, 2022 @OSUblake Yeah, I am trying to do something exactly like that, as in the example there. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now