Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Daniel Park

Animating children directly or parent container element.

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

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?

Link to comment
Share on other sites

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. 

  • Like 4
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

  • 3 years later...

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.

Link to comment
Share on other sites

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.

 

 

  • Like 3
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.
×