@aloysius-software-factory/ngx-router-animations

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 .