Series: Animations with Liquid FIre

Liquid Fire-Animating Transitions

Published on Mar 02, 2016

In the real world things don’t flash in and out of existence, but that is the de facto way of displaying changes in a web app. liquid-fire can help give you more natural transitions.

In this episode we go over how to get started with liquid-fire, how to set your first animations with your transition map, and how to use the liquid-outlet helper in order to animate transitions between different routes.


Links

Code

Ember 1.13+: ember install liquid-fire (previous versions check here)

Use {{liquid-outlet}} instead of {{outlet}}.

//app/transitions.js
export default function(){
  this.transition(
    this.fromRoute('monsters.index'),
    this.use('toRight'),
    this.reverse('toLeft')
  );
  this.transition(
    this.fromRoute('monsters.monster.show'),
    this.toRoute('monsters.monster.edit'),
    this.use('toUp'),
    this.reverse('toDown')
  )
}

Transcript

Hey and welcome back. In the last few episodes we made this really cool CRUD app, but when we click these buttons when we transfer, things just flash instantaneously. But that’s not how stuff works in the real world.

Using Liquid Fire which is an animation library that’s very well-integrated with Ember, we’re able to more closely approximate how things would feel in the real world when we’re interacting with them.

So we can get started by installing the liquid-fire add-on. If you’re on Ember 1.13 or above, you can do it just as easily as that. If you’re on one of the older versions, then you'll have to make sure that you get the correct liquid-fire release.

So after you install it, the first thing you do is you go to your app folder and you create a new file called transitions.js. Now this is what they call the transition map. So you’re going to export a function, and in this function you’re going to create transitions. So we call this.transition, and then we’re going to give transition a series of arguments. And it’s interesting that these arguments, it doesn’t really matter what order they go in, as long as you give certain arguments.

So here we’re going to give the fromRoute argument. So if we’re coming from this route, then it’s going to show a certain transition. So we’re going to use the monsters.index route. And if we’re coming from that route, we’re going to use the toRight transition.

So we’re going to look at how this works in just a second, but to make it work we’re going to have to give us a liquid-outlet. So this is going to put in the machinery that will let these transitions do their work.

So starting on the monsters index and you click this, notice how it zoomed in from the left to the right. We’ll see that again. Pretty cool, right?

But there’s more. We can decide what to do when we’re going from another route to the monsters.index route by calling reverse. And here we’ll say toLeft. So it’s basically reversing whatever selection there was, in this case, fromRoute.

So... yup, now it’s going to the left. And this feels more natural, because it’s like we have a little file cabinet of monsters and we’re putting them in and taking them out again.

Next we’ll tackle the transition between the show page and the edit page. So we want some sort of transition instead of this jump. Now there’s not something that’s quite as elegant as this left-right that we have going on with the index, but we’ll put something in there.

So we create another transition, and we have the fromRoute which is monsters.monster.show, and here we’ll also have a toRoute, so monsters.monster.edit. And so it’s only going to do this transition when it’s going from the showRoute to the editRoute in the reverse.

So we’ll go toUp, and then toDown. So when we’re going from show to edit, it’s going to slide up and when we’re going the opposite, it will slide down.

So let’s see this in action. We’ll hit ‘Edit Monster’, and uh-oh, it seems to not be working. And there’s a reason for this. So it’s not being nested directly under this liquid-outlet in monsters, because it’s in monsters.monster.show, here’s what’s being auto-generated for us.

So this was what was there before. It was just being generated at runtime, and of course we don’t want an outlet. We want a liquid-outlet. And so with our liquid-outlet, now it’s going to be working.

So this is just the beginning of learning how to use Liquid Fire. In the next episode, we’re going to be going over more of the template helpers so that we can use it in more situations than just transitioning between routes. And then in later episodes, we’ll go over things like different matching and how to create your own transitions or do exploding transitions. I’ll see you then.

Animations with Liquid FIre

Subscribe to our mailing list