animinclojurescript

## How I do animations with ClojureScript/Om.

At yesterdays Clojure meetup Jack, the creator of the ClojureScript pixel editor Goya, asked me how I did my animations in my [ClojureScript app (desktop chrome only)](http://development.muuuuu.divshot.io) and what makes them so performant. Because I'm getting this question more often I decided to dedicate a blog post to it.

So, how do I do animations? My main answer is '90% with a bag of css tricks'. Unless you're making it really bold, like the guys of famo.us do, most of your animations are possible with just simple plain css. 

Let me share two quick css tricks to make it a bit more understandable.

Using the ```transition``` property you can simply make an animation of specific (or all) properties of an element.
```div {transition: all 0.3s ease-in-out;} ``` (don't forget the browser prefixes!)

Some CSS elements are hardware accelerated. The ```transform: translate3d(x,y,z)``` property for example, which you can use to change the position of the element. Very useful for layouting; I'm using this one a lot for sliding of panels for example.

[Here](http://codepen.io/jellea/pen/seBvf) is a demo of a combination of the two creating a sliding panel.

I try to keep animations as much as possible out of my ClojureScript code. I tend to make full advantage of CSS's pseudo selectors as much as possible. For example hovers are super useful (desktop only, though) in combination with the siblings (~ or +, read about difference [here](http://css-tricks.com/child-and-sibling-selectors/)) selector. But if there's really no way to directly interact from css, for example when the trigger comes from ClojureScript, I use classes. So, make up all the properties in css, give it a class name and append the class name from within ClojureScript when triggered. See example below.

If the values in the css properties need to be more flexible you can resort to inline css, but please keep the other properties as much as possible in your css files (transitions included.)

Some [Sablono](https://github.com/r0man/sablono) snippet out of my app which sets class names and inline css on different states. 
```clojure
(html [:li
        {:className (str (if (false? (:bright color)) "bright") " "
                         (if (true? (:unread room)) "unread") " "
                         (if (true? (:inviewport room)) "active"))
         :style  #js {:borderColor (str "#" (:hex color))
                      :backgroundColor (str "#" (:hex color))}}
        [:a title]]))))```