ngx-router-animations
    TypeScript icon, indicating that this package has built-in type declarations

    13.0.0 • Public • Published

    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.

    npm NPM Downloads npm demo npm npm npm npm

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

    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

    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 .

    Install

    npm i ngx-router-animations

    DownloadsWeekly Downloads

    420

    Version

    13.0.0

    License

    MIT

    Unpacked Size

    376 kB

    Total Files

    16

    Last publish

    Collaborators

    • vugar