[SOLVED!!! Newb!e Timelines break when clicked too quickly]

Thank you very much i just inserted an onComplete function with a boolean that checks if animation is complete or not .. works perfectly now

[SOLVED!!! Newb!e Timelines break when clicked too quickly]

Hi am a newbie in web development only 2 months in  and i got inspired when i saw the Nike sbdunk website so i wanted to create something similar, the problem is that when i switch between the different categories (ie. men, women, unisex) too quickly it breaks my code,  pls help.   Here is my javascript.

and i just uploaded to a freewebhost to show this issue https://bucco-cooporations.000webhostapp.com

 

 

// menBtn
menBtn.on("click", function(){
    var unisex = $("#unisex");
    var mens = $("#mens");
    var womens = $("#womens");
    if (mens.css("right") > "0px" & womens.css("top") >= "0px") {

    var menTl = new TimelineMax();
    menTl.to($(".bod"), 1, {backgroundColor:"#cec5b9"})
    .fromTo(womens, 0.6, {top:"0%"}, {top:"-150%", ease:Linear.easeIn}, 0.1)
     .fromTo(mens, 1.2, {right:"300%"}, {right:"0%", ease:Bounce.easeOut}, 0.1);   
}
else if (mens.css("right") > "0px" & unisex.css("left") <= "0px") {
        var menTl = new TimelineMax();
    menTl.to($(".bod"), 1, {backgroundColor:"#cec5b9"})
      .fromTo(unisex, 0.6, {left:"0%"}, {left:"380%", ease:Linear.easeNone}, 0.1)
     .fromTo(mens, 1.2, {right:"300%"}, {right:"0%", ease:Bounce.easeOut}, 0.1);
     
     }

 else if (mens.css("right") > "0px" & womens.css("top") < "0px" & unisex.css("left") > "0px") {
        var mensTl = new TimelineMax();
    mensTl.to($(".bod"), 1, {backgroundColor:"#cec5b9"})
     .fromTo(mens, 1.2, {right:"300%"}, {right:"0%", ease:Bounce.easeOut}, 0.1);
     
     }
    


});
// womenBtn
womenBtn.on("click", function(){
    var unisex = $("#unisex");
    var mens = $("#mens");
    var womens = $("#womens");
    if (womens.css("top") < "0px" & mens.css("right") <= "0px") {
   var womenTl = new TimelineMax();
    womenTl.to($(".bod"), 1, {backgroundColor:"#f4b4b4"})
           .fromTo(mens, 0.6, {right:"0%"}, {right:"300%", ease:Linear.easeOut}, 0.1)
           .fromTo(womens, 1.2, {top:"-150%"}, {top:"0%", ease:Bounce.easeOut}, 0.1);
        

    
}
 else if (womens.css("top") < "0px" & unisex.css("left") <= "0px") {
        var womensTl = new TimelineMax();
    womensTl.to($(".bod"), 1, {backgroundColor:"#f4b4b4"})
      .fromTo(unisex, 0.6, {left:"0%"}, {left:"300%", ease:Linear.easeNone}, 0.1)
     .fromTo(womens, 1.2, {top:"-150%"}, {top:"0%", ease:Bounce.easeOut}, 0.1);
     
     }
      else if (womens.css("top") < "0px" & mens.css("right") > "0px" & unisex.css("left") > "0px") {
        var womensTl = new TimelineMax();
    womensTl.to($(".bod"), 1, {backgroundColor:"#f4b4b4"})
     .fromTo(womens, 1.2, {top:"-150%"}, {top:"0%", ease:Bounce.easeOut}, 0.1);
     
     }

    
    

});
// unisexBtn
unisexBtn.on("click", function(){
    var unisex = $("#unisex");
    var mens = $("#mens");
    var womens = $("#womens");
 if (unisex.css("left") > "0px" & mens.css("right") <= "0px") {
   var unisexTl = new TimelineMax();
    unisexTl.to($(".bod"), 1, {backgroundColor:"#727c86"})
           .fromTo(mens, 0.6, {right:"0%"}, {right:"380%", ease:Linear.easeOut}, 0.1)
           .fromTo(unisex, 1.2, {left:"300%"}, {left:"0%", ease:Bounce.easeOut}, 0.1);
}

 else if (unisex.css("left") > "0px" & womens.css("top") >= "0px") {
        var unisexTl = new TimelineMax();
    unisexTl.to($(".bod"), 1, {backgroundColor:"#727c86"})
     .fromTo(womens, 0.6, {top:"0%"}, {top:"-150%", ease:Linear.easeOut}, 0.1)
     .fromTo(unisex, 1.2, {left:"300%"}, {left:"0%", ease:Bounce.easeOut}, 0.1);
} 
else if (unisex.css("left") > "0px" & womens.css("top") < "0px" & mens.css("right") > "0px") {
        var unisexTl = new TimelineMax();
    unisexTl.to($(".bod"), 1, {backgroundColor:"#727c86"}, 0.1)
            .fromTo(unisex, 1.2, {left:"300%"}, {left:"0%", ease:Bounce.easeOut}, 0.1);     
}

    
    

});