Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ebuilders

tween overwriting for carousel animation

Go to solution Solved by ebuilders,

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 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

Link to post
Share on other sites

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

 

:)

Link to post
Share on other sites

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");
            }
          }
        };
Link to post
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.

×