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

Refactor t-shirt

Refactor shirt

You know what’s truly metal? Nicely encapsulated code with human-readable comments.

Printed on super-soft Black Tri-blend. Women's sizes available.