We have already noticed that Masonry is responsive while resizing the browser window and rearranges the elements according to the width of the container. By default, Masonry has built-in support for animation using standard jQuery animations.
In the code bundle for this book, open the 4-jquery-animation.html file in your preferred text editor to follow along.
Start with the standard Masonry CSS code.
<style> .masonry-item { background: #FFA500; float: left; margin: 5px; padding: 5px; width: 80px; } </style>Build the standard Masonry HTML structure and add as many Masonry items as necessary.
<div id='masonry-container'> <div class='masonry-item '> Maecenas faucibus mollis interdum. </div> <div class='masonry-item '> Maecenas faucibus mollis interdum. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. </div> <div class='masonry-item '> Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. </div> </div>Add the standard Masonry script and then add the
isAnimatedoption and set it totrue.<script> $(function() { $('#masonry-container').masonry({ itemSelector : '.masonry-item', isAnimated: true }); }); </script>
By setting the isAnimated option to true, Masonry will automatically animate rearrangements using the built-in jQuery support. Now if we manipulate the width of the container by shrinking the browser window, we can see the animation in action.
The following screenshot was taken while the animation was happening:
We can include additional jQuery animation options using the animationOptions option. Some of the options include duration, easing, queue, specialEasing, step, and complete. Additional documentation for these options can be found in the jQuery documentation on the official jQuery website at http://api.jquery.com/animate. Some of these options can also be extended by using additional jQuery plugins.
<script>
$(function() {
$('#masonry-container').masonry({
itemSelector : '.masonry-item',
isAnimated: true,
animationOptions: {
duration: 500,
easing: 'swing'
}
});
});
</script>