diff --git a/_posts/docs/2010-12-09-animating.mdown b/_posts/docs/2010-12-09-animating.mdown new file mode 100644 index 0000000..f6ffe49 --- /dev/null +++ b/_posts/docs/2010-12-09-animating.mdown @@ -0,0 +1,77 @@ +--- + +title: Animating +category: docs +layout: doc + +--- + +Isotope was developed to take advantage of the best browser features available. + + +## animationEngine + +You can control how Isotope handles animation with the `animationEngine` option. This option has three values which control which jQuery method `.css()` or `.animate()` is used to apply styles. + ++ `'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()` + +## CSS transitions + +To enable animation with CSS transitions, you'll need the following code in your CSS: + +{% highlight css %} + +.isotope, +.isotope .isotope-item { + -webkit-transition-duration: 0.8s; + -moz-transition-duration: 0.8s; + transition-duration: 0.8s; +} + +.isotope { + -webkit-transition-property: height, width; + -moz-transition-property: height, width; + transition-property: height, width; +} + +.isotope .isotope-item { + -webkit-transition-property: -webkit-transform, opacity; + -moz-transition-property: -moz-transform, opacity; + transition-property: transform, opacity; +} + +{% endhighlight %} + +## Variations + +With these two options you can finely control how animation is handled across browsers. + +### Best available (recommended) + +Browsers that support CSS transitions will use them. Other browsers will fall back to using jQuery animation. + ++ **Add** CSS transition declarations + +### Always use jQuery + +All browsers will use jQuery animation, regardless of their CSS transition support. + ++ `animationEngine : 'jquery'` ++ **No** CSS transition declarations + +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. + +### Only CSS transitions + ++ `animationEngine: 'css'` ++ **Add** CSS transition declarations + +### None + +Animation is not enabled in any browser + ++ `animationEngine : 'css'` ++ **No** CSS transition declarations +