Bezier Animations: funky with css left/top as percentage?

[beans]

Hi all,

 

I am after an explanation/confirmation if the following is expected behaviour

 

http://jsfiddle.net/4GeQe/7/

 

First run - fine - works as expected

 

Second run - uses it's existing position as base co-ordinates, then just goes haywire.

 

Shouldnt this end up in the same place at the end as it did in the first run?

 

Regards

[jamiejefferson]

Hmm I don't know enough about bezier tweens to understand exactly what behaviour should be expected, but since you are creating a brand new tween each time it is going to produce slightly different results based on #box's current coordinates (try clicking the button during the tween and you will see it jump around as the bezier is recreated). Maybe someone else could chime in here.

 

If all you need is the tween to play identically each time you click the button though, try creating the tween once (keeping a reference to it), and playing it from the start each time: http://jsfiddle.net/4GeQe/10/

[beans]

Appreciate the reply.

 

A new tween each time should be fine - as its using left/top and is absolute positioned, only the start should be different (the end should be a top/left value that is absolute)

 

Unfortunately, there is still some funkyness with percentages.

 

Take this for example:

http://jsfiddle.net/4GeQe/12/

 

It only obeys the unit measurement, but not the percentage measurement. Until the end, when it snaps into position.

[Carl]

Hi Beans,

 

Sorry to hear you are getting unexpected results. Yes, i would think too that the regardless of how the beginning of the tween will be different (depending on where the object is when the tween is re-created) the end position should be the same and the object should animate to that position smoothly.

 

Hold tight, we'll get you a better explanation...

 

-c

[GreenSock]

Yep, we're looking into this - the only thing that looks off is that end position - everything else acted as expected. Stand by...

[GreenSock]

I believe I found the issue - would you mind trying the attached version and letting me know if it works well for you? The issue would only show up when the current value matched exactly the end value of the bezier tween. But again, that should be resolved in the attached version.

 

Also note that this version can do a lot more, like animating 3D transforms (rotationX, rotationY, rotationZ, z, perspective, transformPerspective, etc.) as well as boxShadow, borderRadius, textShadow, and clip (in browsers that support those features). That's why the file size increased, but I think you'll find the improvements to be well worth the extra kb. Anyway, please let me know if these new files work well for you. This revised version is not yet posted for public consumption - you're getting a sneak peak at all these features

updated_2012-11-14.zip