Jump to content


Performance question...

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

Hi guys,


Wanted to ask the experts a performance question...


Say I have 2 divs that I am fading out at the same time. Is it more efficient for the browser to perform the fade on the 2 objects or would it be better to put them in one div and perform the fade on the div?





Link to comment
Share on other sites

I think rendering two divs will be smoother than three div. if you put 2 div inside one div. browser anyway renders 3div. I am just fan not a developer. Test yourself for understand how to improve code.

Link to comment
Share on other sites

Frankly I doubt you'd notice any difference. 


However, technically if you put it in a wrapper div and it is layerized (which can be done by applying a 3D transform, for example), it should force that to the GPU as one layer and then the opacity changes could affect just that layer (thus more performant...but only slightly). This also requires that nothing in the inner-divs is changing/animating (otherwise, it'd have to keep shoving new layer info to the GPU on each tick and make things run slower). 


Does that help?

  • Like 1
Link to comment
Share on other sites

Thanks for the response Jack!


It is hard to notice much of a difference. I am dealing with fairly large image assets so every bit counts...

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.