ebuilders
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by 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; } };
tween overwriting for carousel animation
in Banner Animation
Posted
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.
So carousel works and it looks like this. Maybe someone else will find it helpful.