1 ---

     2 

     3 title: Animating

     4 category: docs

     5 layout: default

     6 toc:

     7   - { title: animationEngine option, anchor: animationengine_option }

     8   - { title: CSS transitions, anchor: css_transitions }

     9   - { title: Variations, anchor: variations }

    10 

    11 ---

    12 

    13 Isotope was developed to take advantage of the best browser features available. For animations, you can use CSS3 transitions and transforms in capable browsers. Isotope provides Javascript animation fall back for lesser browsers.

    14 

    15 

    16 ## animationEngine option

    17 

    18 You can control how Isotope handles animation with the [`animationEngine`](options.html#animationengine) option. This option has three values which control whether jQuery applies styles with`.css()` or `.animate()`.

    19 

    20 + `'best-available'`: if browser supports CSS transitions, Isotope uses `.css()`. If not, falls back to using `.animate()`.

    21 + `'css'`: Isotope uses `.css()`

    22 + `'jquery'`: Isotope uses `.animate()`

    23 

    24 ## CSS transitions

    25 

    26 To enable animation with CSS transitions, you'll need the following code in your CSS:

    27 

    28 {% highlight css %}

    29 

    30 .isotope,

    31 .isotope .isotope-item {

    32   /* change duration value to whatever you like */

    33   -webkit-transition-duration: 0.8s;

    34      -moz-transition-duration: 0.8s;

    35       -ms-transition-duration: 0.8s;

    36        -o-transition-duration: 0.8s;

    37           transition-duration: 0.8s;

    38 }

    39 

    40 .isotope {

    41   -webkit-transition-property: height, width;

    42      -moz-transition-property: height, width;

    43       -ms-transition-property: height, width;

    44        -o-transition-property: height, width;

    45           transition-property: height, width;

    46 }

    47 

    48 .isotope .isotope-item {

    49   -webkit-transition-property: -webkit-transform, opacity;

    50      -moz-transition-property:    -moz-transform, opacity;

    51       -ms-transition-property:     -ms-transform, opacity;

    52        -o-transition-property:      -o-transform, opacity;

    53           transition-property:         transform, opacity;

    54 }

    55 

    56 /**** disabling Isotope CSS3 transitions ****/

    57 

    58 .isotope.no-transition,

    59 .isotope.no-transition .isotope-item,

    60 .isotope .isotope-item.no-transition {

    61   -webkit-transition-duration: 0s;

    62      -moz-transition-duration: 0s;

    63       -ms-transition-duration: 0s;

    64        -o-transition-duration: 0s;

    65           transition-duration: 0s;

    66 }

    67 

    68 {% endhighlight %}

    69 

    70 ## Variations

    71 

    72 With these two options you can finely control how animation is handled across browsers.

    73 

    74 ### Best available (recommended)

    75 

    76 Browsers that support CSS transitions will use them. Other browsers will fall back to using jQuery animation.

    77 

    78 + **Add** CSS transition declarations

    79 

    80 ### Always use jQuery

    81 

    82 All browsers will use jQuery animation, regardless of their CSS transition support.

    83 

    84 + `animationEngine : 'jquery'`

    85 + **No** CSS transition declarations

    86 

    87 Never set `animationEngine : 'jquery'` AND add CSS transition declarations. This will cause double-animation in browser that support CSS transitions — which is a bad thing.

    88 

    89 ### Only CSS transitions

    90 

    91 + `animationEngine: 'css'`

    92 + **Add** CSS transition declarations

    93 

    94 ### None

    95 

    96 Animation is not enabled in any browser

    97 

    98 + `animationEngine : 'css'`

    99 + **No** CSS transition declarations

   100