Add animated transitions to elements with "Float:left"

Add animated transitions to elements with "Float:left"


I have a webpage that is full of a grid of elements of the same height and width with float:left. I have buttons to filter elements in the grid, but after objects fade out, when the grid re-aligns itself floating left, the transition is jumpy.

Is there anyway to animate this nicely, maybe have the boxes slide over to the new position? Or cache the position, calculate the new position, and then transition it nicely?

I also have a movable ajax box that positions itself above the grid item that is clicked, and am avoiding something like Masonry because I am having issues with DOM seeing the size of ajax elements.

Thanks. Any help is appreciated.