Ember.js Cookbook

Using Liquid Fire to create transitions

Ember Liquid Fire is an add-on for Ember that handles animations and transitions. It's a toolkit of sorts that splits its responsibilities between template headers, transition maps, and transitions.

In this recipe, we'll create a few transitions to see how this add-on works.

How to do it...

1. In a new Ember application, generate these files:

   $ ember g route tut1
   $ ember g route tut2
   $ ember g template index
   $ ember install liquid-fire
   

   This will generate the scaffolding for the tut1 and tut2 routes as well as install the liquid-fire add-on.

2. Create a new transitions.js file in the root of the app folder. Add a few transitions:

   // app/transitions.js export default function(){ this.transition( this.fromRoute('tut1'), ...