Animating children directly or parent container element.

[Daniel Park]

Let's say we have a div that contains two child elements. If we wanted to animate the opacity from 0 => 1, and also the top property from 50 => 0. Is it more efficient to just animate the parent div element or animate each of the children directly?

 

Some thoughts on this and why?

[Sahil]

I don't think it would make any significant difference, generally animating fewer elements is better. So animating single parent element will be a lot more efficient if you have too many child elements.

 

Also, instead of animating top or left you should animate x and y whenever possible. Animating top, left causes browser to repaint layout which can give poor performance of you have a lot of things animating. 

[Daniel Park]

Interesting, that's the same thought process I had.

Yeah I'm using a transform: translateY(100px) instead of the top property. Made the change after inspecting performance in the browser. Cheers!

[Black Ducas]

Hi, just a variation on this question. Say I've this code and I need to animate the title "Title"

 

<section>
  <header>
    <div class="container">
      <h1>Title</h1>
    </div>
  </header>
  <div class="container">
    Content...
  </div>
</section>

Is it more efficient apply the animation on <header> tag or <h1> tag?

Consider that the element could be much more nested than that.

[OSUblake]

It's really not going to matter one way or the other. I wouldn't put much thought into micro-optimizing for performance unless you notice a problem. I see people waste a lot of time worrying about stuff that will never matter in the real world.

 

They key to animation performance is to be mindful of what properties you are animating. Some properties perform better than others, like x, y, and scale vs left, top, and width/height. And the type of object you are animating matters too. So SVG would be slower than an HTML element, and all of those would be slower than canvas/WebGL.