Jump to content
Search Community

Performance with nested elements

Climber 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

Back in the Flash days, animating a bitmap or sprite would yield better fps/performance than a movieclip. I'm curious if this translates to JavaScript as well. For example, do you get better performance animating an img directly vs animating a div that contains an img?

 

Both anecdotal and technical replies would be greatly appreciated. Thanks!

Link to comment
Share on other sites

Hi,

 

There are quite a few things that has to be considered regarding this issue. I'll just throw some of them that come to my mind right now:

  1. Image size, both dimensions and KB.
  2. Solid JPG or transparent PNG. If it is a PNG with shadows and filters or not.
  3. Type of animation, this will be more related with the previous point because if the image has some transparency and/or filters and if you plan on doing some complex animations this could be an issue.
  4. Animation duration. This is by far the most important thing when it comes to moving things around. A long animation could create some jittering, but this has to do mainly with the browser. Nothing GSAP can do about it, is the nature of the beast, so to speak. Whereas a short animation will perform far better.

Also check the following posts, there's a lot of discussion on the subject and some great examples as well:

 

http://greensock.com/forums/topic/9319-animating-a-div-img-vs-background-image/

 

http://greensock.com/forums/topic/9419-jumpy-scaling-in-ie/

 

http://greensock.com/forums/topic/9249-jittery-animation-with-slow-moving-images/

 

Finally the best approach is to test and see what results you get on each case and based on that make a decision on the best result.

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

If you're moving lots of pixels, you should really check out using something like PixiJS. It can leverage WebGL and canvas which can be insanely fast for that type of thing. The down side, of course, is that you lose accessibility and all the great layout magic that HTML/CSS provide (and forms interaction, etc.). GSAP is the same either way - it should work great for you. 

  • Like 1
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...