Jump to content
Search Community

GSAP hamburger menu should close if user clicks on hyperlinks

bootstrap007 test
Moderator Tag

Recommended Posts

Hi All,

As you can see in the Codepen demo that the hamburger menu is working fine if user clicks on the menu icon. However, what I am looking is to close the burger menu with the same reverse animation if user clicks on any of the hyperlinks before proceeding to the nextpage/link.  Can anyone please let me know how to do it? 

 

menu test (codepen.io)

 

 

 


$('.hamburger').on("click", function(e){
   $('.hamburger.active').not(this).removeClass('active');    
    $(this).toggleClass('active');
});

var $hamburger = $('.hamburger');

gsap.set('.line01',{x:40});  
gsap.set('.line03',{x:-40});
//gsap.set('.navigation',{xPercent:-50, yPercent:-50})
gsap.set('.navigation li',{x:0, opacity:0}); 

var hamburgerMotion = gsap.timeline();
hamburgerMotion.to('.line03',0.4,{x:'-=40'},0)
hamburgerMotion.to('.line01',0.4,{x:'+=40'},0)
hamburgerMotion.to('.menu',0.4,{autoAlpha:1},0)
hamburgerMotion.staggerTo('.navigation li',0.4,{y:-30, opacity:1, ease: "sine.out"},0.2,0.5)
//hamburgerMotion.to('.navigation li',1,{marginBottom:'40px', ease: Power1.easeOut})
hamburgerMotion.from('.getintouch',.8,{y:30, opacity:0, ease: "sine.out"})
hamburgerMotion.reverse();

$hamburger.on('click', function(e) {
  hamburgerMotion.reversed(!hamburgerMotion.reversed());
});


$('.menu-links').on("mouseover", function (e){  
    gsap.to($(this), .4, {x:20, ease: "sine.out"});
})

$('.menu-links').on("mouseout", function (e){  
    gsap.to($(this), .4, {x:0, ease: "sine.out"});
})


$(".hamburger").on("click", function (e) {
  if ($(this).hasClass("active")) {
    $(".cursor-follower").addClass("reverse");
  }
  else {
    $(".cursor-follower").removeClass("reverse");
  }
});

 

 

See the Pen ExQmbGN by bootstrap007 (@bootstrap007) on CodePen

Link to comment
Share on other sites

1 hour ago, bootstrap007 said:

However, what I am looking is to close the burger menu with the same reverse animation if user clicks on any of the hyperlinks before proceeding to the nextpage/link.

 

You could just call everything you call on click of the hamburger on click of the links, but first thing you would have to prevent the default behaviour of the event and then you would also have to add some logic to delay the changing of the page - but that is nothing we can really help with, as this forum is focussed on GSAP specific questions.

 

 

As a starting point, this might help.

 

https://stackoverflow.com/questions/11510478/click-delay-before-navigating

 

I added an eventCallback onReverseComplete of the timeline there, so the window.location = goTo to does not rely on a timeout but will be called, once the reverse of the timeline is complete. You might have to extend the logic a bit (like make things not be clickable in between etc.)

 

Happy tweening!

 

$('.menu-links').on("click", function (e){  
  
    e.preventDefault()
  
    hamburgerMotion.reversed(!hamburgerMotion.reversed());
    $('.hamburger.active').removeClass('active');    
  
    const goTo = $(this).attr("href");
    hamburgerMotion.eventCallback('onReverseComplete', () => { window.location = goTo })
  
})

 

See the Pen ZErKxEP by akapowl (@akapowl) on CodePen

 

  • Like 3
  • Thanks 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...