---

title: Animating
category: docs
layout: default
toc:
  - { title: jQuery, anchor: jquery }
  - { title: CSS transitions, anchor: css_transitions }
  - { title: Modernizr, anchor: modernizr }

---

Rearrangements can be animated when the container is resized.

## jQuery

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

{% highlight javascript %}

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

{% endhighlight %}

[See Demo: Animating with jQuery](../demos/animating-jquery.html).

You can pass in jQuery animation options are set with the [`animationOptions` option](options.html#animationoptions).

{% highlight javascript %}

$('#container').masonry({
  // options...
  isAnimated: true,
  animationOptions: {
    duration: 750,
    easing: 'linear',
    queue: false
  }
});

{% endhighlight %}

## 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](../demos/animating-css-transitions.html).

{% highlight css %}
/**** 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;
}
{% endhighlight %}

## Modernizr

To get the best of both worlds, you can use [Modernizr](http://www.modernizr.com/) 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](../demos/animating-modernizr.html).

{% highlight javascript %}

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

{% endhighlight %}