Guest Posted October 27, 2022 Share Posted October 27, 2022 Hello! I have now managed to finish building my menu burger but encounter a problem as soon as scrolling is triggered. The burger itself disappears once you click on it, I don't really understand why. When burger value is true then the animation is activated again but I only want it to be activated onScroll? It works properly when scrolled to top...? Thanks in advance. See the Pen dyKPQQK by ruuschtuu (@ruuschtuu) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted October 27, 2022 Share Posted October 27, 2022 Hi, The issue is that the useEffect hook is not running until you click the menu button, I couldn't tell you why. What caught my attention is that you are using really old versions of GSAP and React, and you have a miss-match in the React and React DOM versions. I created a codesanbox with the same code and up-to-date versions of all libraries (for some reason I can't get styled components to work in codepen 🤷♂️) and everything seems to work as expected: https://codesandbox.io/s/gallant-poincare-4xwkrp?file=/src/App.js Hopefully this is what you are looking for. Let us know if you have more questions. Happy Tweening! Link to comment Share on other sites More sharing options...
Guest Posted October 31, 2022 Share Posted October 31, 2022 Hello and thank you so much for the solution! The thing is that Scrolltrigger only works for me when is import it like this: //This works import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; //This dosen't work import { ScrollTrigger } from "gsap/ScrollTrigger"; Link to comment Share on other sites More sharing options...
Rodrigo Posted October 31, 2022 Share Posted October 31, 2022 Hi, That means that you are probably using NextJS right? When using Next is better to use ES5 UMD modules, that's why we recommend using the files in the dist folder. Let us know if you have more questions. Happy Tweening! 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