Smoothly animate elements to fill in empty spaces left by faded out elements

What a long title, but it’s as specific as I could think of.

Here’s why I have right now:

As you can see, when you select a filter option the appropriate images fade out using fadeOut(). However once the fade out animation finishes, the remaining visible images sort of just jump to their new positions. Instead of having this, I want it so they animate and slide into position, similar to how it’s done here:

I tried using CSS3 transitions, but failed since I really have no experience with them. If there’s a solution to using CSS3 transitions to solve this problem, let me know!

Besides that, I tried playing around with different animations instead of the fadeOut() function, such as using animate to “tween” the width and height to 0 which did take away the whole jumping problem, but the animation of the images shrinking to the top didn’t look very cool. If I could get the visible elements to smoothly animate to their new positions along with a fade out or shrink-to-the-center-of-the-image or really anything that looks cool for the removed images, that would be awesome.

I tried some extensive googling, but really couldn’t find a good solution. The solutions I found were too specific to their cases and didn’t really seem relevant to mine. I’m really stuck now so any help or comments would be greatly appreciated!

Yes, that’s some impressive animating there.

It would require creating some custom scripting, to pleasingly show and hide the relevant ones, then to custom animate the remaining images to the positions that they are supposed to be at.

We can help you with the bits and pieces that are likely to be needed to be done to achieve that sort of end-result, but I doubt that you will be lucky enough to find anyone here who will create a perfect solution for you. Not unless they are wanting to exercise their programming muscles to attempt to create an as-good solution.