Jump to content
Search Community

Responsive navigation HELP NEEDED!

indy_dln test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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!

  • Like 2
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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!  :) 

 

 

Link to comment
Share on other sites

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! 

 

 

 

 

Link to comment
Share on other sites

  • Solution

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!

  • Like 4
Link to comment
Share on other sites

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! 

 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...