add-remove items and css3 animation

[cparliaros]

I am not sure how accurate the title is or if this discussion is css or javascript category. But what I want to do is when you remove an item from a container the gap is filled from the rest items, I want that to happen smoothly some css3 animation as have be done in isotope plugin [here](http://isotope.metafizzy.co/demos/removing.html “”). The same when, but least important when you add an item as you can see [here](http://isotope.metafizzy.co/demos/adding-important important important “”). Also look really nice on the sorting here but I guess the idea behind of all of them is the same. I have build a simple[ jsFiddle](http://jsfiddle.net/cparliaros/nB2zt/1/ “”) project where you can add and remove item, what missing is the animation. Any ideas?

p.s. I dont want to use isotope plugin just for that.

EDIT: looking the isotope code, they seems that they use translate css3 fuctionality but i cant simplify that part of their code.

[cparliaros]

@CrocoDillon thanks for the reply, I actually found the same solution my self last night but is incomplete because only the items on the same row are slide the rest just jump to the next position. I think as you said there is no easy way to do that, I found a plugin, [quicksand](http://razorjack.net/quicksand/ “”), which does exactly that and as I was looking on the code I realized that you have to convert the relative position of items to absolute and then moving them by keeping track of old and new positions.

p.s. I builded a nice live search for the iMDb, it looks nice but is not done yet. On the other post I will give a link later.

[Author]

Posts