Jump to content
Search Community

Multiple relative tweens same property of object not working.

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

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?

See the Pen vLeCg by anon (@anon) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Unfortunately there's no way to keep two different instance's tweening the same property of the same object at the same time. The overwrite manager, as you already found out, gives control of the object and the property to the last instance invoked. Is not a bug, is made by design.

 

I remember there's an old post when Jack gives a very detailed explanation of why things work like this in GSAP, is one of the many optimizations that made the engine super fast, but unfortunately I can't find that thread (men I miss the search filters!!), but if I'm not mistaken I believe this has to do with the fact that doing read/write back and forth between two instances is hardly recommended. Think about it like this, the first instance start tweening the value, then it keeps doing that until the second instance starts and tween the value as you indicated. So while one is increasing it the other one is decreasing it and you go like that. In that scenario each instance has to read the current value and modify it, but that current value is changing 60 TIMES PER SECOND  :shock:. To avoid this read/write mayhem GSAP creates a lookup table that stores the object and property being tweened and if any other instance referencing the same object and property starts, gives control of both to that one.

 

Again this is my idea of why this works like that based on what I read over time, the final word will come from our animation Zen Masters  :ph34r:.

 

Finally a workaround would be to create another property in the object with the same value and through an onUpdate callback and some math you could make the two values compete, but keep in mind that the value stored by GSAP won't change, so that's when you'll need the math part to update the value properly.

  • Like 1
Link to comment
Share on other sites

Yep, Rodrigo is pretty much dead-on. GSAP is highly optimized for speed, and there are several problems with implementing your suggestion:

  1. Reading the property on every frame would cause layout thrashing which is demonstrated here: http://codepen.io/GreenSock/pen/16438623257ec198107d561a9456e95d?editors=001 and we also write about it here: http://greensock.com/gsap-1-12-0. It could SEVERELY impact performance. The way GSAP currently works is that when it renders for the first time, it captures the starting and ending values and then interpolates between them on every frame. If it had to re-read the property each render, and re-calculate relative values I'd guess it'd cut performance by several orders of magnitude. 
  2. Typically when two tweens are trying to control the same property of the same element, there's a genuine conflict and the developer doesn't intend for the effects to be combined. Think of a button that the user rolls over/off/over/off quickly, and each generates a tween of the button's scale. Those should overwrite each other, not get combined. 
  3. You couldn't effectively reverse tweens if their values are constantly getting influenced by others (at least they may not look the same in reverse)

You can do pretty much whatever you want, though, using an onUpdate as Rodrigo suggested. So if that's the effect you're after, and you're willing to pay the performance price, go for it. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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:

 

 (using TweenLite's onUpdate function)

See the Pen KaJiw by anon (@anon) on CodePen

(using native Object setters and getters)

  • Like 2
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.
×
×
  • Create New...