Ember - liquid fire - transitions.js

I have installed liquid-fire. Set it all up. And it works between 2 files in the templates folder.

transitions.js

export default function(){
  this.transition(
    this.fromRoute('test1'),
    this.toRoute('test2'),

    this.use('toRight'),
    this.reverse('toLeft')
  );
}

router.js

Router.map(function() {

  this.route('test1', function() {});
  this.route('test2', function() {});

});

application.hbs

test1.hbs

<h1>test1</h1>
<br>
 test 2 

test2.hbs

<h1>test2</h1>
<br>
 back to test 1 

This works fine. I get a nice slide effect between the 2 pages.

But when I move test2 into a folder, no matter what I do, the pages link, but there is no nice transition.

I have tried the below code:

transitions.js

export default function(){
  this.transition(
    this.fromRoute('test1'),
    this.toRoute('cakes.test2'),

    this.use('toRight'),
    this.reverse('toLeft')
  );
}

router.js

Router.map(function() {
  this.route('test1', function() {});


    this.route('cakes', function() {
      this.route('test2', function() {});
    });

});

test1.hbs

<h1>test1</h1>
<br>
 test 2 

test2.hbs

<h1>test2</h1>
<br>
 back to test 1 

The pages change, so the link works- and you can visit the url cakes/test2 in the browser also. But there is no nice slide transition.