---
title: Options
category: docs
layout: doc
body_class: option-def
related: a-intro
toc:
- { title: animationEngine, anchor: animationengine }
- { title: animationOptions, anchor: animationoptions }
- { title: containerClass, anchor: containerclass }
- { title: filter, anchor: filter }
- { title: getSortData, anchor: getsortdata }
- { title: hiddenClass, anchor: hiddenclass }
- { title: hiddenStyle, anchor: hiddenstyle }
- { title: itemClass, anchor: itemclass }
- { title: itemSelector, anchor: itemselector }
- { title: layoutMode, anchor: layoutmode }
- { title: resizable, anchor: resizable }
- { title: resizesContainer, anchor: resizescontainer }
- { title: sortAscending, anchor: sortascending }
- { title: sortBy, anchor: sortby }
- { title: transformsEnabled, anchor: transformsenabled }
- { title: visibleStyle, anchor: visiblestyle }
- { title: Layout-specific options, anchor: layoutspecific_options }
---
## animationEngine
animationEngine- String
'best-available'
Determines the jQuery method to apply styles, `.css()` or `.animate()`. Useful for relying on CSS transitions to handle animation.
### Values {#animationEngine-values}
+ `'best-available'`: if browser supports CSS transitions, Isotope uses `.css()`. If not, falls back to using `.animate()`.
+ `'css'`: Isotope uses `.css()`
+ `'jquery'`: Isotope uses `.animate()`
## animationOptions
animationOptions- Object
{ queue: false, duration: 800 }
When jQuery is the animation engine, these options will be used in .animate(). See the [jQuery API for animate options](http://api.jquery.com/animate/#animate-properties-options) for details.
### Example
{% highlight javascript %}
$('#container').isotope({
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
{% endhighlight %}
## containerClass
containerClass- String
'isotope'
The class applied to the container element.
## filter
filter- Selector
Setting a filter with show item elements that match the selector, and hide elements that do not match. See [docs on filering](filtering.html) for more details.
[**See Demo: Filtering**](../demos/filtering.html)
### Values {#filter-values}
+ `'*'` Shows all item elements
## getSortData
getSortData- Object
An object containing one or several methods to retrieve data for Sorting. The methods receive one parameter (`$elem` in the example below) which is a jQuery object representing each item element. The methods need to return a value. See [docs on sorting](sorting.html) for more details.
[**See Demo: Sorting**](../demos/sorting.html)
### Example
{% highlight javascript %}
$('#container').isotope({
getSortData : {
symbol : function( $elem ) {
return $elem.attr('data-symbol');
},
number : function( $elem ) {
return parseInt( $elem.find('.number').text(), 10 );
},
name : function ( $elem ) {
return $elem.find('.name').text();
}
}
});
{% endhighlight %}
## hiddenClass
hiddenClass- String
'isotope-hidden'
The class applied to item elements hidden by Filtering.
## hiddenStyle
hiddenStyle- Object
{ opacity : 0, scale : 0.001 }
The style applied to item elements hidden by Filtering.
## itemClass
itemClass- String
'isotope-item'
The class applied to item elements.
## itemSelector
itemSelector- Selector
Restricts Isotope item elements to selector.
## layoutMode
layoutMode- String
'masonry'
See also docs on [Layout modes](layout-modes.html).
[**See Demo: Layout modes**](../demos/layout-modes.html)
## resizable
resizable- Boolean
true
Triggers layout logic when browser window is resized.
## resizesContainer
resizesContainer- Boolean
true
Isotope will set the height (for vertical layout modes) or width (for horizontal layout modes) of the container after layout. If `resizesContainer` is set to false, be sure to set a size for the container in your CSS, so it doesn't collapse when Isotope is triggered.
## sortAscending
sortAscending- Boolean
true
Used with sorting. If true, items are sorted ascending: "1, 2, 3" or "A, B, C...". If false, items are sorted descending "Z, Y, X" or "9, 8, 7...". See [docs on sorting](sorting.html) for more details.
[**See Demo: Sorting**](../demos/sorting.html)
## sortBy
sortBy- String
The property name of the method within the `getSortData` option to sort item elements. See [docs on sorting](sorting.html) for more details.
[**See Demo: Sorting**](../demos/sorting.html)
### Values {#sortBy-values}
+ `'original-order'` Sorts item elements by their original order.
## transformsEnabled
transformsEnabled- Boolean
true
Isotope uses CSS3 transform to position item elements, when available in the browser. Setting `transformsEnabled` to false will disable this feature so all browsers use top/left absolute positioning.
### Additional CSS {#transformsEnabled-css}
If you do disable transforms, but still want to use [CSS transitions](animating.html#css_transitions), you'll need add the following CSS:
{% highlight css %}
.isotope .isotope-item {
-webkit-transition-property: top, left, opacity;
-moz-transition-property: top, left, opacity;
transition-property: top, left, opacity;
}
{% endhighlight %}
## visibleStyle
visibleStyle- Object
{ opacity : 1, scale : 1 }
The style applied to item elements made visible by Filtering.
## Layout-specific options
In addition the general options listed above, certain layout modes each have their own options. In order to avoid conflict, these options are set with an option that matches the name of the layout mode.
See docs on [layout modes](layout-modes.html) for each layout mode's available options.
For example, if your layout switched from `masonry` to `cellsByRow`:
{% highlight javascript %}
$('#container').isotope({
masonry: {
columnWidth: 120
},
cellsByRow: {
columnWidth: 220,
rowHeight: 220
}
});
{% endhighlight %}
[**See Demo: Layout modes**](../demos/layout-modes.html)