Gsap menu stuck issue

[Sukru]

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

[Cassie]

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?

[Sukru]

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.

[Cassie]

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?

[Sukru]

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

[Cassie]

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.