Sukru Posted February 14, 2022 Share Posted February 14, 2022 http://clients.super-agency.com/test/index.html Hello, I made a menu with gsap, but after clicking on a different link from this menu and going back, the menu remains open, I couldn't find a solution, can you help? Where am I doing wrong? Menu code const ham = document.querySelector(".ham"); const menu = document.querySelector('.main-menu'); const links = menu.querySelectorAll('li a'); const menulist = document.querySelectorAll('.menu-list'); var tl = gsap.timeline({ paused: true }); tl.to(menu, { duration: 1, opacity: 1, height: '100vh', ease: 'expo.inOut', width: "100%", }) tl.from(menulist, { duration: .5, opacity: 0, height: '100vh', left: '0', ease: 'expo.inOut', }, "-=0.5"); tl.from(links, { opacity: 0, duration: 1.2, ease: "power4.out", y: 320, stagger: 0.1, }, "-=0.1"); tl.reverse(); ham.addEventListener('click', () => { menuBar.reversed(!menuBar.reversed()); tl.reversed(!tl.reversed()); }); var menuBar = gsap.timeline(); menuBar.to('.bar-1', 0.5, { attr: { d: "M8,2 L2,8" }, x: 1, ease: Power2.easeInOut }, 'start') menuBar.to('.bar-2', 0.5, { autoAlpha: 0 }, 'start') menuBar.to('.bar-3', 0.5, { attr: { d: "M8,8 L2,2" }, x: 1, ease: Power2.easeInOut }, 'start') menuBar.reverse(); Menu Codepen Code See the Pen MWbJOwz by r3khchand (@r3khchand) on CodePen See the Pen by test (@test) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted February 14, 2022 Share Posted February 14, 2022 Hi there @Sukru! That codepen doesn't seem to reflect the code currently on the website? I also can't recreate this I'm afraid. Could you explain the steps to the issue you're describing? 55 minutes ago, Sukru said: Hello, I made a menu with gsap, but after clicking on a different link from this menu and going back, the menu remains open, I couldn't find a solution, can you help? Where am I doing wrong? It would help if you can update the codepen (or make a codesandbox) with the problematic code for us too. Without more information I would assume(?) that you're using a single-page application and not instructing the menu to close? If you're navigating to a new page in a normal website the whole page should refresh so you won't need to tell the menu to close. In a SPA, that's not the case. Maybe that's the issue? Link to comment Share on other sites More sharing options...
Sukru Posted February 14, 2022 Author Share Posted February 14, 2022 48 minutes ago, Cassie said: Hi there @Sukru! That codepen doesn't seem to reflect the code currently on the website? I also can't recreate this I'm afraid. Could you explain the steps to the issue you're describing? It would help if you can update the codepen (or make a codesandbox) with the problematic code for us too. Without more information I would assume(?) that you're using a single-page application and not instructing the menu to close? If you're navigating to a new page in a normal website the whole page should refresh so you won't need to tell the menu to close. In a SPA, that's not the case. Maybe that's the issue? Hello Cassie, i have now created See the Pen MWOvLar by sukruemanet (@sukruemanet) on CodePen Steps; 1. I open the menu and then click on a link 2. Then it goes back to the page The problem is that the menu stays open and needs to be closed. Link to comment Share on other sites More sharing options...
Cassie Posted February 14, 2022 Share Posted February 14, 2022 Hey @Sukru, there's no issue in this pen? I don't know how to help - sorry. Can you explain a little more what it is you're stuck with? Link to comment Share on other sites More sharing options...
Sukru Posted February 14, 2022 Author Share Posted February 14, 2022 18 minutes ago, Cassie said: Hey @Sukru, there's no issue in this pen? I don't know how to help - sorry. Can you explain a little more what it is you're stuck with? https://www.loom.com/share/c6a2d13033924511b418ae8f7dadcf0e Hello Cassie; I tried to explain the problem by making a video. It is already seen in the video, i go to a page from the menu, then I come back to the page and the menu remains open Link to comment Share on other sites More sharing options...
Cassie Posted February 14, 2022 Share Posted February 14, 2022 I can't replicate that issue so I can't really help I'm afraid. There's nothing in your code in codepen that would be causing this. It sounds like you're potentially building a single page app? If you're using a SPA - it's likely you'll need to explicitly close the menu yourself when you navigate to a new 'page', just like you are when the hamburger menu is pressed. 2 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