This site is my tutorials, rantings and musings on software development, with a focus on JavaScript, Ember.js, Vue.js and Node.js.

25 Mar 2015

Adding Animations With Liquid Fire And Ember

Liquid Fire is a tool for managing transitions and animations in your Ember applications. It's a popular addon for Ember and since I've never used it before I thought it was be interesting to give it a shot and see how it goes.

Liquid Fire (LF) was created by Edward Faulkner who recently spoke at EmberConf 2015. He goes into a lot more detail about LF and the design behind it so check out the video if you can.

Another resource you can check out is the LF documentation. It's interactive so you can really get an idea on how it works. For this tutorial I'll just be trying out a few animations and show how you get started.

Installing

Liquid Fire is available for any version of Ember. Since Ember 1.11 is not out yet as of this writing we'll go ahead and install the 0.17.0 version.

$ npm install --save-dev liquid-fire@^0.17.0

The master version of the liquid-fire addon breaks older versions of Ember prior to 1.11, so make sure not to accidently install it if you're running 1.10 or earlier. Use 0.17.0 and that should work fine.

Transition Map

There is a few key things you need to do before you can starting adding transitions to your application. One of the most important things is the transition map. This is analogous to your normal Ember router map.

To begin create a transitions.js file in your app folder. For the purpose of this demo we'll just create a simple transition using toRight and toLeft.