Jump to content

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

Animating children directly or parent container element.

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 3
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

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.