Continuing Education

No Title

Animating · jQuery Masonry

jQuery Masonry

Docs

Demos

Animating

Rearrangements can be animated when the container is resized.

jQuery

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

$('#container').masonry({
// options...
isAnimated: true
});

See Demo: Animating with jQuery.

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

$('#container').masonry({
// 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 .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;
}

Modernizr

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.

$('#container').masonry({
// options...
isAnimated: !Modernizr.csstransitions
});

jQuery Masonry by David DeSandro