Everything posted by georeith
Incase anyone else wants to do something similar, I made the examples below to show how this can be done. Note that with this technique there would normally be floating point errors due to the large amount of floating point numbers that get appended. I have added a precision variable which is the number of decimal places you want your number to be accurate to, I have noted that in Chrome this only works for precision values < 15. For this to work you have to use a getter function to read the true value of sway, e.g., getSway(); Examples: http://codepen.io/anon/pen/vLeCg (using TweenLite's onUpdate function) http://codepen.io/anon/pen/KaJiw (using native Object setters and getters)
Thanks guys that's very useful information, I wasn't aware of layout thrashing before either. Unfortunately I must do this, although I'm pretty sure I'll be safe from layout thrashing as I am tweening a plain object's value and applying the DOM writes myself with only an initial read. That number is part of a larger equation I am using to ensure that no matter how many tweens I have running and what stage they are at on sibling elements that their percentage values all take a slice of 100% and never surpass nor fall below it (for an accordion layout where multiple tabs may be opening and closing at once). It tells me what overall percentage of 100% the tweens are at so I can proportion them correctly (e.g. when the number is 1.1 the tweens occupy 110% of the layout and should be reduced by a factor 0.9090...). I am happy to do this myself in an onUpdate, I understand that for most the way GSAP works in this regard is what they would want.
I have an object that is within scope of two tweens. I want to relatively tween a numeric property of this object in both tweens, however the tweens both seem to be making their own internal copy of the object during the tween and overwriting the object. Thus the resulting value of the object is equal to the value of the tween that finishes last and thus gets to overwrite the property the last. See my codepen for an example. How would I make these tweens compete against each other?