Responsive navigation HELP NEEDED!

[indy_dln 3 Likes (Newbie)]

Hi all, 

 

I've made this responsive navigation and I'm just STRUGGLING! I'm not fantastic at JS stuff but it just seems to work then... not! 

 

Have any of you got any ideas on how I could improve this? Also, how I could make the drop down on hover for desktop and o'clock for mobile?

See the Pen WNgRRpm by Indy_dln (@Indy_dln) on CodePen

[elegantseagulls 1,430 Likes (Superhero)]

I'd probably try to handle a lot of gsap.set() in your css rather than JS. Can you elaborate on what you mean by:

4 hours ago, indy_dln said:

it just seems to work then... not!

 

[Rodrigo 5,098 Likes (Superhero)]

Hi,

 

I think you are overcomplicating this quite a bit.

 

This is the approach I'd follow in your case. Is a gross oversimplification of it but hopefully you'll get the gist (I didn't had the time to go through all your code and update it):

See the Pen VwGPVXr by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[indy_dln 3 Likes (Newbie)]

23 hours ago, elegantseagulls said:

I'd probably try to handle a lot of gsap.set() in your css rather than JS. Can you elaborate on what you mean by:

 

 

What was happening is that it would fire properly but then the animation would not fully reverse. I think this is as because of what you've said regarding the CSS and the use of 'to' with GSAP.set rather than 'fromTo' and having it in the CSS. 

[indy_dln 3 Likes (Newbie)]

14 hours ago, Rodrigo said:

Hi,

 

I think you are overcomplicating this quite a bit.

 

This is the approach I'd follow in your case. Is a gross oversimplification of it but hopefully you'll get the gist (I didn't had the time to go through all your code and update it):

 

 

 

Hopefully this helps.

Happy Tweening!

 

Thank you so much for this, it is very much appreciated!!

 

It'll definitely set me on the right track as I think I was confusing a lot of things between CSS and the JS. I'll see how I get on then come back with updates. 

[indy_dln 3 Likes (Newbie)]

14 hours ago, Rodrigo said:

Hi,

 

I think you are overcomplicating this quite a bit.

 

This is the approach I'd follow in your case. Is a gross oversimplification of it but hopefully you'll get the gist (I didn't had the time to go through all your code and update it):

 

 

 

Hopefully this helps.

Happy Tweening!

 

Bonjour my friends on the internet! 

 

I've had another go at this using Rodrigo's advice and it's nearly there  Took me a while to realise I had to update my dependencies (duh!) as matchmedia wasn't triggering when I resized. 

 

I'm having some trouble with the CSS though the moving between desktop and mobile menu and whether I should be using .fromTo or .to, gsap.set etc. 

 

I'm going to work on the timings so everything triggers better but previously I'd made a media where the animation reversed faster, but I'm not sure how to add that in here?

 

Any tips/advice on this would be greatly received!   

 

See the Pen WNgRRpm by Indy_dln (@Indy_dln) on CodePen

 

[Cassie 5,164 Likes (Superhero)]

Hiya! 

So your media queries in your CSS and JS didn't line up - you had 768 in the JS and 860 in the CSS.

If you're not using any of that code on desktop then I'd pop the whole timeline into matchMedia.

 

Does this help?

See the Pen zYJdoMR?editors=0011 by GreenSock (@GreenSock) on CodePen

[indy_dln 3 Likes (Newbie)]

42 minutes ago, Cassie said:

Hiya! 

So your media queries in your CSS and JS didn't line up - you had 768 in the JS and 860 in the CSS.

If you're not using any of that code on desktop then I'd pop the whole timeline into matchMedia.

 

Does this help?
 

 

 

YOU. ARE. AMAZING! Thank you for your help with that, you and Rodrigo have been great. 

 

Everything seems to be working as I'd hoped except for one thing and I've updated my pen below so you can replicate this. 

 

If the mobile menu is opened, then the page is re-sized to desktop (so that the menu resets), then resized to mobile again, the mobile menu doesn't open again? But if I re-size it one more time it then works?! Not sure what's going on there! 

 

 

 

See the Pen WNgRRpm by Indy_dln (@Indy_dln) on CodePen

 

[Rodrigo 5,098 Likes (Superhero)]

Hi,

 

The issue is that you're adding the click handler to the menu button every time the code runs inside the GSAP MatchMedia instance. So every time you pass that particular breakpoint, the click handler is added again so you end up with multiple calls on a single click event. This seems to resolve that:

mm.add("(max-width: 860px)", () => {
  /* Activate menu */
  const mobileTl = gsap.timeline().reverse();

  mobileTl
  /*...*/
  
  const menuClickHandler = () => {
    menuOpen
      ? mobileTl.timeScale(4).reversed(menuOpen)
      : mobileTl.timeScale(1).reversed(menuOpen);

    menuOpen = !menuOpen;

    document.body.classList.toggle("lock-scroll");
    navBar.classList.toggle("unlock-scroll");
  };
  // Add click handler
  menuBtn.addEventListener("click", menuClickHandler);

  mobileTl.pause(0).reverse();
  return () => {
    mobileTl.pause(0).reverse();
    menuOpen = false;
    document.body.classList.remove("lock-scroll");
    navBar.classList.remove("unlock-scroll");
    // Remove click handler
    menuBtn.removeEventListener("click", menuClickHandler);
  };
});

Hopefully this helps.

Happy Tweening!

[indy_dln 3 Likes (Newbie)]

4 minutes ago, Rodrigo said:

Hi,

 

The issue is that you're adding the click handler to the menu button every time the code runs inside the GSAP MatchMedia instance. So every time you pass that particular breakpoint, the click handler is added again so you end up with multiple calls on a single click event. This seems to resolve that:

mm.add("(max-width: 860px)", () => {
  /* Activate menu */
  const mobileTl = gsap.timeline().reverse();

  mobileTl
  /*...*/
  
  const menuClickHandler = () => {
    menuOpen
      ? mobileTl.timeScale(4).reversed(menuOpen)
      : mobileTl.timeScale(1).reversed(menuOpen);

    menuOpen = !menuOpen;

    document.body.classList.toggle("lock-scroll");
    navBar.classList.toggle("unlock-scroll");
  };
  // Add click handler
  menuBtn.addEventListener("click", menuClickHandler);

  mobileTl.pause(0).reverse();
  return () => {
    mobileTl.pause(0).reverse();
    menuOpen = false;
    document.body.classList.remove("lock-scroll");
    navBar.classList.remove("unlock-scroll");
    // Remove click handler
    menuBtn.removeEventListener("click", menuClickHandler);
  };
});

Hopefully this helps.

Happy Tweening!

 

That's worked a treat. Thank you to yourself and Cassie for taking the time to assist with this, I'm extremely grateful to you both! 

 

[Cassie 5,164 Likes (Superhero)]

Ah hero, thanks for fixing that Rodrigo