Jump to content


Overwrite Tween modes

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

hey.. i'm wondering if any of the overwrite modes complete a currently running tween? eg-


TweenMax.to(box, 0.5, {css:{rotationY:"+=180"}});


if this is called again before it completes the box ends up at what ever angle it was at +180


to prevent this at the moment i'm putting before this tween another one..


TweenMax.to(box, 0, {css:{rotationY:0}});


but i'm hoping there is a cleaner way to do this. here's the full code





Link to comment
Share on other sites

It depends on how you want to handle fast clicks while a tween is in progress. Here are some options:


1) ignore fast clicks and let the current tween play until finished http://jsfiddle.net/geekambassador/Dv2qY/ (if the object is currently tweening, don't make a new tween)


2) increment the end rotationY value by exact 180 increments. (click 4times fast and the end value will be 720)



There may be a better way for option 2 than storing the clickCount in an attribute but I did this quick just to show the concept of keeping track of the clicks and multiplying by 180 to make sure the tween always ends in the right spot.

  • Like 1
Link to comment
Share on other sites



I've been struggling with something like this lately.


The fact is that I'm tweening quite some properties on a click event and the selector changes on every click. It basically goes like this, when the "next" button is clicked it takes the current active element and the following element and assign each one a different tween. If you click the "next" button again it takes the active element (which was the following element before) and the following element and they are tweened. In the same fashion there's a previous button.


The problem is that if you click fast the elements get out of position if a return false is not present while detecting if the element is being tweened. This basically happens with the position properties, ie, left, right, margin left, margin right, x, etc. I've tried using relative and absolute positioning, increasing and decreasing present values with '+=' and '-=' or setting the values directly, and the idea is getting a smooth tween, pretty much like Carl's second fiddle. I also tried to create a timeline with labels in it so when you click a button you just use the tweenTo method to go smoothly to that label and if you click fast it just keeps advancing at the time scale of the timeline. Since the final idea is to create a thumbnail slider with 3D effect (this would be the degraded version of the script) there's a good chance that someone could come up with 20+ images and creating a timeline by hand putting a lot of labels could become quite a chore and use a lot of code which is what I'm trying to avoid.


Here's and example: http://jsfiddle.net/rhernando/Cvs5N/1/ if you click fast the next button and at normal rate the previous button and then refresh the page you will see how the elements get out of position, and if you remove the comments of the return false line on each function you'll get the elements in the right position but not a smooth animation.


Any thoughts will be very appreciated.




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.