CODEWITHSUNDEEP
javascriptjqueryperformancecsstransition
Matt
Matt

Reputation: 828

improving animation performance with css transfrorm

I've been reading a lot recent about optimizing CSS and JavaScript/jQuery for GPU performance, particularly on mobile devices, particularly where the CSS animation changes have a detrimental effect on a websites performance.

I've done some testing and I just can't tell if I've optimized my code correctly for performance.

The base transform animations are for either max-height or the position properties

I've put together a simple codepen to try and show where I am up to and what I am trying to achieve. http://codepen.io/onebitrocket/pen/jFrtf

I've checked the performance timeline in chrome, but I'm not sure if the result is as expected for optimized CSS and jQuery.

Would I see better performance using JavaScript and classList.toggle, instead of jQuery as in the demo, does jQuery prevent optimization of CSS animation?

I'm also seeing several paint events where the layer root it document.

Thanks

Upvotes: 0

Views: 146

Answers (1)

Oscar Paz
Oscar Paz

Reputation: 18292

It is optimised. You're using 3d transforms for translation, which is quick. When the top box moves, the paiting over the links is due to the change in colour and the underline. The movement of the box happens on the GPU and shouldn't affect anything else.

However, animating a width or height property is a different thing. Those are layout properties, so, when they change, the layout of the page changes and it needs to be repainted. In your case, there is nothing after the box, but if you put more elements, they would move up and down when you animate the box size.

Properties in CSS can be divided in three groups:

  1. Layout properties (height, width, position, left, top, font-size, font-family, margin-width, border-width...). Changing any of these properties involves layout, painting and compositing. These are the worse properties to animate. Don't animate them if you can avoid it.
  2. Paint properties (background, color, border-color, ...). These properties affect the aspect of an element. Changing them involves painting and compositing. Cheapier (in system resources) to animate than layout properties, but, again, not ideal.
  3. Compositing properties (transform, opacity). These properties can, generally, be animated without the intervention of the CPU, directly on the GPU so they are the fastest properties to animate.

Of course, every browser is different and they (especially Chrome and Firefox) evolve very quickly, so they are being optimised all the time. What today is slow tomorrow can be quick. There may be cases where animating a property of the first group may be as fast as one of the last group, but as a general rule, it won't.

Upvotes: 1

Related Questions