GSAP hamburger menu should close if user clicks on hyperlinks

[bootstrap007 6 Likes (Newbie)]

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

[akapowl 4,623 Likes (Superhero)]

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

 

[bootstrap007 6 Likes (Newbie)]

Thanks, @akapowl this is exactly what I am looking for. 👍