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

Hi guys, I'm developing a GWD banner with a custom carousel using GSAP. I followed this simple example http://codepen.io/bassta/pen/LckBh 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; } };