Isotope - animating item sizes

22 Feb 2011 · by David DeSandro

After seeing a whole animated layout with Isotope or Masonry, you might get the idea to animate one of the item elements. But animating the size of an item element will throw off the layout algorithm. Justin Lascelle ran into this issue: Stack Overflow: Need help reversing a function; reverting an animated expansion of a div..

It's a problem I've faced before, so I put together this screencast to go over the most elegant way to resolve it.

View on Vimeo: Isotope: animating item sizes

Try out the results for yourself on jsFiddle

Metafizzy socks

Metafizzy socks

Now for sale! Rainbow colors, cutie bear face, knit with comfy-soft cotton threads. Makes a great gift. Everyone wears socks.