Continuing Education

No Title

Animating · jQuery Masonry

jQuery Masonry




Rearrangements can be animated when the container is resized.


To animate Masonry layout changes with jQuery, set the isAnimated option to true.

// options...
isAnimated: true

See Demo: Animating with jQuery.

You can pass in jQuery animation options are set with the animationOptions option.

// options...
isAnimated: true,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false

CSS transitions

Alternatively, you can rely on CSS3 transitions to animate layout rearrangements. Enabling transitions is recommended, as they provide for better browser performance over jQuery animation.

In your CSS, add transition styles below. The Masonry plugin will add a class of masonry to the container after the first arrangement so transitions can be applied afterward. Item elements will have a class of masonry-brick added.

See Demo: Animating with CSS transitions.

/**** Transitions ****/

.masonry .masonry-brick {
-webkit-transition-duration: 0.7s;
-moz-transition-duration: 0.7s;
-o-transition-duration: 0.7s;
transition-duration: 0.7s;

.masonry {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;

.masonry .masonry-brick {
-webkit-transition-property: left, right, top;
-moz-transition-property: left, right, top;
-o-transition-property: left, right, top;
transition-property: left, right, top;


To get the best of both worlds, you can use Modernizr to detect browser support for CSS transitions. Add the transitions styles above, then enable animated based on Modernizr’s detected support for transitions. This will allow browsers that support CSS transitions to use them, and browsers without support to use jQuery animation.

See Demo: Animating with Modernizr.

// options...
isAnimated: !Modernizr.csstransitions

jQuery Masonry by David DeSandro