Angular Router Animations

ngx-router-animations is a collection of awesome, reusable router animations. Inspired by tympanus.net (thanks to Pedro Botelho) and implements those animations but with Angular Animation Package.

Note: the library requires Angular 4.2+, which introduced different new animation APIs needed by ngx-router-animations.

• Demo
• Install
• Usage
• Passing Parameters

DEMO

Animations Showcase or StackBlitzDemo

Install

 npm install ngx-router-animations --save

Load BrowserAnimationsModule which is needed by Angular Animations

@NgModule({
  imports: [
    ...
    BrowserAnimationsModule
  ]
})

Note If you want to support for IE/Edge or Safari install web-animations-js polyfill.

Usage

1 ) Name your routers which you want to animate by passing data to them. ( EG: state)

const routes:  Routes  =  [
{ path: '', redirectTo:  'home', pathMatch:  'full'  },
{ path: 'home', component: HomeComponent, data: {state:  'home'}  },
{ path: 'about', component: AboutComponent, data: {state:  'about'}},
{ path: 'contact', component: ContactComponent, data: {state:  'contact'}  },
{ path: 'follow', component: FollowComponent, data: {state:  'follow'}  },
];

2 ) Choose your favorite animation from Animations Showcase

3 ) Import your animation from the package:

import  {trigger, transition, useAnimation}  from  "@angular/animations";
import  {rotateCubeToLeft}  from  "ngx-router-animations";

@Component({
selector:  'my-app',
templateUrl:  './app.component.html',
styleUrls:  [  './app.component.css'  ],
animations:  [
	trigger('rotateCubeToLeft',  [ transition('home => about', useAnimation(rotateCubeToLeft))])
	]
})

export  class  AppComponent  {
	getState(outlet)  {
		return outlet.activatedRouteData.state;
	}
}

Note: As you see this example is to animate from Home To About page. If you want to animate any page you can try * => * transition. The purpose of getState function will be explained next.

4 ) In template

<div
	class="router-wrapper"
	[@rotateCubeToLeft]="getState(o)"
	>
	<router-outlet #o="outlet">  </router-outlet>
</div>

Note: We provide state to animation by getState function that gets name of curent route which is the name we just provided in routing .

5 ) In order to have correct animation your router-wrapper should have fixed (width, height) and below styles: (width and height can be customized)

.router-wrapper  {
	position:  relative;
	overflow:  hidden;
	width:  100vw;
	height:  calc(100%  -  47px);
	perspective:  1200px;
	transform-style:  preserve-3d;
}

In addition your components should also have defined width and height. The reason is to keep animation smooth since when navigating the content of that component is removed by router. Example: in home and about components.scss

:host  {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background: #60d7a9;
}

Still in Doubt ? Check minimalistic demo

Here is a unified version of the above. Instead of adding css to each and every component rendered by the router, I use css selector to select and apply the styles. I removed overflow: hidden because I find it unnecessary .

/* 
this class should wrap router outlet for transition animation 
this is required for router animation to work properly
*/
div.router-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 1200px;
    transform-style: preserve-3d;
}

/* 
this should select all components that is placed after <router-outlet> 
in a <div> with router-wrapper class

this is required for router animations to work properly

this assumes that components that is rendered by angular RouterOutlet is placed under 
<router-outlet> tag (just in case angular changes it in the future)
*/
div.router-wrapper router-outlet ~ * {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
}

Parameters

You can also provide your custom animation parameters such as duration and delay of animations. Supported params: ( enterTiming, leaveTiming, enterDelay, leaveDelay). Example with params:

animations: [
   trigger('rotateCubeToLeft', [ transition('* => *', useAnimation(rotateCubeToLeft,{
   	params: {enterTiming: '1', leaveTiming: '1', enterDelay: '0.2', leaveDelay: '0.2'}
   	}
   ))])
]

Note: Since in some cases params are not directly related, checkout at default params table so you can adjust timings according to them.

Default parameters table

| Animation | enterTiming | leaveTiming |enterdelay |leaveDelay |-------|-------|-------|-------|-------| | Move | 0.6 | 0.6 | 0 | 0 | Fade | 0.6 | 0.7 | 0 | 0 | Scale | 0.6 | 0.7 | 0 | 0 | Easing | 0.6 | 0.6 | 0 | 0 | Slide | 1 | 1 | 0 | 0 | Rotate / Glue | 0.6 | 0.8 | 0.2 | 0 | Rotate / Flip | 0.5 | 0.5 | 0 | 0 | Rotate / Room | 0.8 | 0.8 | 0 | 0 | Rotate / Cube | 0.6 | 0.6 | 0 | 0 | Rotate / Carousel | 0.8 | 0.8 | 0 | 0 | Rotate / Sides | 0.5 | 0.5 | 0.2 | 0

Contribution

You can fork project from github. Pull requests are kindly accepted. 💡 Checkout my other library: ngx-awesome-uploader .