DownfallOfADog Posted March 24, 2020 Share Posted March 24, 2020 Hello, I'm doing something in React.js and I don't know why the scrollTo doesn't work. Basically what I'm trying to do is something similar to what Mikel did : See the Pen XWbBGPz?editors=0010 by e1668058 (@e1668058) on CodePen but without the buttons. I'm just trying to figure out how to do it just with the mousescroll. just a little extra, I've also thought of adding an onStart and onComplete for the TweenMax so that when it starts I lock the mousewheel with : window.addEventListener("wheel", function(e){e.preventDefault();}, {passive: false} ); and when it completes I unlock the mouse with passive: true. Thank you. Heres my code pen. See the Pen XWbxXGx by e1668058 (@e1668058) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 24, 2020 Share Posted March 24, 2020 Hey DownfallOfADog. The main issue is that you're attempting to use the ScrollToPlugin but failing to load it Here's how I'd set it up: See the Pen JjdmNaY?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
DownfallOfADog Posted March 24, 2020 Author Share Posted March 24, 2020 Thanks for the help @ZachSaucier. I've made a codesanbox demo so that I can simulate the code I wrote with React js : https://codesandbox.io/s/dazzling-vaughan-972oc There's an error in my sideMenu.js in the components folder that says : gsap is not defined with 4 console messages saying : DevTools failed to parse SourceMap: chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.preload.js.map Where do I define gsap? It doesnt do anything if I import it like this : import "gsap"; or this : import gsap from "gsap"; and it doesnt work if I replace gsap.to with TweenMax.to Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 24, 2020 Share Posted March 24, 2020 We highly recommend using our install helper until you get comfortable with the format of importing GSAP tools. Using it you can see that the imports you need are: import { gsap } from "gsap"; import { ScrollToPlugin } from "gsap/ScrollToPlugin"; gsap.registerPlugin(ScrollToPlugin); However, React currently doesn't support passive event listeners so you should use a useEffect or something to work around the issue: https://github.com/facebook/react/issues/14856#issuecomment-586781399 Link to comment Share on other sites More sharing options...
DownfallOfADog Posted March 24, 2020 Author Share Posted March 24, 2020 Thank you for your help. I'll try to see what I can use to fix the problem of React. 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