Overwrite Tween modes

[shunryu111]

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

 

http://jsfiddle.net/ninjabonsai/WPczm/

 

cheers

[Carl]

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)

http://jsfiddle.net/geekambassador/tgPZj/

 

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.

[Rodrigo]

Hi,

 

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.

 

Cheers,

Rodrigo.

[shunryu111]

thanks Carl.. both of those examples i found very useful