No transition when using ember liquid fire

I have an ember project and I have install ember liquid fire for transitions when switching routes.

Ember liquid fire

So its installed and I have made 3 routes in my router.js

Router.map(function()
{
    this.route('home', {path: '/'});
    this.route('home');
    this.route('history');
    this.route('projects');
});

After installing, a transitions.js file has appeared, so I put 2 transitions in there like the documentation says to do

export default function()
{
    this.transition(
        this.fromRoute('home'),
        this.toRoute('history'),
        this.use('toLeft'),
        this.reverse('toRight')
    );

    this.transition(
        this.fromRoute('history'),
        this.toRoute('projects'),
        this.use('toLeft'),
        this.reverse('toRight')
    );
}

Then on each route/page .hbs file I add

<h2 class="test-title"> home page! </h2>
Home
History
Projects

I replace home page with whatever route/ page it is

Then I run and it navigates between pages intantly with no transition. No errors either, im not sure what im doing wrong

Any help is appriciated