Series: Animations with Liquid FIre

Liquid Fire-The Explode Transition

Published on Mar 16, 2016

The explode transition is really cool, and once you learn the syntax it’s easy to use.

In this video we overview the predefined transitions and then build up an explode transition step by step.


Links

Code

// in transitions.js
this.transition(
  this.hasClass('liquid-monster'),
  this.use('explode', {
    pick: '.level',
    use: 'toUp'
  },{
    pickNew: '.name',
    use: 'toRight'
  },{
    pickOld: '.name',
    use: 'toLeft'
  }, {
    use: ['fade', {duration: 500}]
  })
)

Transcript

Over the last few episodes, we’ve gone over all the template helpers and most of the matchers that you can put in the transition map. And so we figured out when and how to trigger our transitions. But what about the transitions themselves?

Well, there are a lot of predefined transitions, and those are ones that we’ve been using. For example there’s left and right and up and down, which are fairly self-explanatory, there’s fade where it fades out and fades back in, crossFade, where it does both of those at the same time. And we’re going to skip these for a second to go to the more easily explainable ones.

There’s scrollThen where you... it goes up and then spins that way, and... basically you put scrollThen before any of the others, and that’s how that one works. And then there’s scale which I don’t recommend. See it right there... yeah.

And then finally of the easily explainable ones, you have wait, which it works a little bit like scrollThen in that it does something and then it does one of the more normal ones. So here first it takes two arguments, wait, which is what we’re going to use first, and then the length of time, and then in the hash it has the then statement which is where you give it what it’s going to do after the wait.

And so we’re going to get to these two in just a second, but before that I want to point out that you can also define your own transition animations, and you can do that using this DSL as well as the animation primitives. And then if you want to get lower level than this, you’re going to have to get into velocity.js. But we’re not going to go over creating our own animations at this time. What we are going to do is use the explode functionality to make things that look pretty custom but without that much work.

So here’s one of the examples. You’ll notice that this header goes up and down while this below just fades. That’s just a small demonstration of what you can do with the explode.

So let’s build up the syntax, step by step. You'll remember that we’re using liquid-bind in order to animate between different monsters. And so the rule we’re using is toRight with the duration of 3000. But let’s change this so it’s using an explode. So what we’re going to do first is we’re going to set a default transition. So notice we’re giving it one hash, and we’ll be giving it multiple hashes later, but we’re giving it a use key, and this will actually be an array. And so we’re just going to give it a fade. So when we change monsters it’s going to fade.

So because there’s no selection here, it’s going to grab everything, everything that matches with this. But here’s where we can start exploding stuff, is when we have multiple hashes. So we’ll have another one here that... we’ll have it toRight. And we’re going to use the pick key in order to grab something. Now here in show, we’ve got... let’s go ahead and grab the name. And then while everything else fades, the name will go off to the right.

So notice the structure here. Here’s the first rule, and we’re selecting it based on the CSS matcher, and everything that matches that, it uses this. And then everything else falls through to the next rule which happens to be a catchall since there’s no selection of rules going on. You can apply this for many, many different rules, as many as you need.

So for the next rule, let’s go ahead and use the level. So we’ll create a new rule hash, and we’ll pick the level, and then we’ll use... we’ll go ahead and do toUp. And we can actually do this with or without the array. So if you don’t want to have any arguments, you can use the non-array form. But if you want arguments, you’ll need the array.

So we’ll see this in action. And we’ve got our name and our level flying off the screen. But what if you don’t want it going out to the right and then coming in from the right? What if you want it going out to the left and then coming in from the right? How can we do that?

Well, so we'll recognize that one of them is the new element and the other is the old element. So the one that we want flying in to the right is the new element, so we’ll use pickNew, and then we’ll copy this, and for pickOld, we’ll go to the left. So notice the old one is flying off to the left, exploding off to the left, and the new one is exploding in to the right. So as we can see, we can set these rules to filter based on... well, for pick it’s going both directions, but for pickNew it’s the one that’s coming in and pickOld the one that’s going out.

There’s also matchBy for pairwise transitions such as fly-to. Here’s an example. It’s exploding with matchBy and fly-to , which is really, really cool.

So that’s it for the explode transition. Once you wrap your head around them, they’re really easy to make and they make your app look really, really cool.

Animations with Liquid FIre

Subscribe to our mailing list