Forums

  • # February 27, 2013 at 10:21 pm

    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.

    # February 28, 2013 at 10:15 am

    @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.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag