This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

AngularJS Architecture: Animate state transitions with ui-router

3:46 Angular 1.x lesson by

In this lesson, we are going to learn how easy it is to animate ui-router state changes using ngAnimate and about 10 lines of CSS.

Get the Code Now
click to level up comment guidelines


In this lesson, we are going to learn how easy it is to animate ui-router state changes using ngAnimate and about 10 lines of CSS.

Rob Walsh

Say for example I have a site with three states and I need completely different animations for each ui-router state change ( on enter and leave) and I don't want to use css - I want to use gsap for this for more control? Is this doable?

In reply to

Did you figure out how to do this?

In reply to Rob Walsh

It is but there are a few moving parts. Let me put together a blog post and shoot a video for it. Stay tuned!

In reply to David

@Lukas did you have chance to shoot this video for the blog. Would be really interested :). Thanks!

In reply to Lukas

@Tim, we haven't but we are putting it in the queue shortly. Stay tuned!

In reply to Tim

In this lesson, I am going to show you how to animate the state changes in ui-router using ngAnimate. The first thing we need to do is add in the ngAnimate submodule resource because it's not a part of core. We'll just add the JS resource into our index.html.

Then we'll hop into our main application file here and add in the ngAnimate submodule. Then we will put our animations in the animations.css file. How this works is we'll define our base animation using this syntax here. We'll go, "[ui-view].ng-enter, [ui-view].ng-leave."

We're going to set position to absolute. We will set left to zero. We'll set right to zero. I'm just going to paste this in because I don't really feel like typing it. We're going to create a transition of all properties for half a second using ease-in-out tweening.

Now we've defined the base transition. We need to define an animation or transition from when a ui-view state is initiated to when it is actively applied. Just copy this. We'll go, "ng-enter." We'll start with opacity of zero.

Then we'll just copy this. When this state is actively applied or essentially the finished state or completed state of this, we want opacity to be one. What we are going to do now is just copy this. We're going to reverse it.

We'll go, "ng-leave." When ng-leave is initiated, we're going to set the property, and then, when it's actively applied, we'll set it to something else. In this case, we want it to go from full opacity to zero opacity.

What we've done is we've defined our base transition using this "[ui-view].ng-enter, [ui-view].ng-leave." Then we've defined the enter and enter active states of opacity zero, opacity one. Then we've done the reverse for ng-leave.

Let's hop into the browser and see this in action. Refresh the page. You can see that now things are starting to actually really transition in quite nicely. We were able to do that by just adding the ngAnimate code or submodule into our code and then defining these few simple states using CSS.

I love the ng animations. I think it just really gives an application an one-up in terms of the user experience. They're super-easy to add. It just makes it look really nice. Thank you for checking out this lesson. I'll see you next time.

Joel's Head
Why are we asking?