Bona

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

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); } });