/components/jquery-masonry/_posts/docs/2011-05-04-animating.mdown

 1---
 2
 3title: Animating
 4category: docs
 5layout: default
 6toc:
 7  - { title: jQuery, anchor: jquery }
 8  - { title: CSS transitions, anchor: css_transitions }
 9  - { title: Modernizr, anchor: modernizr }
10
11---
12
13Rearrangements can be animated when the container is resized.
14
15## jQuery
16
17To animate Masonry layout changes with jQuery, set the `isAnimated` option to `true`.
18
19{% highlight javascript %}
20
21$('#container').masonry({
22  // options...
23  isAnimated: true
24});
25
26{% endhighlight %}
27
28[See Demo: Animating with jQuery](../demos/animating-jquery.html).
29
30You can pass in jQuery animation options are set with the [`animationOptions` option](options.html#animationoptions).
31
32{% highlight javascript %}
33
34$('#container').masonry({
35  // options...
36  isAnimated: true,
37  animationOptions: {
38    duration: 750,
39    easing: 'linear',
40    queue: false
41  }
42});
43
44{% endhighlight %}
45
46## CSS transitions
47
48Alternatively, you can rely on CSS3 transitions to animate layout rearrangements. Enabling transitions is recommended, as they provide for better browser performance over jQuery animation.
49
50In 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.
51
52[See Demo: Animating with CSS transitions](../demos/animating-css-transitions.html).
53
54{% highlight css %}
55/**** Transitions ****/
56
57.masonry,
58.masonry .masonry-brick {
59  -webkit-transition-duration: 0.7s;
60     -moz-transition-duration: 0.7s;
61       -o-transition-duration: 0.7s;
62          transition-duration: 0.7s;
63}
64
65.masonry {
66  -webkit-transition-property: height, width;
67     -moz-transition-property: height, width;
68       -o-transition-property: height, width;
69          transition-property: height, width;
70}
71
72.masonry .masonry-brick {
73  -webkit-transition-property: left, right, top;
74     -moz-transition-property: left, right, top;
75       -o-transition-property: left, right, top;
76          transition-property: left, right, top;
77}
78{% endhighlight %}
79
80## Modernizr
81
82To 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.
83
84[See Demo: Animating with Modernizr](../demos/animating-modernizr.html).
85
86{% highlight javascript %}
87
88$('#container').masonry({
89  // options...
90  isAnimated: !Modernizr.csstransitions
91});
92
93{% endhighlight %}