[Responsive navigation HELP NEEDED!]

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! 

 

[Responsive navigation HELP NEEDED!]

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! 

 

 

 

 

[Responsive navigation HELP NEEDED!]

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!   

 

 

[Responsive navigation HELP NEEDED!]

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. 

[Responsive navigation HELP NEEDED!]

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. 

[Responsive navigation HELP NEEDED!]

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

[Responsive navigation]

Hi Zach 

 

Just an update on this. I figured it out in the end (I think!) and used it on this site:

https://www.lime-financial.co.uk/

 

It needs a bit of refining but thank you for your help 😊

 

Indy

[Responsive navigation]

On 12/29/2020 at 1:50 PM, ZachSaucier said:

Your goal isn't clear to me. You can't animate display... 

 

Perhaps I'm being dull, but why not make that animation a part of your other timeline if they're both happening when you click your nav?

 

The idea was to trigger a sub-menu when a dropdown is clicked. I'm going to work on it a bit and see how I get on as I think the SCSS and they properties I'm calling in the animations are a bit muddled, which isn't helping matters. 

 

Although, the local development version of the site looks and works awesome! It's my first time using GSAP on a site; got some scroll triggers going on too.   

 

 

[Responsive navigation]

10 hours ago, ZachSaucier said:

That's easily fixed by setting the reversed state when you create the timeline  

var tl = gsap.timeline({ reversed: true });

Happy tweening!

 

Hi Zach. Thanks so much for that, such a simple fix haha. I've forked the pen and put it below for others who might need the same solution 

 

Just need to figure out how to nest different actions now? I've got two sub-menus that would need to animate on click too. Is the code in the pen below way off?!

 

See the Pen KKgZxWL by Indy_d (@Indy_d) on CodePen

 

[Responsive navigation]

1 hour ago, ZachSaucier said:

Hey indy_dln and welcome to the GreenSock forums. It's pretty hard for us to help out without seeing your code for ourselves. Can you please create a minimal demo using something like CodePen for us to look at?

 

Based on your description alone I would guess that you need to detect the reversed state. Something like this:

tl.reversed() ? tl.play() : tl.reverse()

 

 

Thank you so much for getting back to me so quickly! Great to have such knowledgable people out there and appreciate you giving up your time to help! 😀

 

Apologies about the lack of example, I've attached (very vibrant!) codepen!

 

It kinda worked. Although when I load the page for first time, it reverses the timeline, then works how it should after a second click. 

 

Again, thank you for your help so far. 

 

See the Pen poEppNX by Indy_d (@Indy_d) on CodePen

 

 

 

 

 

[Responsive navigation]

Hi all! 
 

Firstly, hello to everyone. I’m completely new to posting on here; however I’ve spent a lot of time looking around for a while now. 
 

Secondly.. I need some help 😬. 
 

i created a timeline for the opening and closing of a mobile menu in gsap3 linked to a hamburger button and it works fine (albeit with some refinement necessary!). But it only plays forward and I can’t figure out how to toggle it so that it plays in reverse to close it?! 
 

I set up the button as a const and added an event listener with tl.play().
 

Any ideas? I can only seem to find information for using a separate trigger to reverse and not toggling the same button.