Ensuring final value is reached

[staff0rd]

In my experiments with TweenLite/TweenMax I believe in some occasions I am able to reach a scenario where the final value of a .to() setting was not reached due to the performance available on the device running the tween.  This is difficult to repro due to (I think) the occurence of this being based on the amount of CPU available at any one time during the tween.

 

What I think is happening (purely speculation, I have checked docs but not source), is that TweenLite/TweenMax will attempt smooth tweens where it can, however when performance is being limited either by the device or too much other stuff going on, the library will essentially "skip" values to ensure the tween stays in sync with the start/end.

 

If this is happening, my question is, is it possible for this "skipping" to occur on the final value?  For example, do I need to do something like this to ensure I always reach the final value, regardless of the performance of the device?

TweenLite.to(myObject, 1, { alpha: 1, onComplete: function() { myObject.alpha = 1; } });

Anecdotally I have seen the completion of a tween where an object was still somewhat transparent, so I'm wondering whether I need to include the onComplete above, or, whether TweenLite/TweenMax is already addressing this and whether my observations were related to something else.

[Jonathan]

Hello staff0rd, and welcome to the GreenSock Forum!

 

You shouldn't have to do that GSAP will reach the final value. A property like alpha which is basically opacity can be pushed to the GPU for smoother animation. You should either use opacity or autoAlpha when animating opacity. You shouldn't have to use the alpha property.

 

autoAlpha is part of the CSSPlugin:

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

• autoAlpha
  Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.

//fade out and set visibility:hidden
TweenLite.to(element, 2, {autoAlpha:0});

//in 2 seconds, fade back in with visibility:visible
TweenLite.to(element, 2, {autoAlpha:1, delay:2});

Also for us to better help you a limited codepen will be useful so we can test your code live. Without a codepen it will be impossible to see what your seeing.

 

 

Other factors on aniamtion performance can depend on what CSS you have or dont have on your elements. As well as the markup in the DOM.

 

Thanks

[staff0rd]

Thanks for your response Jonathan - alpha was just an example, in this scenario I am not tweening CSS.  I'll include a pen at a later date if I i'm able to isolate my findings.  For now I'm happy to know shouldn't need the onComplete for that purpose.