Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
benmc

Increasing Animation start performance.

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

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!

Link to comment
Share on other sites

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?

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.
×