Increasing Animation start performance.

[benmc]

In my Tweenlite (1.16.1) animations, I am seeing a few dropped frames at the very beginning of the animation.

 

I am ensuring the tween is starting on a new animation frame... so in theory, all the JS/Layout/Paint to create the element should be completed before I start the animation. I am also seeing that is the case in the Chrome dev tools profiler.

 

Is there a setting on Tweenlite that doesn't start the animation or the clock until the CPU spike is gone? I am checked out lagSmoothing(), but that just smooths out the gap. I actually want the animation to wait.

 

Any thoughts?

 

Thank you!

[Carl]

I would definitely experiment with lagSmoothing() first. 

 

It is possible in some cases that the act of offloading some elements to the GPU may impact performance.

Historically to get the benefits of hardware acceleration you would have to set a force3D property on every tween.

As of 1.15.0, force3D defaults to "auto" mode which means transforms are automatically optimized for speed by using matrix3d() instead of matrix(), or translate3d() instead of translate(). This typically results in the browser putting that element onto its own compositor layer, making animation updates more efficient. In "auto" mode, GSAP will automatically switch back to 2D when the tween is done (if 3D isn't necessary) to free up more GPU memory. If you'd prefer to keep it in 3D mode, you can set force3D:true. Or, to stay in 2D mode whenever possible, set force3D:false

 

To globally turn off automatic hardware acceleration use 

CSSPlugin.defaultForce3D = false 

in your code before any tweens. Any different?