tween overwriting for carousel animation

[ebuilders]

Hi guys, I'm developing a GWD banner with a custom carousel using GSAP. I followed this simple example  by Chrysto.

 

I added "prev" and "next" buttons. Sliding takes 0.5 sec for 300px of each slide, but the thing is: if user is super quick and clicks "next" button faster then .5 sec in a row, he ends up in between the slides. Because each click overwrites previous one. I tried to shorten the animation time to 0.1sec, but client wants the slide animation to be long and smooth. 

 

I tried to play with overwriting modes, but seems that it is only about killing existing animations, not keeping user from creating new ones.

var current_product = 0;
var products = ["product1", "product2", "product3", "product4"];

gwd.auto_Next_Arrow_tapareaAction = function(event) {
var product_image = document.getElementById("product_picture");

if (current_product < products.length - 1) {
    current_product++;
    TweenLite.to(product_image, .5, {
              left: "-=300px",
              overwrite: "none",
              ease: Quad.easeOut
     });
     } else {
     TweenLite.to(product_image, .5, {
              left: "0px",
              overwrite: "none",
              ease: Quad.easeOut
     });
     current_product = 0;
   }
};

See the Pen LckBh by bassta (@bassta) on CodePen

[Jonathan]

Hello and Welcome to the GreenSock forum!

 

Here is another image slider with infinite loop and easy way to control slide animation duration

 

See the Pen qxsfc by jonathan (@jonathan) on CodePen

 

[ebuilders]

Thank you Jonathan, but I didnt want to re-write all the carousel for this.

 

Actually, I found the way out in the documentation - the condition that checks if the object is tweeneing at the moment.

if (!TweenMax.isTweening(your_array)) {} 

So carousel works and it looks like this. Maybe someone else will find it helpful.

gwd.auto_Next_Arrow_tapareaAction = function(event) {var product_slides = document.getElementById("product_slides");
          if (current_product < product_images_array.length - 1) {
            if (!TweenMax.isTweening(product_slides)) {
              current_product++;
              console.log("Free to move, curent product: " + current_product);
              TweenLite.to(product_slides, .5, {
                left: "-=300px",
                ease: Quad.easeOut
              });
            } else {
              console.log("Stoped the move");
            }
          } else {
            if (!TweenMax.isTweening(product_slides)) {
           
              TweenLite.to(product_slides, 0.5, {
                left: "0px",
                delay: 0.5,
                ease: Quad.easeOut
              });
              current_product = 0;
              console.log("Free to move, curent product: " + current_product);
            } else {
              console.log("Stoped the move");
            }
          }
        };

[Jonathan]

Thanks for sharing!