Create beautiful 🎨 page transitions with the Angular Router by building four different animation sequences from scratch https://fireship.io/lessons/angular-router-animations/

- Deal Crunch App https://play.google.com/store/apps/details?id=com.jstudio.dealcrunch
- Angular Router https://angular.io/guide/router
- Angular Animations https://angular.io/guide/animations
2024-02-04T06:58:50.487Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
9b82f836-c484-4c54-8ffa-2b6d81b474c0
c0571cb2234bfb9d57804bba6d5e4298bc0758a5d26dea2dff78380149072bba
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
An easy way to make your app more polished is to implement animations between router transitions.
Today's video is a complete guide to router animations in Angular and we'll build 4 different styles that range from a simple Fade into a complex key frame sequence of animations.
If you're new here, like and subscribe, and grab the full source code from Fireship IO.
And before we get started, I wanna give a Shout out to the DealCrunch app, which is a real estate app available on iOS and Android.
It was built by one of our pro members and is a great example of what you can do with Angular and Now, let's first start by looking at the actual animations that we'll build in this video.
The first one is just a simple fade in, which is applied to every single route in the app.
The second animation is a Slide from left to right, and it determines which direction to slide based on data that we pass in through the router configuration.
The third one is slightly more Plex and adds in transformations so we can make the page kind of rotate in from the top corners.
And the 4th and final one uses keyframes to create a sequence of style changes.
For example, the new page comes in from the bottom and bumps the old page off and it spins and scales out of the screen.
I'm starting off here in my Angular 7 app, And you'll notice that I've generated a handful of components here just so we have something to actually route to.
And you don't need to do anything special with these components whatsoever, so we won't even bother looking at them in this video.
Then the other thing we'll do in the app module is import the browser animations module and add it to the imports array.
From there, we'll go into the HTML on the app component and create a main element and then define an animation called route animations.
And then we'll point this to a method called prepare route which we'll define in a second and its job is to determine which animation to apply to a given route.
Now, inside of this element, we'll define our router outlet and then give it a template variable name of outlet as well.
Now, whenever a route changes, we can animate the content inside of the router outlet.
Then you can see above the Outlet, I have my actual navigation bar, so this will stay fixed and not be animated between the route changes.
Now we'll jump into the App Component typescript you'll see that I'm importing these animations which we have not yet defined.
I simply wanna point out that we'll be adding these to the animation property in the component decorator and you can just uncomment whichever animation that you wanna use here.
In our case, we're going to be defining different animations for different routes, so we need to create this prepareRoute method to pass in that dynamic Data.
This is actually taken directly from the Angular docs and it's technically optional if you're only using a single animation for every route.
In that case you could pass the Outlet to the animation directly in the gml.
The last thing we wanna do is go into our router configuration and you'll see we have 3 routes set up each one just pointing to a component.
When we get to our Slide reanimation will need to determine if a component should slide in from the left or slide in from the right.
We can do this by passing in a data attribute and we'll give it a name of animation.
Then we'll define animations named isRight and isLeft.
Now that prepareRoute method that we defined earlier will look for this property and then apply the corresponding animation.
The next thing I'm going to do is create a file called route animations dot ts in the App Directory and then we'll basically import everything under the kitchen sink from Angular animations.
The first animation we'll build is the most basic use case, which is just a standard animation that gets applied to every route change.
Notice we give the trigger a name of route animations That must match what you entered in the HTML.
The next thing we'll do is define a transition, which determines how to apply styles from one animation to the next.
In this case, we're using the star arrow syntax to define a wildcard that will apply to every single route transition.
Angular animations will apply 2 pseudo selectors to the elements We're animating, one called enter and one called leave.
So enter is the new page, leave is the old page.
And query allows us to actually select these elements from the DOM.
So the first step in the transition is to prepare these elements so they can be animated.
To do that effectively, we'll position them as absolute And then we'll also bring the opacity down to 0 and then translate them off the screen and scale them down to 0.
So basically with this step we're just creating a starting point from which we can use is to animate in the new page.
And at the same time, we're immediately hiding the old page.
So Angular animations will apply these steps in the transition one after the other.
So at this point we've styled our elements both to be hidden.
Now we need to animate in the new page.
We can do that by making a query for the enter selector which again is the new page And then we'll animate that in.
But first I wanna point out that I had to go into the style CSS and set the main element to position relative.
This just ensures that you have a consistent Style between the page transitions.
Now back to our animation we've queried for the enter selector then we'll use the animate method to set up the actual transition.
We'll give it a timing of 600 milliseconds with the Ease function.
Then we'll define a style that is basically the end point of the animation.
So from our starting point we'll wanna set the Opacity to 1, scale it to 1 and then set the y axis translation to 0.
So just to recap the entire animation, we start by hiding both the old and new components, then we fade in the new component over the course of 600 milliseconds.
The end result looks like this and the same animation is applied to every route change.
But you'll notice our layout has both a right page and a left page, so there's sort of a concept of position within this layout.
In the next animation, we'll actually take into account the position and do a different animation based on whether or not the component is on the right or the left.
Now I'm defining a function called slide 2 which will allow us to reuse a lot of the same logic for both the left and right transitions.
This animation has multiple transition possibilities and that's based on the dynamic data that we're passing in through the router config.
So any component that transitions to the is left animation will slide to the left.
And conversely, any component going to the right will slide to the right.
Then our middle component doesn't have any animation data defined at all.
So we'll also wanna set up transitions any time that we're going from the is right animation just to any component.
That means that we should be moving to the left, so we'll go ahead and use the slide to the left animation.
And lastly, we'll do the same thing for the opposite.
And now we'll define the actual slide two function.
I'm setting up a variable for optional here because some of these queries will want to be in case the actual leaving component isn't present.
Then just like we did before we'll set up some default styles here.
In this case, we don't wanna actually hide the elements, but we'll just make them positioned salute and at the top of the page.
And then we'll dynamically pass in the direction which can either be right or left.
So those styles are applied to both components, But we want to add an additional style to only the entering component which will offset it in either direction 100% from its sibling component.
At this point we have 2 different components that we want to animate and we want those to happen at the same time which is why we add them to a group otherwise they would happen one after the other.
We can start with the animation for the Leaving component.
In this case, we'll go ahead and animate it 100% off the screen.
So that will move it in the The direction of the starting point from the Entering Component.
Then to animate the Entering Component we'll just go ahead and set its direction to 0% which will put it right in the middle where it's supposed to be.
And you'll also notice that both of the animations have the same timing function.
And the end result is just a smooth sliding animation from left to right.
But Let's go ahead and move on to transition number 3 which is just a variation on this last one but instead uses CSS transforms.
This allows us to achieve that same sliding effect, but we can also do cool things like rotation or scaling or whatever else we wanna add in here.
We'll start with the same basic setup as last time And we'll define triggers that go from left to right.
But this time, you'll notice we're passing in a bunch of named arguments.
So our function will take an x value, a y value, and also a Rotation value.
So my goal here is basically to give you a function that you can configure with your own arguments to create a whole bunch of different crazy animations.
Now Now if we go down to the actual function you can see that I'm using destructuring to add named arguments to this function with default values.
That's just some useful syntactic sugar If you have a single object as an argument that has default values.
Again, we'll start this animation off by styling the enter and leave components.
Then we can define our transformations by simply interpolating values into Strings.
For example, we can add x and y values to translate as percentages And then a rotation value as degrees for rotate.
And you could even extend this with skew and scale or whatever other transformations you wanna use.
Now if we skip ahead here to the animations, they're pretty much identical to the previous example except we're adding the values in here for the transforms instead of the direction.
Now we're going to switch gears and look at a keyframed animation.
Currently, all of our animations use a transition which basically just has a single starting point and ending point.
But in many cases with animations, you have multiple intermediate steps that can't be defined by just a single start and end point.
So let's go ahead and define a new animation that just uses the wildcard to apply the same animation to every route.
Then like every other animation, we'll set the initial position to absolute.
Then we'll also set up a group to run the 2 page animations concurrently.
Then in all the previous examples, we just animated to a single Style.
In this example, we'll use the keyframes function to pass in an array of styles.
You can think of these styles as steps in your animation And you determine where they happen based on the total time by setting an offset value.
So an offset of 0 will apply the style as soon as the animation starts.
We're working with the Entry component we'll go ahead and scale it to 0 and translate it off the page.
Then we'll add a second style with an offset of 0.3 which for a 2 1000 millisecond animation would be 600 milliseconds.
In other words, this style will be applied to the element at 30% of its animation lifecycle.
And we'll finish things up by setting a final style with an offset of 1 which is the end of the animation.
And that will be when the component is fully visible at a scale of 1 and a translate of 0.
Now we'll go down here to the Leave component and try to roughly match the keyframes to the Entering component.
We want to achieve an effect that makes it look like the Entering component bumps The old component off the screen.
We can achieve that by scaling it up to 600% of its original size while at the same time rotating it and fading it out to an opacity of 0.
The end result is this 3 d effect of the pages looking like they're colliding.
Hopefully, this video gave you an idea of what is possible with Angular router animations so you can start building your own beautiful transitions between Pages in your app.
I'm gonna go ahead and wrap things up there.
If this video helped you, please like and subscribe.
And make sure to grab the full source code at Fireship IO.
Thanks for watching and I will talk to you soon.

Speaker 0: An easy way to make your app more polished is to implement animations between router transitions. Today's video is a complete guide to router animations in Angular and we'll build 4 different styles that range from a simple Fade into a complex key frame sequence of animations. If you're new here, like and subscribe, and grab the full source code from Fireship IO. And before we get started, I wanna give a Shout out to the DealCrunch app, which is a real estate app available on iOS and Android. It was built by one of our pro members and is a great example of what you can do with Angular and Now, let's first start by looking at the actual animations that we'll build in this video.

The first one is just a simple fade in, which is applied to every single route in the app. The second animation is a Slide from left to right, and it determines which direction to slide based on data that we pass in through the router configuration. The third one is slightly more Plex and adds in transformations so we can make the page kind of rotate in from the top corners. And the 4th and final one uses keyframes to create a sequence of style changes. For example, the new page comes in from the bottom and bumps the old page off and it spins and scales out of the screen.

I'm starting off here in my Angular 7 app, And you'll notice that I've generated a handful of components here just so we have something to actually route to. And you don't need to do anything special with these components whatsoever, so we won't even bother looking at them in this video. Then the other thing we'll do in the app module is import the browser animations module and add it to the imports array. From there, we'll go into the HTML on the app component and create a main element and then define an animation called route animations. And then we'll point this to a method called prepare route which we'll define in a second and its job is to determine which animation to apply to a given route.

Now, inside of this element, we'll define our router outlet and then give it a template variable name of outlet as well. Now, whenever a route changes, we can animate the content inside of the router outlet. Then you can see above the Outlet, I have my actual navigation bar, so this will stay fixed and not be animated between the route changes. Now we'll jump into the App Component typescript you'll see that I'm importing these animations which we have not yet defined. I simply wanna point out that we'll be adding these to the animation property in the component decorator and you can just uncomment whichever animation that you wanna use here.

In our case, we're going to be defining different animations for different routes, so we need to create this prepareRoute method to pass in that dynamic Data. This is actually taken directly from the Angular docs and it's technically optional if you're only using a single animation for every route. In that case you could pass the Outlet to the animation directly in the gml. The last thing we wanna do is go into our router configuration and you'll see we have 3 routes set up each one just pointing to a component. When we get to our Slide reanimation will need to determine if a component should slide in from the left or slide in from the right.

We can do this by passing in a data attribute and we'll give it a name of animation. Then we'll define animations named isRight and isLeft. Now that prepareRoute method that we defined earlier will look for this property and then apply the corresponding animation. The next thing I'm going to do is create a file called route animations dot ts in the App Directory and then we'll basically import everything under the kitchen sink from Angular animations. The first animation we'll build is the most basic use case, which is just a standard animation that gets applied to every route change.

Notice we give the trigger a name of route animations That must match what you entered in the HTML. The next thing we'll do is define a transition, which determines how to apply styles from one animation to the next. In this case, we're using the star arrow syntax to define a wildcard that will apply to every single route transition. Angular animations will apply 2 pseudo selectors to the elements We're animating, one called enter and one called leave. So enter is the new page, leave is the old page.

And query allows us to actually select these elements from the DOM. So the first step in the transition is to prepare these elements so they can be animated. To do that effectively, we'll position them as absolute And then we'll also bring the opacity down to 0 and then translate them off the screen and scale them down to 0. So basically with this step we're just creating a starting point from which we can use is to animate in the new page. And at the same time, we're immediately hiding the old page.

So Angular animations will apply these steps in the transition one after the other. So at this point we've styled our elements both to be hidden. Now we need to animate in the new page. We can do that by making a query for the enter selector which again is the new page And then we'll animate that in. But first I wanna point out that I had to go into the style CSS and set the main element to position relative.

This just ensures that you have a consistent Style between the page transitions. Now back to our animation we've queried for the enter selector then we'll use the animate method to set up the actual transition. We'll give it a timing of 600 milliseconds with the Ease function. Then we'll define a style that is basically the end point of the animation. So from our starting point we'll wanna set the Opacity to 1, scale it to 1 and then set the y axis translation to 0.

So just to recap the entire animation, we start by hiding both the old and new components, then we fade in the new component over the course of 600 milliseconds. The end result looks like this and the same animation is applied to every route change. But you'll notice our layout has both a right page and a left page, so there's sort of a concept of position within this layout. In the next animation, we'll actually take into account the position and do a different animation based on whether or not the component is on the right or the left. Now I'm defining a function called slide 2 which will allow us to reuse a lot of the same logic for both the left and right transitions.

This animation has multiple transition possibilities and that's based on the dynamic data that we're passing in through the router config. So any component that transitions to the is left animation will slide to the left. And conversely, any component going to the right will slide to the right. Then our middle component doesn't have any animation data defined at all. So we'll also wanna set up transitions any time that we're going from the is right animation just to any component.

That means that we should be moving to the left, so we'll go ahead and use the slide to the left animation. And lastly, we'll do the same thing for the opposite. And now we'll define the actual slide two function. I'm setting up a variable for optional here because some of these queries will want to be in case the actual leaving component isn't present. Then just like we did before we'll set up some default styles here.

In this case, we don't wanna actually hide the elements, but we'll just make them positioned salute and at the top of the page. And then we'll dynamically pass in the direction which can either be right or left. So those styles are applied to both components, But we want to add an additional style to only the entering component which will offset it in either direction 100% from its sibling component. At this point we have 2 different components that we want to animate and we want those to happen at the same time which is why we add them to a group otherwise they would happen one after the other. We can start with the animation for the Leaving component.

In this case, we'll go ahead and animate it 100% off the screen. So that will move it in the The direction of the starting point from the Entering Component. Then to animate the Entering Component we'll just go ahead and set its direction to 0% which will put it right in the middle where it's supposed to be. And you'll also notice that both of the animations have the same timing function. And the end result is just a smooth sliding animation from left to right.

But Let's go ahead and move on to transition number 3 which is just a variation on this last one but instead uses CSS transforms. This allows us to achieve that same sliding effect, but we can also do cool things like rotation or scaling or whatever else we wanna add in here. We'll start with the same basic setup as last time And we'll define triggers that go from left to right. But this time, you'll notice we're passing in a bunch of named arguments. So our function will take an x value, a y value, and also a Rotation value.

So my goal here is basically to give you a function that you can configure with your own arguments to create a whole bunch of different crazy animations. Now Now if we go down to the actual function you can see that I'm using destructuring to add named arguments to this function with default values. That's just some useful syntactic sugar If you have a single object as an argument that has default values. Again, we'll start this animation off by styling the enter and leave components. Then we can define our transformations by simply interpolating values into Strings.

For example, we can add x and y values to translate as percentages And then a rotation value as degrees for rotate. And you could even extend this with skew and scale or whatever other transformations you wanna use. Now if we skip ahead here to the animations, they're pretty much identical to the previous example except we're adding the values in here for the transforms instead of the direction. Now we're going to switch gears and look at a keyframed animation. Currently, all of our animations use a transition which basically just has a single starting point and ending point.

But in many cases with animations, you have multiple intermediate steps that can't be defined by just a single start and end point. So let's go ahead and define a new animation that just uses the wildcard to apply the same animation to every route. Then like every other animation, we'll set the initial position to absolute. Then we'll also set up a group to run the 2 page animations concurrently. Then in all the previous examples, we just animated to a single Style.

In this example, we'll use the keyframes function to pass in an array of styles. You can think of these styles as steps in your animation And you determine where they happen based on the total time by setting an offset value. So an offset of 0 will apply the style as soon as the animation starts. We're working with the Entry component we'll go ahead and scale it to 0 and translate it off the page. Then we'll add a second style with an offset of 0.3 which for a 2 1000 millisecond animation would be 600 milliseconds.

In other words, this style will be applied to the element at 30% of its animation lifecycle. And we'll finish things up by setting a final style with an offset of 1 which is the end of the animation. And that will be when the component is fully visible at a scale of 1 and a translate of 0. Now we'll go down here to the Leave component and try to roughly match the keyframes to the Entering component. We want to achieve an effect that makes it look like the Entering component bumps The old component off the screen.

We can achieve that by scaling it up to 600% of its original size while at the same time rotating it and fading it out to an opacity of 0. The end result is this 3 d effect of the pages looking like they're colliding. Hopefully, this video gave you an idea of what is possible with Angular router animations so you can start building your own beautiful transitions between Pages in your app. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe.

And make sure to grab the full source code at Fireship IO. Thanks for watching and I will talk to you soon.
An easy way to make your app more polished is to implement animations between router transitions. Today's video is a complete guide to router animations in Angular and we'll build 4 different styles that range from a simple Fade into a complex key frame sequence of animations. If you're new here, like and subscribe, and grab the full source code from Fireship IO. And before we get started, I wanna give a Shout out to the DealCrunch app, which is a real estate app available on iOS and Android. It was built by one of our pro members and is a great example of what you can do with Angular and Now, let's first start by looking at the actual animations that we'll build in this video. The first one is just a simple fade in, which is applied to every single route in the app. The second animation is a Slide from left to right, and it determines which direction to slide based on data that we pass in through the router configuration. The third one is slightly more Plex and adds in transformations so we can make the page kind of rotate in from the top corners.
animation
real estate
youtube
visualization
And the 4th and final one uses keyframes to create a sequence of style changes. For example, the new page comes in from the bottom and bumps the old page off and it spins and scales out of the screen. I'm starting off here in my Angular 7 app, And you'll notice that I've generated a handful of components here just so we have something to actually route to. And you don't need to do anything special with these components whatsoever, so we won't even bother looking at them in this video. Then the other thing we'll do in the app module is import the browser animations module and add it to the imports array. From there, we'll go into the HTML on the app component and create a main element and then define an animation called route animations. And then we'll point this to a method called prepare route which we'll define in a second and its job is to determine which animation to apply to a given route.
animation
youtube
Now, inside of this element, we'll define our router outlet and then give it a template variable name of outlet as well. Now, whenever a route changes, we can animate the content inside of the router outlet.
Then you can see above the Outlet, I have my actual navigation bar, so this will stay fixed and not be animated between the route changes. Now we'll jump into the App Component typescript you'll see that I'm importing these animations which we have not yet defined. I simply wanna point out that we'll be adding these to the animation property in the component decorator and you can just uncomment whichever animation that you wanna use here. In our case, we're going to be defining different animations for different routes, so we need to create this prepareRoute method to pass in that dynamic Data. This is actually taken directly from the Angular docs and it's technically optional if you're only using a single animation for every route. In that case you could pass the Outlet to the animation directly in the gml. The last thing we wanna do is go into our router configuration and you'll see we have 3 routes set up each one just pointing to a component.
animation
graphic design
visualization
robotics
geometry
When we get to our Slide reanimation will need to determine if a component should slide in from the left or slide in from the right. We can do this by passing in a data attribute and we'll give it a name of animation. Then we'll define animations named isRight and isLeft. Now that prepareRoute method that we defined earlier will look for this property and then apply the corresponding animation. The next thing I'm going to do is create a file called route animations dot ts in the App Directory and then we'll basically import everything under the kitchen sink from Angular animations. The first animation we'll build is the most basic use case, which is just a standard animation that gets applied to every route change. Notice we give the trigger a name of route animations That must match what you entered in the HTML. The next thing we'll do is define a transition, which determines how to apply styles from one animation to the next. In this case, we're using the star arrow syntax to define a wildcard that will apply to every single route transition. Angular animations will apply 2 pseudo selectors to the elements We're animating, one called enter and one called leave. So enter is the new page, leave is the old page. And query allows us to actually select these elements from the DOM. So the first step in the transition is to prepare these elements so they can be animated.
animation
geometry
graphic design
robotics
visualization
To do that effectively, we'll position them as absolute And then we'll also bring the opacity down to 0 and then translate them off the screen and scale them down to 0. So basically with this step we're just creating a starting point from which we can use is to animate in the new page. And at the same time, we're immediately hiding the old page. So Angular animations will apply these steps in the transition one after the other. So at this point we've styled our elements both to be hidden. Now we need to animate in the new page. We can do that by making a query for the enter selector which again is the new page And then we'll animate that in. But first I wanna point out that I had to go into the style CSS and set the main element to position relative. This just ensures that you have a consistent Style between the page transitions. Now back to our animation we've queried for the enter selector then we'll use the animate method to set up the actual transition. We'll give it a timing of 600 milliseconds with the Ease function. Then we'll define a style that is basically the end point of the animation. So from our starting point we'll wanna set the Opacity to 1, scale it to 1 and then set the y axis translation to 0. So just to recap the entire animation, we start by hiding both the old and new components, then we fade in the new component over the course of 600 milliseconds. The end result looks like this and the same animation is applied to every route change. But you'll notice our layout has both a right page and a left page, so there's sort of a concept of position within this layout. In the next animation, we'll actually take into account the position and do a different animation based on whether or not the component is on the right or the left. Now I'm defining a function called slide 2 which will allow us to reuse a lot of the same logic for both the left and right transitions. This animation has multiple transition possibilities and that's based on the dynamic data that we're passing in through the router config. So any component that transitions to the is left animation will slide to the left. And conversely, any component going to the right will slide to the right. Then our middle component doesn't have any animation data defined at all. So we'll also wanna set up transitions any time that we're going from the is right animation just to any component. That means that we should be moving to the left, so we'll go ahead and use the slide to the left animation. And lastly, we'll do the same thing for the opposite.
animation
graphic design
geometry
And now we'll define the actual slide two function. I'm setting up a variable for optional here because some of these queries will want to be in case the actual leaving component isn't present.
Then just like we did before we'll set up some default styles here. In this case, we don't wanna actually hide the elements, but we'll just make them positioned salute and at the top of the page. And then we'll dynamically pass in the direction which can either be right or left. So those styles are applied to both components, But we want to add an additional style to only the entering component which will offset it in either direction 100% from its sibling component. At this point we have 2 different components that we want to animate and we want those to happen at the same time which is why we add them to a group otherwise they would happen one after the other. We can start with the animation for the Leaving component. In this case, we'll go ahead and animate it 100% off the screen. So that will move it in the The direction of the starting point from the Entering Component. Then to animate the Entering Component we'll just go ahead and set its direction to 0% which will put it right in the middle where it's supposed to be. And you'll also notice that both of the animations have the same timing function. And the end result is just a smooth sliding animation from left to right. But Let's go ahead and move on to transition number 3 which is just a variation on this last one but instead uses CSS transforms.
animation
graphic design
fashion
visualization
acting
This allows us to achieve that same sliding effect, but we can also do cool things like rotation or scaling or whatever else we wanna add in here.
We'll start with the same basic setup as last time And we'll define triggers that go from left to right. But this time, you'll notice we're passing in a bunch of named arguments. So our function will take an x value, a y value, and also a Rotation value. So my goal here is basically to give you a function that you can configure with your own arguments to create a whole bunch of different crazy animations. Now Now if we go down to the actual function you can see that I'm using destructuring to add named arguments to this function with default values.
animation
That's just some useful syntactic sugar If you have a single object as an argument that has default values. Again, we'll start this animation off by styling the enter and leave components. Then we can define our transformations by simply interpolating values into Strings. For example, we can add x and y values to translate as percentages And then a rotation value as degrees for rotate.
animation
programming
And you could even extend this with skew and scale or whatever other transformations you wanna use. Now if we skip ahead here to the animations, they're pretty much identical to the previous example except we're adding the values in here for the transforms instead of the direction. Now we're going to switch gears and look at a keyframed animation. Currently, all of our animations use a transition which basically just has a single starting point and ending point. But in many cases with animations, you have multiple intermediate steps that can't be defined by just a single start and end point. So let's go ahead and define a new animation that just uses the wildcard to apply the same animation to every route. Then like every other animation, we'll set the initial position to absolute. Then we'll also set up a group to run the 2 page animations concurrently. Then in all the previous examples, we just animated to a single Style. In this example, we'll use the keyframes function to pass in an array of styles. You can think of these styles as steps in your animation And you determine where they happen based on the total time by setting an offset value. So an offset of 0 will apply the style as soon as the animation starts. We're working with the Entry component we'll go ahead and scale it to 0 and translate it off the page. Then we'll add a second style with an offset of 0.3 which for a 2 1000 millisecond animation would be 600 milliseconds. In other words, this style will be applied to the element at 30% of its animation lifecycle. And we'll finish things up by setting a final style with an offset of 1 which is the end of the animation. And that will be when the component is fully visible at a scale of 1 and a translate of 0. Now we'll go down here to the Leave component and try to roughly match the keyframes to the Entering component.
animation
modeling
visualization
graphic design
robotics
geometry
dance
We want to achieve an effect that makes it look like the Entering component bumps The old component off the screen.
We can achieve that by scaling it up to 600% of its original size while at the same time rotating it and fading it out to an opacity of 0. The end result is this 3 d effect of the pages looking like they're colliding. Hopefully, this video gave you an idea of what is possible with Angular router animations so you can start building your own beautiful transitions between Pages in your app. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And make sure to grab the full source code at Fireship IO. Thanks for watching and I will talk to you soon.
streaming
animation
youtube
video gaming
documentary
An easy way to make your app more polished is to implement animations between router transitions. Today's video is a complete guide to router animations in Angular and we'll build 4 different styles that range from a simple Fade into a complex key frame sequence of animations. If you're new here, like and subscribe, and grab the full source code from Fireship IO. And before we get started, I wanna give a Shout out to the DealCrunch app, which is a real estate app available on iOS and Android. It was built by one of our pro members and is a great example of what you can do with Angular and Now, let's first start by looking at the actual animations that we'll build in this video. The first one is just a simple fade in, which is applied to every single route in the app. The second animation is a Slide from left to right, and it determines which direction to slide based on data that we pass in through the router configuration. The third one is slightly more Plex and adds in transformations so we can make the page kind of rotate in from the top corners. And the 4th and final one uses keyframes to create a sequence of style changes. For example, the new page comes in from the bottom and bumps the old page off and it spins and scales out of the screen. I'm starting off here in my Angular 7 app, And you'll notice that I've generated a handful of components here just so we have something to actually route to. And you don't need to do anything special with these components whatsoever, so we won't even bother looking at them in this video. Then the other thing we'll do in the app module is import the browser animations module and add it to the imports array. From there, we'll go into the HTML on the app component and create a main element and then define an animation called route animations. And then we'll point this to a method called prepare route which we'll define in a second and its job is to determine which animation to apply to a given route. Now, inside of this element, we'll define our router outlet and then give it a template variable name of outlet as well. Now, whenever a route changes, we can animate the content inside of the router outlet. Then you can see above the Outlet, I have my actual navigation bar, so this will stay fixed and not be animated between the route changes. Now we'll jump into the App Component typescript you'll see that I'm importing these animations which we have not yet defined. I simply wanna point out that we'll be adding these to the animation property in the component decorator and you can just uncomment whichever animation that you wanna use here. In our case, we're going to be defining different animations for different routes, so we need to create this prepareRoute method to pass in that dynamic Data. This is actually taken directly from the Angular docs and it's technically optional if you're only using a single animation for every route. In that case you could pass the Outlet to the animation directly in the gml. The last thing we wanna do is go into our router configuration and you'll see we have 3 routes set up each one just pointing to a component. When we get to our Slide reanimation will need to determine if a component should slide in from the left or slide in from the right. We can do this by passing in a data attribute and we'll give it a name of animation. Then we'll define animations named isRight and isLeft. Now that prepareRoute method that we defined earlier will look for this property and then apply the corresponding animation. The next thing I'm going to do is create a file called route animations dot ts in the App Directory and then we'll basically import everything under the kitchen sink from Angular animations. The first animation we'll build is the most basic use case, which is just a standard animation that gets applied to every route change. Notice we give the trigger a name of route animations That must match what you entered in the HTML. The next thing we'll do is define a transition, which determines how to apply styles from one animation to the next. In this case, we're using the star arrow syntax to define a wildcard that will apply to every single route transition. Angular animations will apply 2 pseudo selectors to the elements We're animating, one called enter and one called leave. So enter is the new page, leave is the old page. And query allows us to actually select these elements from the DOM. So the first step in the transition is to prepare these elements so they can be animated. To do that effectively, we'll position them as absolute And then we'll also bring the opacity down to 0 and then translate them off the screen and scale them down to 0. So basically with this step we're just creating a starting point from which we can use is to animate in the new page. And at the same time, we're immediately hiding the old page. So Angular animations will apply these steps in the transition one after the other. So at this point we've styled our elements both to be hidden. Now we need to animate in the new page. We can do that by making a query for the enter selector which again is the new page And then we'll animate that in. But first I wanna point out that I had to go into the style CSS and set the main element to position relative. This just ensures that you have a consistent Style between the page transitions. Now back to our animation we've queried for the enter selector then we'll use the animate method to set up the actual transition. We'll give it a timing of 600 milliseconds with the Ease function. Then we'll define a style that is basically the end point of the animation. So from our starting point we'll wanna set the Opacity to 1, scale it to 1 and then set the y axis translation to 0. So just to recap the entire animation, we start by hiding both the old and new components, then we fade in the new component over the course of 600 milliseconds. The end result looks like this and the same animation is applied to every route change. But you'll notice our layout has both a right page and a left page, so there's sort of a concept of position within this layout. In the next animation, we'll actually take into account the position and do a different animation based on whether or not the component is on the right or the left. Now I'm defining a function called slide 2 which will allow us to reuse a lot of the same logic for both the left and right transitions. This animation has multiple transition possibilities and that's based on the dynamic data that we're passing in through the router config. So any component that transitions to the is left animation will slide to the left. And conversely, any component going to the right will slide to the right. Then our middle component doesn't have any animation data defined at all. So we'll also wanna set up transitions any time that we're going from the is right animation just to any component. That means that we should be moving to the left, so we'll go ahead and use the slide to the left animation. And lastly, we'll do the same thing for the opposite. And now we'll define the actual slide two function. I'm setting up a variable for optional here because some of these queries will want to be in case the actual leaving component isn't present. Then just like we did before we'll set up some default styles here. In this case, we don't wanna actually hide the elements, but we'll just make them positioned salute and at the top of the page. And then we'll dynamically pass in the direction which can either be right or left. So those styles are applied to both components, But we want to add an additional style to only the entering component which will offset it in either direction 100% from its sibling component. At this point we have 2 different components that we want to animate and we want those to happen at the same time which is why we add them to a group otherwise they would happen one after the other. We can start with the animation for the Leaving component. In this case, we'll go ahead and animate it 100% off the screen. So that will move it in the The direction of the starting point from the Entering Component. Then to animate the Entering Component we'll just go ahead and set its direction to 0% which will put it right in the middle where it's supposed to be. And you'll also notice that both of the animations have the same timing function. And the end result is just a smooth sliding animation from left to right. But Let's go ahead and move on to transition number 3 which is just a variation on this last one but instead uses CSS transforms. This allows us to achieve that same sliding effect, but we can also do cool things like rotation or scaling or whatever else we wanna add in here. We'll start with the same basic setup as last time And we'll define triggers that go from left to right. But this time, you'll notice we're passing in a bunch of named arguments. So our function will take an x value, a y value, and also a Rotation value. So my goal here is basically to give you a function that you can configure with your own arguments to create a whole bunch of different crazy animations. Now Now if we go down to the actual function you can see that I'm using destructuring to add named arguments to this function with default values. That's just some useful syntactic sugar If you have a single object as an argument that has default values. Again, we'll start this animation off by styling the enter and leave components. Then we can define our transformations by simply interpolating values into Strings. For example, we can add x and y values to translate as percentages And then a rotation value as degrees for rotate. And you could even extend this with skew and scale or whatever other transformations you wanna use. Now if we skip ahead here to the animations, they're pretty much identical to the previous example except we're adding the values in here for the transforms instead of the direction. Now we're going to switch gears and look at a keyframed animation. Currently, all of our animations use a transition which basically just has a single starting point and ending point. But in many cases with animations, you have multiple intermediate steps that can't be defined by just a single start and end point. So let's go ahead and define a new animation that just uses the wildcard to apply the same animation to every route. Then like every other animation, we'll set the initial position to absolute. Then we'll also set up a group to run the 2 page animations concurrently. Then in all the previous examples, we just animated to a single Style. In this example, we'll use the keyframes function to pass in an array of styles. You can think of these styles as steps in your animation And you determine where they happen based on the total time by setting an offset value. So an offset of 0 will apply the style as soon as the animation starts. We're working with the Entry component we'll go ahead and scale it to 0 and translate it off the page. Then we'll add a second style with an offset of 0.3 which for a 2 1000 millisecond animation would be 600 milliseconds. In other words, this style will be applied to the element at 30% of its animation lifecycle. And we'll finish things up by setting a final style with an offset of 1 which is the end of the animation. And that will be when the component is fully visible at a scale of 1 and a translate of 0. Now we'll go down here to the Leave component and try to roughly match the keyframes to the Entering component. We want to achieve an effect that makes it look like the Entering component bumps The old component off the screen. We can achieve that by scaling it up to 600% of its original size while at the same time rotating it and fading it out to an opacity of 0. The end result is this 3 d effect of the pages looking like they're colliding. Hopefully, this video gave you an idea of what is possible with Angular router animations so you can start building your own beautiful transitions between Pages in your app. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And make sure to grab the full source code at Fireship IO. Thanks for watching and I will talk to you soon.
An
an
easy
easy
way
way
to
to
make
make
your
your
app
app
more
more
polished
polished
is
is
to
to
implement
implement
animations
animations
between
between
router
router
transitions.
transitions
Today's
today's
video
video
is
is
a
a
complete
complete
guide
guide
to
to
router
router
animations
animations
in
in
Angular
angular
and
and
we'll
we'll
build
build
4
4
different
different
styles
styles
that
that
range
range
from
from
a
a
simple
simple
Fade
fade
into
into
a
a
complex
complex
key
key
frame
frame
sequence
sequence
of
of
animations.
animations
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe,
subscribe
and
and
grab
grab
the
the
full
full
source
source
code
code
from
from
Fireship
fireship
IO.
io
And
and
before
before
we
we
get
get
started,
started
I
i
wanna
wanna
give
give
a
a
Shout
shout
out
out
to
to
the
the
DealCrunch
dealcrunch
app,
app
which
which
is
is
a
a
real
real
estate
estate
app
app
available
available
on
on
iOS
ios
and
and
Android.
android
It
it
was
was
built
built
by
by
one
one
of
of
our
our
pro
pro
members
members
and
and
is
is
a
a
great
great
example
example
of
of
what
what
you
you
can
can
do
do
with
with
Angular
angular
and
and
Now,
now
let's
let's
first
first
start
start
by
by
looking
looking
at
at
the
the
actual
actual
animations
animations
that
that
we'll
we'll
build
build
in
in
this
this
video.
video
The
the
first
first
one
one
is
is
just
just
a
a
simple
simple
fade
fade
in,
in
which
which
is
is
applied
applied
to
to
every
every
single
single
route
route
in
in
the
the
app.
app
The
the
second
second
animation
animation
is
is
a
a
Slide
slide
from
from
left
left
to
to
right,
right
and
and
it
it
determines
determines
which
which
direction
direction
to
to
slide
slide
based
based
on
on
data
data
that
that
we
we
pass
pass
in
in
through
through
the
the
router
router
configuration.
configuration
The
the
third
third
one
one
is
is
slightly
slightly
more
more
Plex
plex
and
and
adds
adds
in
in
transformations
transformations
so
so
we
we
can
can
make
make
the
the
page
page
kind
kind
of
of
rotate
rotate
in
in
from
from
the
the
top
top
corners.
corners
And
and
the
the
4th
4th
and
and
final
final
one
one
uses
uses
keyframes
keyframes
to
to
create
create
a
a
sequence
sequence
of
of
style
style
changes.
changes
For
for
example,
example
the
the
new
new
page
page
comes
comes
in
in
from
from
the
the
bottom
bottom
and
and
bumps
bumps
the
the
old
old
page
page
off
off
and
and
it
it
spins
spins
and
and
scales
scales
out
out
of
of
the
the
screen.
screen
I'm
i'm
starting
starting
off
off
here
here
in
in
my
my
Angular
angular
7
7
app,
app
And
and
you'll
you'll
notice
notice
that
that
I've
i've
generated
generated
a
a
handful
handful
of
of
components
components
here
here
just
just
so
so
we
we
have
have
something
something
to
to
actually
actually
route
route
to.
to
And
and
you
you
don't
don't
need
need
to
to
do
do
anything
anything
special
special
with
with
these
these
components
components
whatsoever,
whatsoever
so
so
we
we
won't
won't
even
even
bother
bother
looking
looking
at
at
them
them
in
in
this
this
video.
video
Then
then
the
the
other
other
thing
thing
we'll
we'll
do
do
in
in
the
the
app
app
module
module
is
is
import
import
the
the
browser
browser
animations
animations
module
module
and
and
add
add
it
it
to
to
the
the
imports
imports
array.
array
From
from
there,
there
we'll
we'll
go
go
into
into
the
the
HTML
html
on
on
the
the
app
app
component
component
and
and
create
create
a
a
main
main
element
element
and
and
then
then
define
define
an
an
animation
animation
called
called
route
route
animations.
animations
And
and
then
then
we'll
we'll
point
point
this
this
to
to
a
a
method
method
called
called
prepare
prepare
route
route
which
which
we'll
we'll
define
define
in
in
a
a
second
second
and
and
its
its
job
job
is
is
to
to
determine
determine
which
which
animation
animation
to
to
apply
apply
to
to
a
a
given
given
route.
route
Now,
now
inside
inside
of
of
this
this
element,
element
we'll
we'll
define
define
our
our
router
router
outlet
outlet
and
and
then
then
give
give
it
it
a
a
template
template
variable
variable
name
name
of
of
outlet
outlet
as
as
well.
well
Now,
now
whenever
whenever
a
a
route
route
changes,
changes
we
we
can
can
animate
animate
the
the
content
content
inside
inside
of
of
the
the
router
router
outlet.
outlet
Then
then
you
you
can
can
see
see
above
above
the
the
Outlet,
outlet
I
i
have
have
my
my
actual
actual
navigation
navigation
bar,
bar
so
so
this
this
will
will
stay
stay
fixed
fixed
and
and
not
not
be
be
animated
animated
between
between
the
the
route
route
changes.
changes
Now
now
we'll
we'll
jump
jump
into
into
the
the
App
app
Component
component
typescript
typescript
you'll
you'll
see
see
that
that
I'm
i'm
importing
importing
these
these
animations
animations
which
which
we
we
have
have
not
not
yet
yet
defined.
defined
I
i
simply
simply
wanna
wanna
point
point
out
out
that
that
we'll
we'll
be
be
adding
adding
these
these
to
to
the
the
animation
animation
property
property
in
in
the
the
component
component
decorator
decorator
and
and
you
you
can
can
just
just
uncomment
uncomment
whichever
whichever
animation
animation
that
that
you
you
wanna
wanna
use
use
here.
here
In
in
our
our
case,
case
we're
we're
going
going
to
to
be
be
defining
defining
different
different
animations
animations
for
for
different
different
routes,
routes
so
so
we
we
need
need
to
to
create
create
this
this
prepareRoute
prepareroute
method
method
to
to
pass
pass
in
in
that
that
dynamic
dynamic
Data.
data
This
this
is
is
actually
actually
taken
taken
directly
directly
from
from
the
the
Angular
angular
docs
docs
and
and
it's
it's
technically
technically
optional
optional
if
if
you're
you're
only
only
using
using
a
a
single
single
animation
animation
for
for
every
every
route.
route
In
in
that
that
case
case
you
you
could
could
pass
pass
the
the
Outlet
outlet
to
to
the
the
animation
animation
directly
directly
in
in
the
the
gml.
gml
The
the
last
last
thing
thing
we
we
wanna
wanna
do
do
is
is
go
go
into
into
our
our
router
router
configuration
configuration
and
and
you'll
you'll
see
see
we
we
have
have
3
3
routes
routes
set
set
up
up
each
each
one
one
just
just
pointing
pointing
to
to
a
a
component.
component
When
when
we
we
get
get
to
to
our
our
Slide
slide
reanimation
reanimation
will
will
need
need
to
to
determine
determine
if
if
a
a
component
component
should
should
slide
slide
in
in
from
from
the
the
left
left
or
or
slide
slide
in
in
from
from
the
the
right.
right
We
we
can
can
do
do
this
this
by
by
passing
passing
in
in
a
a
data
data
attribute
attribute
and
and
we'll
we'll
give
give
it
it
a
a
name
name
of
of
animation.
animation
Then
then
we'll
we'll
define
define
animations
animations
named
named
isRight
isright
and
and
isLeft.
isleft
Now
now
that
that
prepareRoute
prepareroute
method
method
that
that
we
we
defined
defined
earlier
earlier
will
will
look
look
for
for
this
this
property
property
and
and
then
then
apply
apply
the
the
corresponding
corresponding
animation.
animation
The
the
next
next
thing
thing
I'm
i'm
going
going
to
to
do
do
is
is
create
create
a
a
file
file
called
called
route
route
animations
animations
dot
dot
ts
ts
in
in
the
the
App
app
Directory
directory
and
and
then
then
we'll
we'll
basically
basically
import
import
everything
everything
under
under
the
the
kitchen
kitchen
sink
sink
from
from
Angular
angular
animations.
animations
The
the
first
first
animation
animation
we'll
we'll
build
build
is
is
the
the
most
most
basic
basic
use
use
case,
case
which
which
is
is
just
just
a
a
standard
standard
animation
animation
that
that
gets
gets
applied
applied
to
to
every
every
route
route
change.
change
Notice
notice
we
we
give
give
the
the
trigger
trigger
a
a
name
name
of
of
route
route
animations
animations
That
that
must
must
match
match
what
what
you
you
entered
entered
in
in
the
the
HTML.
html
The
the
next
next
thing
thing
we'll
we'll
do
do
is
is
define
define
a
a
transition,
transition
which
which
determines
determines
how
how
to
to
apply
apply
styles
styles
from
from
one
one
animation
animation
to
to
the
the
next.
next
In
in
this
this
case,
case
we're
we're
using
using
the
the
star
star
arrow
arrow
syntax
syntax
to
to
define
define
a
a
wildcard
wildcard
that
that
will
will
apply
apply
to
to
every
every
single
single
route
route
transition.
transition
Angular
angular
animations
animations
will
will
apply
apply
2
2
pseudo
pseudo
selectors
selectors
to
to
the
the
elements
elements
We're
we're
animating,
animating
one
one
called
called
enter
enter
and
and
one
one
called
called
leave.
leave
So
so
enter
enter
is
is
the
the
new
new
page,
page
leave
leave
is
is
the
the
old
old
page.
page
And
and
query
query
allows
allows
us
us
to
to
actually
actually
select
select
these
these
elements
elements
from
from
the
the
DOM.
dom
So
so
the
the
first
first
step
step
in
in
the
the
transition
transition
is
is
to
to
prepare
prepare
these
these
elements
elements
so
so
they
they
can
can
be
be
animated.
animated
To
to
do
do
that
that
effectively,
effectively
we'll
we'll
position
position
them
them
as
as
absolute
absolute
And
and
then
then
we'll
we'll
also
also
bring
bring
the
the
opacity
opacity
down
down
to
to
0
0
and
and
then
then
translate
translate
them
them
off
off
the
the
screen
screen
and
and
scale
scale
them
them
down
down
to
to
0.
0
So
so
basically
basically
with
with
this
this
step
step
we're
we're
just
just
creating
creating
a
a
starting
starting
point
point
from
from
which
which
we
we
can
can
use
use
is
is
to
to
animate
animate
in
in
the
the
new
new
page.
page
And
and
at
at
the
the
same
same
time,
time
we're
we're
immediately
immediately
hiding
hiding
the
the
old
old
page.
page
So
so
Angular
angular
animations
animations
will
will
apply
apply
these
these
steps
steps
in
in
the
the
transition
transition
one
one
after
after
the
the
other.
other
So
so
at
at
this
this
point
point
we've
we've
styled
styled
our
our
elements
elements
both
both
to
to
be
be
hidden.
hidden
Now
now
we
we
need
need
to
to
animate
animate
in
in
the
the
new
new
page.
page
We
we
can
can
do
do
that
that
by
by
making
making
a
a
query
query
for
for
the
the
enter
enter
selector
selector
which
which
again
again
is
is
the
the
new
new
page
page
And
and
then
then
we'll
we'll
animate
animate
that
that
in.
in
But
but
first
first
I
i
wanna
wanna
point
point
out
out
that
that
I
i
had
had
to
to
go
go
into
into
the
the
style
style
CSS
css
and
and
set
set
the
the
main
main
element
element
to
to
position
position
relative.
relative
This
this
just
just
ensures
ensures
that
that
you
you
have
have
a
a
consistent
consistent
Style
style
between
between
the
the
page
page
transitions.
transitions
Now
now
back
back
to
to
our
our
animation
animation
we've
we've
queried
queried
for
for
the
the
enter
enter
selector
selector
then
then
we'll
we'll
use
use
the
the
animate
animate
method
method
to
to
set
set
up
up
the
the
actual
actual
transition.
transition
We'll
we'll
give
give
it
it
a
a
timing
timing
of
of
600
600
milliseconds
milliseconds
with
with
the
the
Ease
ease
function.
function
Then
then
we'll
we'll
define
define
a
a
style
style
that
that
is
is
basically
basically
the
the
end
end
point
point
of
of
the
the
animation.
animation
So
so
from
from
our
our
starting
starting
point
point
we'll
we'll
wanna
wanna
set
set
the
the
Opacity
opacity
to
to
1,
1
scale
scale
it
it
to
to
1
1
and
and
then
then
set
set
the
the
y
y
axis
axis
translation
translation
to
to
0.
0
So
so
just
just
to
to
recap
recap
the
the
entire
entire
animation,
animation
we
we
start
start
by
by
hiding
hiding
both
both
the
the
old
old
and
and
new
new
components,
components
then
then
we
we
fade
fade
in
in
the
the
new
new
component
component
over
over
the
the
course
course
of
of
600
600
milliseconds.
milliseconds
The
the
end
end
result
result
looks
looks
like
like
this
this
and
and
the
the
same
same
animation
animation
is
is
applied
applied
to
to
every
every
route
route
change.
change
But
but
you'll
you'll
notice
notice
our
our
layout
layout
has
has
both
both
a
a
right
right
page
page
and
and
a
a
left
left
page,
page
so
so
there's
there's
sort
sort
of
of
a
a
concept
concept
of
of
position
position
within
within
this
this
layout.
layout
In
in
the
the
next
next
animation,
animation
we'll
we'll
actually
actually
take
take
into
into
account
account
the
the
position
position
and
and
do
do
a
a
different
different
animation
animation
based
based
on
on
whether
whether
or
or
not
not
the
the
component
component
is
is
on
on
the
the
right
right
or
or
the
the
left.
left
Now
now
I'm
i'm
defining
defining
a
a
function
function
called
called
slide
slide
2
2
which
which
will
will
allow
allow
us
us
to
to
reuse
reuse
a
a
lot
lot
of
of
the
the
same
same
logic
logic
for
for
both
both
the
the
left
left
and
and
right
right
transitions.
transitions
This
this
animation
animation
has
has
multiple
multiple
transition
transition
possibilities
possibilities
and
and
that's
that's
based
based
on
on
the
the
dynamic
dynamic
data
data
that
that
we're
we're
passing
passing
in
in
through
through
the
the
router
router
config.
config
So
so
any
any
component
component
that
that
transitions
transitions
to
to
the
the
is
is
left
left
animation
animation
will
will
slide
slide
to
to
the
the
left.
left
And
and
conversely,
conversely
any
any
component
component
going
going
to
to
the
the
right
right
will
will
slide
slide
to
to
the
the
right.
right
Then
then
our
our
middle
middle
component
component
doesn't
doesn't
have
have
any
any
animation
animation
data
data
defined
defined
at
at
all.
all
So
so
we'll
we'll
also
also
wanna
wanna
set
set
up
up
transitions
transitions
any
any
time
time
that
that
we're
we're
going
going
from
from
the
the
is
is
right
right
animation
animation
just
just
to
to
any
any
component.
component
That
that
means
means
that
that
we
we
should
should
be
be
moving
moving
to
to
the
the
left,
left
so
so
we'll
we'll
go
go
ahead
ahead
and
and
use
use
the
the
slide
slide
to
to
the
the
left
left
animation.
animation
And
and
lastly,
lastly
we'll
we'll
do
do
the
the
same
same
thing
thing
for
for
the
the
opposite.
opposite
And
and
now
now
we'll
we'll
define
define
the
the
actual
actual
slide
slide
two
two
function.
function
I'm
i'm
setting
setting
up
up
a
a
variable
variable
for
for
optional
optional
here
here
because
because
some
some
of
of
these
these
queries
queries
will
will
want
want
to
to
be
be
in
in
case
case
the
the
actual
actual
leaving
leaving
component
component
isn't
isn't
present.
present
Then
then
just
just
like
like
we
we
did
did
before
before
we'll
we'll
set
set
up
up
some
some
default
default
styles
styles
here.
here
In
in
this
this
case,
case
we
we
don't
don't
wanna
wanna
actually
actually
hide
hide
the
the
elements,
elements
but
but
we'll
we'll
just
just
make
make
them
them
positioned
positioned
salute
salute
and
and
at
at
the
the
top
top
of
of
the
the
page.
page
And
and
then
then
we'll
we'll
dynamically
dynamically
pass
pass
in
in
the
the
direction
direction
which
which
can
can
either
either
be
be
right
right
or
or
left.
left
So
so
those
those
styles
styles
are
are
applied
applied
to
to
both
both
components,
components
But
but
we
we
want
want
to
to
add
add
an
an
additional
additional
style
style
to
to
only
only
the
the
entering
entering
component
component
which
which
will
will
offset
offset
it
it
in
in
either
either
direction
direction
100%
100%
from
from
its
its
sibling
sibling
component.
component
At
at
this
this
point
point
we
we
have
have
2
2
different
different
components
components
that
that
we
we
want
want
to
to
animate
animate
and
and
we
we
want
want
those
those
to
to
happen
happen
at
at
the
the
same
same
time
time
which
which
is
is
why
why
we
we
add
add
them
them
to
to
a
a
group
group
otherwise
otherwise
they
they
would
would
happen
happen
one
one
after
after
the
the
other.
other
We
we
can
can
start
start
with
with
the
the
animation
animation
for
for
the
the
Leaving
leaving
component.
component
In
in
this
this
case,
case
we'll
we'll
go
go
ahead
ahead
and
and
animate
animate
it
it
100%
100%
off
off
the
the
screen.
screen
So
so
that
that
will
will
move
move
it
it
in
in
the
the
The
the
direction
direction
of
of
the
the
starting
starting
point
point
from
from
the
the
Entering
entering
Component.
component
Then
then
to
to
animate
animate
the
the
Entering
entering
Component
component
we'll
we'll
just
just
go
go
ahead
ahead
and
and
set
set
its
its
direction
direction
to
to
0%
0%
which
which
will
will
put
put
it
it
right
right
in
in
the
the
middle
middle
where
where
it's
it's
supposed
supposed
to
to
be.
be
And
and
you'll
you'll
also
also
notice
notice
that
that
both
both
of
of
the
the
animations
animations
have
have
the
the
same
same
timing
timing
function.
function
And
and
the
the
end
end
result
result
is
is
just
just
a
a
smooth
smooth
sliding
sliding
animation
animation
from
from
left
left
to
to
right.
right
But
but
Let's
let's
go
go
ahead
ahead
and
and
move
move
on
on
to
to
transition
transition
number
number
3
3
which
which
is
is
just
just
a
a
variation
variation
on
on
this
this
last
last
one
one
but
but
instead
instead
uses
uses
CSS
css
transforms.
transforms
This
this
allows
allows
us
us
to
to
achieve
achieve
that
that
same
same
sliding
sliding
effect,
effect
but
but
we
we
can
can
also
also
do
do
cool
cool
things
things
like
like
rotation
rotation
or
or
scaling
scaling
or
or
whatever
whatever
else
else
we
we
wanna
wanna
add
add
in
in
here.
here
We'll
we'll
start
start
with
with
the
the
same
same
basic
basic
setup
setup
as
as
last
last
time
time
And
and
we'll
we'll
define
define
triggers
triggers
that
that
go
go
from
from
left
left
to
to
right.
right
But
but
this
this
time,
time
you'll
you'll
notice
notice
we're
we're
passing
passing
in
in
a
a
bunch
bunch
of
of
named
named
arguments.
arguments
So
so
our
our
function
function
will
will
take
take
an
an
x
x
value,
value
a
a
y
y
value,
value
and
and
also
also
a
a
Rotation
rotation
value.
value
So
so
my
my
goal
goal
here
here
is
is
basically
basically
to
to
give
give
you
you
a
a
function
function
that
that
you
you
can
can
configure
configure
with
with
your
your
own
own
arguments
arguments
to
to
create
create
a
a
whole
whole
bunch
bunch
of
of
different
different
crazy
crazy
animations.
animations
Now
now
Now
now
if
if
we
we
go
go
down
down
to
to
the
the
actual
actual
function
function
you
you
can
can
see
see
that
that
I'm
i'm
using
using
destructuring
destructuring
to
to
add
add
named
named
arguments
arguments
to
to
this
this
function
function
with
with
default
default
values.
values
That's
that's
just
just
some
some
useful
useful
syntactic
syntactic
sugar
sugar
If
if
you
you
have
have
a
a
single
single
object
object
as
as
an
an
argument
argument
that
that
has
has
default
default
values.
values
Again,
again
we'll
we'll
start
start
this
this
animation
animation
off
off
by
by
styling
styling
the
the
enter
enter
and
and
leave
leave
components.
components
Then
then
we
we
can
can
define
define
our
our
transformations
transformations
by
by
simply
simply
interpolating
interpolating
values
values
into
into
Strings.
strings
For
for
example,
example
we
we
can
can
add
add
x
x
and
and
y
y
values
values
to
to
translate
translate
as
as
percentages
percentages
And
and
then
then
a
a
rotation
rotation
value
value
as
as
degrees
degrees
for
for
rotate.
rotate
And
and
you
you
could
could
even
even
extend
extend
this
this
with
with
skew
skew
and
and
scale
scale
or
or
whatever
whatever
other
other
transformations
transformations
you
you
wanna
wanna
use.
use
Now
now
if
if
we
we
skip
skip
ahead
ahead
here
here
to
to
the
the
animations,
animations
they're
they're
pretty
pretty
much
much
identical
identical
to
to
the
the
previous
previous
example
example
except
except
we're
we're
adding
adding
the
the
values
values
in
in
here
here
for
for
the
the
transforms
transforms
instead
instead
of
of
the
the
direction.
direction
Now
now
we're
we're
going
going
to
to
switch
switch
gears
gears
and
and
look
look
at
at
a
a
keyframed
keyframed
animation.
animation
Currently,
currently
all
all
of
of
our
our
animations
animations
use
use
a
a
transition
transition
which
which
basically
basically
just
just
has
has
a
a
single
single
starting
starting
point
point
and
and
ending
ending
point.
point
But
but
in
in
many
many
cases
cases
with
with
animations,
animations
you
you
have
have
multiple
multiple
intermediate
intermediate
steps
steps
that
that
can't
can't
be
be
defined
defined
by
by
just
just
a
a
single
single
start
start
and
and
end
end
point.
point
So
so
let's
let's
go
go
ahead
ahead
and
and
define
define
a
a
new
new
animation
animation
that
that
just
just
uses
uses
the
the
wildcard
wildcard
to
to
apply
apply
the
the
same
same
animation
animation
to
to
every
every
route.
route
Then
then
like
like
every
every
other
other
animation,
animation
we'll
we'll
set
set
the
the
initial
initial
position
position
to
to
absolute.
absolute
Then
then
we'll
we'll
also
also
set
set
up
up
a
a
group
group
to
to
run
run
the
the
2
2
page
page
animations
animations
concurrently.
concurrently
Then
then
in
in
all
all
the
the
previous
previous
examples,
examples
we
we
just
just
animated
animated
to
to
a
a
single
single
Style.
style
In
in
this
this
example,
example
we'll
we'll
use
use
the
the
keyframes
keyframes
function
function
to
to
pass
pass
in
in
an
an
array
array
of
of
styles.
styles
You
you
can
can
think
think
of
of
these
these
styles
styles
as
as
steps
steps
in
in
your
your
animation
animation
And
and
you
you
determine
determine
where
where
they
they
happen
happen
based
based
on
on
the
the
total
total
time
time
by
by
setting
setting
an
an
offset
offset
value.
value
So
so
an
an
offset
offset
of
of
0
0
will
will
apply
apply
the
the
style
style
as
as
soon
soon
as
as
the
the
animation
animation
starts.
starts
We're
we're
working
working
with
with
the
the
Entry
entry
component
component
we'll
we'll
go
go
ahead
ahead
and
and
scale
scale
it
it
to
to
0
0
and
and
translate
translate
it
it
off
off
the
the
page.
page
Then
then
we'll
we'll
add
add
a
a
second
second
style
style
with
with
an
an
offset
offset
of
of
0.3
0.3
which
which
for
for
a
a
2
2
1000
1000
millisecond
millisecond
animation
animation
would
would
be
be
600
600
milliseconds.
milliseconds
In
in
other
other
words,
words
this
this
style
style
will
will
be
be
applied
applied
to
to
the
the
element
element
at
at
30%
30%
of
of
its
its
animation
animation
lifecycle.
lifecycle
And
and
we'll
we'll
finish
finish
things
things
up
up
by
by
setting
setting
a
a
final
final
style
style
with
with
an
an
offset
offset
of
of
1
1
which
which
is
is
the
the
end
end
of
of
the
the
animation.
animation
And
and
that
that
will
will
be
be
when
when
the
the
component
component
is
is
fully
fully
visible
visible
at
at
a
a
scale
scale
of
of
1
1
and
and
a
a
translate
translate
of
of
0.
0
Now
now
we'll
we'll
go
go
down
down
here
here
to
to
the
the
Leave
leave
component
component
and
and
try
try
to
to
roughly
roughly
match
match
the
the
keyframes
keyframes
to
to
the
the
Entering
entering
component.
component
We
we
want
want
to
to
achieve
achieve
an
an
effect
effect
that
that
makes
makes
it
it
look
look
like
like
the
the
Entering
entering
component
component
bumps
bumps
The
the
old
old
component
component
off
off
the
the
screen.
screen
We
we
can
can
achieve
achieve
that
that
by
by
scaling
scaling
it
it
up
up
to
to
600%
600%
of
of
its
its
original
original
size
size
while
while
at
at
the
the
same
same
time
time
rotating
rotating
it
it
and
and
fading
fading
it
it
out
out
to
to
an
an
opacity
opacity
of
of
0.
0
The
the
end
end
result
result
is
is
this
this
3
3
d
d
effect
effect
of
of
the
the
pages
pages
looking
looking
like
like
they're
they're
colliding.
colliding
Hopefully,
hopefully
this
this
video
video
gave
gave
you
you
an
an
idea
idea
of
of
what
what
is
is
possible
possible
with
with
Angular
angular
router
router
animations
animations
so
so
you
you
can
can
start
start
building
building
your
your
own
own
beautiful
beautiful
transitions
transitions
between
between
Pages
pages
in
in
your
your
app.
app
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
make
make
sure
sure
to
to
grab
grab
the
the
full
full
source
source
code
code
at
at
Fireship
fireship
IO.
io
Thanks
thanks
for
for
watching
watching
and
and
I
i
will
will
talk
talk
to
to
you
you
soon.
soon
success
The speaker explains how to use the Angular app to create animations between router transitions, including setting up multiple component transitions, creating a route file, and setting up styles for each one. They provide step-by-step guides for creating a route file, importting information from Angular, and setting up the appropriate animation steps. The importance of creating a dynamic data attribute for each transition is emphasized, along with a keyframes function to rephrase a function and set up styles for each element. Viewers are instructed to like and subscribe to the channel and provide a full source code.
Beautiful Router Animations with Angular
An easy way to make your app more polished is to implement animations between router transitions. Today's video is a complete guide to router animations in Angular and we'll build 4 different styles that range from a simple Fade into a complex key frame sequence of animations. If you're new here, like and subscribe, and grab the full source code from Fireship IO. And before we get started, I wanna give a Shout out to the DealCrunch app, which is a real estate app available on iOS and Android. It was built by one of our pro members and is a great example of what you can do with Angular and Now, let's first start by looking at the actual animations that we'll build in this video. The first one is just a simple fade in, which is applied to every single route in the app. The second animation is a Slide from left to right, and it determines which direction to slide based on data that we pass in through the router configuration. The third one is slightly more Plex and adds in transformations so we can make the page kind of rotate in from the top corners. And the 4th and final one uses keyframes to create a sequence of style changes. For example, the new page comes in from the bottom and bumps the old page off and it spins and scales out of the screen. I'm starting off here in my Angular 7 app, And you'll notice that I've generated a handful of components here just so we have something to actually route to. And you don't need to do anything special with these components whatsoever, so we won't even bother looking at them in this video. Then the other thing we'll do in the app module is import the browser animations module and add it to the imports array. From there, we'll go into the HTML on the app component and create a main element and then define an animation called route animations. And then we'll point this to a method called prepare route which we'll define in a second and its job is to determine which animation to apply to a given route. Now, inside of this element, we'll define our router outlet and then give it a template variable name of outlet as well. Now, whenever a route changes, we can animate the content inside of the router outlet. Then you can see above the Outlet, I have my actual navigation bar, so this will stay fixed and not be animated between the route changes. Now we'll jump into the App Component typescript you'll see that I'm importing these animations which we have not yet defined. I simply wanna point out that we'll be adding these to the animation property in the component decorator and you can just uncomment whichever animation that you wanna use here. In our case, we're going to be defining different animations for different routes, so we need to create this prepareRoute method to pass in that dynamic Data. This is actually taken directly from the Angular docs and it's technically optional if you're only using a single animation for every route. In that case you could pass the Outlet to the animation directly in the gml. The last thing we wanna do is go into our router configuration and you'll see we have 3 routes set up each one just pointing to a component. When we get to our Slide reanimation will need to determine if a component should slide in from the left or slide in from the right. We can do this by passing in a data attribute and we'll give it a name of animation. Then we'll define animations named isRight and isLeft. Now that prepareRoute method that we defined earlier will look for this property and then apply the corresponding animation. The next thing I'm going to do is create a file called route animations dot ts in the App Directory and then we'll basically import everything under the kitchen sink from Angular animations. The first animation we'll build is the most basic use case, which is just a standard animation that gets applied to every route change. Notice we give the trigger a name of route animations That must match what you entered in the HTML. The next thing we'll do is define a transition, which determines how to apply styles from one animation to the next. In this case, we're using the star arrow syntax to define a wildcard that will apply to every single route transition. Angular animations will apply 2 pseudo selectors to the elements We're animating, one called enter and one called leave. So enter is the new page, leave is the old page. And query allows us to actually select these elements from the DOM. So the first step in the transition is to prepare these elements so they can be animated. To do that effectively, we'll position them as absolute And then we'll also bring the opacity down to 0 and then translate them off the screen and scale them down to 0. So basically with this step we're just creating a starting point from which we can use is to animate in the new page. And at the same time, we're immediately hiding the old page. So Angular animations will apply these steps in the transition one after the other. So at this point we've styled our elements both to be hidden. Now we need to animate in the new page. We can do that by making a query for the enter selector which again is the new page And then we'll animate that in. But first I wanna point out that I had to go into the style CSS and set the main element to position relative. This just ensures that you have a consistent Style between the page transitions. Now back to our animation we've queried for the enter selector then we'll use the animate method to set up the actual transition. We'll give it a timing of 600 milliseconds with the Ease function. Then we'll define a style that is basically the end point of the animation. So from our starting point we'll wanna set the Opacity to 1, scale it to 1 and then set the y axis translation to 0. So just to recap the entire animation, we start by hiding both the old and new components, then we fade in the new component over the course of 600 milliseconds. The end result looks like this and the same animation is applied to every route change. But you'll notice our layout has both a right page and a left page, so there's sort of a concept of position within this layout. In the next animation, we'll actually take into account the position and do a different animation based on whether or not the component is on the right or the left. Now I'm defining a function called slide 2 which will allow us to reuse a lot of the same logic for both the left and right transitions. This animation has multiple transition possibilities and that's based on the dynamic data that we're passing in through the router config. So any component that transitions to the is left animation will slide to the left. And conversely, any component going to the right will slide to the right. Then our middle component doesn't have any animation data defined at all. So we'll also wanna set up transitions any time that we're going from the is right animation just to any component. That means that we should be moving to the left, so we'll go ahead and use the slide to the left animation. And lastly, we'll do the same thing for the opposite. And now we'll define the actual slide two function. I'm setting up a variable for optional here because some of these queries will want to be in case the actual leaving component isn't present. Then just like we did before we'll set up some default styles here. In this case, we don't wanna actually hide the elements, but we'll just make them positioned salute and at the top of the page. And then we'll dynamically pass in the direction which can either be right or left. So those styles are applied to both components, But we want to add an additional style to only the entering component which will offset it in either direction 100% from its sibling component. At this point we have 2 different components that we want to animate and we want those to happen at the same time which is why we add them to a group otherwise they would happen one after the other. We can start with the animation for the Leaving component. In this case, we'll go ahead and animate it 100% off the screen. So that will move it in the The direction of the starting point from the Entering Component. Then to animate the Entering Component we'll just go ahead and set its direction to 0% which will put it right in the middle where it's supposed to be. And you'll also notice that both of the animations have the same timing function. And the end result is just a smooth sliding animation from left to right. But Let's go ahead and move on to transition number 3 which is just a variation on this last one but instead uses CSS transforms. This allows us to achieve that same sliding effect, but we can also do cool things like rotation or scaling or whatever else we wanna add in here. We'll start with the same basic setup as last time And we'll define triggers that go from left to right. But this time, you'll notice we're passing in a bunch of named arguments. So our function will take an x value, a y value, and also a Rotation value. So my goal here is basically to give you a function that you can configure with your own arguments to create a whole bunch of different crazy animations. Now Now if we go down to the actual function you can see that I'm using destructuring to add named arguments to this function with default values. That's just some useful syntactic sugar If you have a single object as an argument that has default values. Again, we'll start this animation off by styling the enter and leave components. Then we can define our transformations by simply interpolating values into Strings. For example, we can add x and y values to translate as percentages And then a rotation value as degrees for rotate. And you could even extend this with skew and scale or whatever other transformations you wanna use. Now if we skip ahead here to the animations, they're pretty much identical to the previous example except we're adding the values in here for the transforms instead of the direction. Now we're going to switch gears and look at a keyframed animation. Currently, all of our animations use a transition which basically just has a single starting point and ending point. But in many cases with animations, you have multiple intermediate steps that can't be defined by just a single start and end point. So let's go ahead and define a new animation that just uses the wildcard to apply the same animation to every route. Then like every other animation, we'll set the initial position to absolute. Then we'll also set up a group to run the 2 page animations concurrently. Then in all the previous examples, we just animated to a single Style. In this example, we'll use the keyframes function to pass in an array of styles. You can think of these styles as steps in your animation And you determine where they happen based on the total time by setting an offset value. So an offset of 0 will apply the style as soon as the animation starts. We're working with the Entry component we'll go ahead and scale it to 0 and translate it off the page. Then we'll add a second style with an offset of 0.3 which for a 2 1000 millisecond animation would be 600 milliseconds. In other words, this style will be applied to the element at 30% of its animation lifecycle. And we'll finish things up by setting a final style with an offset of 1 which is the end of the animation. And that will be when the component is fully visible at a scale of 1 and a translate of 0. Now we'll go down here to the Leave component and try to roughly match the keyframes to the Entering component. We want to achieve an effect that makes it look like the Entering component bumps The old component off the screen. We can achieve that by scaling it up to 600% of its original size while at the same time rotating it and fading it out to an opacity of 0. The end result is this 3 d effect of the pages looking like they're colliding. Hopefully, this video gave you an idea of what is possible with Angular router animations so you can start building your own beautiful transitions between Pages in your app. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And make sure to grab the full source code at Fireship IO. Thanks for watching and I will talk to you soon.
The speaker explains how to use the Angular app to create animations between router transitions, including setting up multiple component transitions, creating a route file, and setting up styles for each one. They provide step-by-step guides for creating a route file, importting information from Angular, and setting up the appropriate animation steps. The importance of creating a dynamic data attribute for each transition is emphasized, along with a keyframes function to rephrase a function and set up styles for each element. Viewers are instructed to like and subscribe to the channel and provide a full source code.