What a long title, but it’s as specific as I could think of.
Here’s why I have right now: http://rosstran.net/test/v0.11/
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: http://www.newmediacampaigns.com/portfolio
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!