Jump to content
Search Community

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

Bona test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

    
    

});

 

Link to comment
Share on other sites

Hi BONA,

 

Welcome to GreenSock Forums.

 

Please have a look to this example: 

See the Pen 62b4dfe92278650f2207ca38903dd82f by osublake (@osublake) on CodePen

The point is the 'animation flag', which handles the switch between the animations: lines 24, 172, 180, 210.

 

Maybe this is helpful for your case.

 

For further questions it would be great if you will use  CodePen to explain and show a reduced example.

 

Kind regards

Mikel

 

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