Animations enhanced for all apps and some pages.

src/app/core/animations.ts

@@ -1,8 +1,56 @@
-import { sequence, trigger, animate, style, group, query, transition, animateChild, state } from '@angular/animations';
+import { sequence, trigger, animate, style, group, query, transition, animateChild, state, animation, useAnimation, stagger } from '@angular/animations';
 
-export class Animations
-{
-    public static fadeInOut = trigger('fadeInOut', [
+const customAnimation = animation([
+    style({
+        opacity  : '{{opacity}}',
+        transform: 'scale({{scale}}) translate3d({{x}}, {{y}}, {{z}})'
+    }),
+    animate('{{duration}} {{delay}} cubic-bezier(0.0, 0.0, 0.2, 1)', style('*'))
+], {
+    params: {
+        duration: '200ms',
+        delay   : '0ms',
+        opacity : '0',
+        scale   : '1',
+        x       : '0',
+        y       : '0',
+        z       : '0'
+    }
+});
+
+export const fuseAnimations = [
+
+    trigger('animate', [transition('void => *', [useAnimation(customAnimation)])]),
+
+    trigger('animateStagger', [
+        state('50', style('*')),
+        state('100', style('*')),
+        state('200', style('*')),
+
+        transition('void => 50',
+            query('@*',
+                [
+                    stagger('50ms', [
+                        animateChild()
+                    ])
+                ])),
+        transition('void => 100',
+            query('@*',
+                [
+                    stagger('100ms', [
+                        animateChild()
+                    ])
+                ])),
+        transition('void => 200',
+            query('@*',
+                [
+                    stagger('200ms', [
+                        animateChild()
+                    ])
+                ]))
+    ]),
+
+    trigger('fadeInOut', [
         state('0', style({
             display: 'none',
             opacity: 0
@@ -13,9 +61,9 @@ export class Animations
         })),
         transition('1 => 0', animate('300ms ease-out')),
         transition('0 => 1', animate('300ms ease-in'))
-    ]);
+    ]),
 
-    public static slideInOut = trigger('slideInOut', [
+    trigger('slideInOut', [
         state('0', style({
             height : '0px',
             display: 'none'
@@ -26,9 +74,9 @@ export class Animations
         })),
         transition('1 => 0', animate('300ms ease-out')),
         transition('0 => 1', animate('300ms ease-in'))
-    ]);
+    ]),
 
-    public static slideInLeft = trigger('slideInLeft', [
+    trigger('slideInLeft', [
         state('void', style({
             transform: 'translateX(-100%)',
             display  : 'none'
@@ -39,9 +87,9 @@ export class Animations
         })),
         transition('void => *', animate('300ms')),
         transition('* => void', animate('300ms'))
-    ]);
+    ]),
 
-    public static slideInRight = trigger('slideInRight', [
+    trigger('slideInRight', [
         state('void', style({
             transform: 'translateX(100%)',
             display  : 'none'
@@ -52,9 +100,9 @@ export class Animations
         })),
         transition('void => *', animate('300ms')),
         transition('* => void', animate('300ms'))
-    ]);
+    ]),
 
-    public static slideInTop = trigger('slideInTop', [
+    trigger('slideInTop', [
         state('void', style({
             transform: 'translateY(-100%)',
             display  : 'none'
@@ -65,9 +113,9 @@ export class Animations
         })),
         transition('void => *', animate('300ms')),
         transition('* => void', animate('300ms'))
-    ]);
+    ]),
 
-    public static slideInBottom = trigger('slideInBottom', [
+    trigger('slideInBottom', [
         state('void',
             style({
                 transform: 'translateY(100%)',
@@ -79,9 +127,9 @@ export class Animations
         })),
         transition('void => *', animate('300ms')),
         transition('* => void', animate('300ms'))
-    ]);
+    ]),
 
-    public static routerTransitionLeft = trigger('routerTransitionLeft', [
+    trigger('routerTransitionLeft', [
 
         transition('* => *', [
             query('fuse-content > :enter, fuse-content > :leave', [
@@ -106,7 +154,7 @@ export class Animations
                             transform: 'translateX(0)',
                             opacity  : 1
                         }),
-                        animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                             style({
                                 transform: 'translateX(-100%)',
                                 opacity  : 0
@@ -114,7 +162,7 @@ export class Animations
                     ], {optional: true}),
                     query('fuse-content > :enter', [
                         style({transform: 'translateX(100%)'}),
-                        animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                             style({
                                 transform: 'translateX(0%)',
                                 opacity  : 1
@@ -125,9 +173,9 @@ export class Animations
                 query('fuse-content > :enter', animateChild(), {optional: true})
             ])
         ])
-    ]);
+    ]),
 
-    public static routerTransitionRight = trigger('routerTransitionRight', [
+    trigger('routerTransitionRight', [
 
         transition('* => *', [
             query('fuse-content > :enter, fuse-content > :leave', [
@@ -152,7 +200,7 @@ export class Animations
                             transform: 'translateX(0)',
                             opacity  : 1
                         }),
-                        animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                             style({
                                 transform: 'translateX(100%)',
                                 opacity  : 0
@@ -160,7 +208,7 @@ export class Animations
                     ], {optional: true}),
                     query('fuse-content > :enter', [
                         style({transform: 'translateX(-100%)'}),
-                        animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                             style({
                                 transform: 'translateX(0%)',
                                 opacity  : 1
@@ -171,9 +219,9 @@ export class Animations
                 query('fuse-content > :enter', animateChild(), {optional: true})
             ])
         ])
-    ]);
+    ]),
 
-    public static routerTransitionUp = trigger('routerTransitionUp', [
+    trigger('routerTransitionUp', [
 
         transition('* => *', [
             query('fuse-content > :enter, fuse-content > :leave', [
@@ -191,35 +239,33 @@ export class Animations
                     opacity  : 0
                 })
             ], {optional: true}),
-            sequence([
-                group([
-                    query('fuse-content > :leave', [
+            group([
+                query('fuse-content > :leave', [
+                    style({
+                        transform: 'translateY(0)',
+                        opacity  : 1
+                    }),
+                    animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                         style({
-                            transform: 'translateY(0)',
+                            transform: 'translateY(-100%)',
+                            opacity  : 0
+                        }))
+                ], {optional: true}),
+                query('fuse-content > :enter', [
+                    style({transform: 'translateY(100%)'}),
+                    animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
+                        style({
+                            transform: 'translateY(0%)',
                             opacity  : 1
-                        }),
-                        animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
-                            style({
-                                transform: 'translateY(-100%)',
-                                opacity  : 0
-                            }))
-                    ], {optional: true}),
-                    query('fuse-content > :enter', [
-                        style({transform: 'translateY(100%)'}),
-                        animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
-                            style({
-                                transform: 'translateY(0%)',
-                                opacity  : 1
-                            }))
-                    ], {optional: true})
-                ]),
-                query('fuse-content > :leave', animateChild(), {optional: true}),
-                query('fuse-content > :enter', animateChild(), {optional: true})
-            ])
+                        }))
+                ], {optional: true})
+            ]),
+            query('fuse-content > :leave', animateChild(), {optional: true}),
+            query('fuse-content > :enter', animateChild(), {optional: true})
         ])
-    ]);
+    ]),
 
-    public static routerTransitionDown = trigger('routerTransitionDown', [
+    trigger('routerTransitionDown', [
 
         transition('* => *', [
             query('fuse-content > :enter, fuse-content > :leave', [
@@ -244,7 +290,7 @@ export class Animations
                             transform: 'translateY(0)',
                             opacity  : 1
                         }),
-                        animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                             style({
                                 transform: 'translateY(100%)',
                                 opacity  : 0
@@ -252,7 +298,7 @@ export class Animations
                     ], {optional: true}),
                     query('fuse-content > :enter', [
                         style({transform: 'translateY(-100%)'}),
-                        animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                             style({
                                 transform: 'translateY(0%)',
                                 opacity  : 1
@@ -263,9 +309,9 @@ export class Animations
                 query('fuse-content > :enter', animateChild(), {optional: true})
             ])
         ])
-    ]);
+    ]),
 
-    public static routerTransitionFade = trigger('routerTransitionFade', [
+    trigger('routerTransitionFade', [
 
         transition('* => *', group([
 
@@ -278,6 +324,7 @@ export class Animations
                     right   : 0
                 })
             ], {optional: true}),
+
             query('fuse-content > :enter', [
                 style({
                     opacity: 0
@@ -287,7 +334,7 @@ export class Animations
                 style({
                     opacity: 1
                 }),
-                animate('300ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+                animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                     style({
                         opacity: 0
                     }))
@@ -296,7 +343,7 @@ export class Animations
                 style({
                     opacity: 0
                 }),
-                animate('300ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+                animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                     style({
                         opacity: 1
                     }))
@@ -304,5 +351,5 @@ export class Animations
             query('fuse-content > :enter', animateChild(), {optional: true}),
             query('fuse-content > :leave', animateChild(), {optional: true})
         ]))
-    ]);
-}
+    ])
+];

src/app/core/components/material-color-picker/material-color-picker.component.ts

@@ -1,12 +1,12 @@
 import { Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { MatColors } from '../../matColors';
-import { Animations } from '../../animations';
+import { fuseAnimations } from '../../animations';
 
 @Component({
     selector     : 'fuse-material-color-picker',
     templateUrl  : './material-color-picker.component.html',
     styleUrls    : ['./material-color-picker.component.scss'],
-    animations   : [Animations.slideInLeft, Animations.slideInRight],
+    animations   : fuseAnimations,
     encapsulation: ViewEncapsulation.None
 })
 export class FuseMaterialColorPickerComponent implements OnInit, OnChanges

src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.ts

@@ -1,5 +1,5 @@
 import { Component, HostBinding, HostListener, Input, OnDestroy } from '@angular/core';
-import { Animations } from '../../../../animations';
+import { fuseAnimations } from '../../../../animations';
 import { FuseConfigService } from '../../../../services/config.service';
 import { Subscription } from 'rxjs/Subscription';
 
@@ -7,7 +7,7 @@ import { Subscription } from 'rxjs/Subscription';
     selector   : 'fuse-nav-horizontal-collapse',
     templateUrl: './nav-horizontal-collapse.component.html',
     styleUrls  : ['./nav-horizontal-collapse.component.scss'],
-    animations : [Animations.slideInOut]
+    animations : fuseAnimations
 })
 export class FuseNavHorizontalCollapseComponent implements OnDestroy
 {

src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts

@@ -1,13 +1,13 @@
 import { Component, HostBinding, Input, OnInit } from '@angular/core';
 import { FuseNavigationService } from '../../navigation.service';
 import { NavigationEnd, Router } from '@angular/router';
-import { Animations } from '../../../../animations';
+import { fuseAnimations } from '../../../../animations';
 
 @Component({
     selector   : 'fuse-nav-vertical-collapse',
     templateUrl: './nav-vertical-collapse.component.html',
     styleUrls  : ['./nav-vertical-collapse.component.scss'],
-    animations : [Animations.slideInOut]
+    animations : fuseAnimations
 })
 export class FuseNavVerticalCollapseComponent implements OnInit
 {

src/app/core/components/theme-options/theme-options.component.scss

@@ -15,6 +15,10 @@
     right: 0;
     top: 160px;
 
+    &.bar-closed .theme-options-panel {
+        display: none;
+    }
+
     .theme-options-panel {
         position: absolute;
         right: 0;
@@ -82,4 +86,5 @@
             opacity: 1;
         }
     }
+
 }

src/app/core/components/theme-options/theme-options.component.ts

@@ -1,14 +1,14 @@
-import { Component, ElementRef, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { Component, ElementRef, HostBinding, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
 import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations';
 import { Subscription } from 'rxjs/Subscription';
 import { FuseConfigService } from '../../services/config.service';
-import { Animations } from '../../animations';
+import { fuseAnimations } from '../../animations';
 
 @Component({
     selector   : 'fuse-theme-options',
     templateUrl: './theme-options.component.html',
     styleUrls  : ['./theme-options.component.scss'],
-    animations : [Animations.fadeInOut]
+    animations : fuseAnimations
 })
 export class FuseThemeOptionsComponent implements OnInit, OnDestroy
 {
@@ -18,10 +18,11 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
 
     public player: AnimationPlayer;
     fuseSettings: any;
-    barClosed: boolean;
 
     onSettingsChanged: Subscription;
 
+    @HostBinding('class.bar-closed') barClosed: boolean;
+
     constructor(
         private animationBuilder: AnimationBuilder,
         private fuseConfig: FuseConfigService,
@@ -53,8 +54,6 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
 
     closeBar()
     {
-        this.barClosed = true;
-
         this.player =
             this.animationBuilder
                 .build([
@@ -63,6 +62,10 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                 ]).create(this.panel.nativeElement);
 
         this.player.play();
+
+        this.player.onDone(() => {
+            this.barClosed = true;
+        });
     }
 
     openBar()

src/app/main/content/apps/calendar/calendar.component.html

@@ -1,5 +1,4 @@
 <div id="calendar" class="page-layout simple fullwidth" fusePerfectScrollbar>
-
     <!-- HEADER -->
     <div class="header" [ngClass]="viewDate | date:'MMM'">
 
@@ -9,9 +8,9 @@
 
                 <div class="logo mb-16 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
 
-                    <md-icon class="logo-icon">today</md-icon>
+                    <md-icon class="logo-icon" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">today</md-icon>
 
-                    <span class="logo-text">Calendar</span>
+                    <span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Calendar</span>
 
                 </div>
 
@@ -50,7 +49,8 @@
             <!-- / TOOLBAR -->
 
             <!-- HEADER BOTTOM -->
-            <div class="header-bottom" fxLayout="row" fxLayoutAlign="center center">
+            <div class="header-bottom" fxLayout="row" fxLayoutAlign="center center"
+                 *fuseIfOnDom [@animate]="{value:'*',params:{delay:'150ms'}}">
 
                 <button md-button class="mat-icon-button arrow"
                         mwlCalendarPreviousView
@@ -78,7 +78,8 @@
         </div>
 
         <!-- ADD EVENT BUTTON -->
-        <button md-fab class="add-event-button mat-warn" (click)="addEvent()" aria-label="Add event">
+        <button md-fab class="add-event-button mat-warn" (click)="addEvent()" aria-label="Add event"
+                *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">
             <md-icon>add</md-icon>
         </button>
         <!-- / ADD EVENT BUTTON -->
@@ -86,7 +87,7 @@
     <!-- / HEADER -->
 
     <!-- CONTENT -->
-    <div class="content" fusePerfectScrollbar>
+    <div class="content" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms',y:'50px'}}">
         <div [ngSwitch]="view">
             <mwl-calendar-month-view
                 *ngSwitchCase="'month'"

src/app/main/content/apps/calendar/calendar.component.ts

@@ -1,5 +1,5 @@
 import { startOfDay, endOfDay, subDays, addDays, endOfMonth, isSameDay, isSameMonth, addHours } from 'date-fns';
-import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { Subject } from 'rxjs/Subject';
 import { MdDialog, MdDialogRef } from '@angular/material';
 import { FuseCalendarEventFormDialogComponent } from './event-form/event-form.component';
@@ -13,13 +13,14 @@ import {
     CalendarMonthViewDay
 } from 'angular-calendar';
 import { FuseConfirmDialogComponent } from '../../../../core/components/confirm-dialog/confirm-dialog.component';
+import { fuseAnimations } from '../../../../core/animations';
 
 @Component({
-    selector       : 'fuse-calendar',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    templateUrl    : './calendar.component.html',
-    styleUrls      : ['./calendar.component.scss'],
-    encapsulation  : ViewEncapsulation.None
+    selector     : 'fuse-calendar',
+    templateUrl  : './calendar.component.html',
+    styleUrls    : ['./calendar.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    animations   : fuseAnimations
 })
 export class FuseCalendarComponent implements OnInit
 {

src/app/main/content/apps/chat/chat-start/chat-start.component.html

@@ -1,14 +1,15 @@
 <div fxFlex fxLayout="column" fxLayoutAlign="center center">
 
-    <div class="big-circle mat-elevation-z1" fxLayout="column" fxLayoutAlign="center center">
+    <div class="big-circle mat-elevation-z1 app-logo" fxLayout="column" fxLayoutAlign="center center"
+         *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
 
         <md-icon class="s-64 s-md-128">chat</md-icon>
 
     </div>
 
-    <span class="app-title my-24">Chat App</span>
+    <span class="app-title my-24" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',y:'25px'}}">Chat App</span>
 
-    <span fxHide fxShow.gt-md class="app-message">Select contact to start the chat!..</span>
+    <span fxHide fxShow.gt-md class="app-message" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms',y:'50px'}}">Select contact to start the chat!..</span>
 
     <button md-raised-button fxHide.gt-md class="" fuseMdSidenavToggler="chat-left-sidenav">
         Select contact to start the chat!..

src/app/main/content/apps/chat/chat-start/chat-start.component.ts

@@ -1,9 +1,11 @@
 import { Component, OnInit } from '@angular/core';
+import { fuseAnimations } from '../../../../../core/animations';
 
 @Component({
     selector   : 'fuse-chat-start',
     templateUrl: './chat-start.component.html',
-    styleUrls  : ['./chat-start.component.scss']
+    styleUrls  : ['./chat-start.component.scss'],
+    animations : fuseAnimations
 })
 export class FuseChatStartComponent implements OnInit
 {

src/app/main/content/apps/chat/chat.component.ts

@@ -1,11 +1,13 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { ChatService } from './chat.service';
+import { fuseAnimations } from '../../../../core/animations';
 
 @Component({
     selector     : 'fuse-chat',
     templateUrl  : './chat.component.html',
     styleUrls    : ['./chat.component.scss'],
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    animations   : fuseAnimations
 })
 export class FuseChatComponent implements OnInit
 {

src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.html

@@ -101,7 +101,7 @@
 <div class="sidenav-content" fusePerfectScrollbar fxFlex>
 
     <!-- CHATS CONTENT -->
-    <div>
+    <div *fuseIfOnDom [@animateStagger]="{value:'50'}">
 
         <!-- CHATS LIST-->
         <div class="chat-list" fxLayout="column">
@@ -112,7 +112,8 @@
 
             <button md-button class="contact"
                     *ngFor="let chat of user.chatList | filter: searchText"
-                    (click)="getChat(chat.contactId)" ngClass="{'unread':contact.unread}">
+                    (click)="getChat(chat.contactId)" ngClass="{'unread':contact.unread}"
+                    [@animate]="{value:'*',params:{y:'100%'}}">
 
                 <div fxLayout="row" fxLayoutAlign="start center">
 
@@ -152,7 +153,8 @@
             <button md-button class="contact"
                     ng-show="chatSearch"
                     *ngFor="let contact of contacts| filter: searchText"
-                    (click)="getChat(contact.id)">
+                    (click)="getChat(contact.id)"
+                    [@animate]="{value:'*',params:{y:'100%'}}">
 
                 <div fxLayout="row" fxLayoutAlign="start center">
                     <div class="avatar-wrapper" fxFlex="0 1 auto">

src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.ts

@@ -2,11 +2,13 @@ import { Component, OnInit } from '@angular/core';
 import { ChatService } from '../../../chat.service';
 import { FuseMdSidenavHelperService } from '../../../../../../../core/directives/md-sidenav-helper/md-sidenav-helper.service';
 import { ObservableMedia } from '@angular/flex-layout';
+import { fuseAnimations } from '../../../../../../../core/animations';
 
 @Component({
     selector   : 'fuse-chat-chats-sidenav',
     templateUrl: './chats.component.html',
-    styleUrls  : ['./chats.component.scss']
+    styleUrls  : ['./chats.component.scss'],
+    animations : fuseAnimations
 })
 export class FuseChatChatsSidenavComponent implements OnInit
 {

src/app/main/content/apps/chat/sidenavs/left/left.component.ts

@@ -1,12 +1,12 @@
 import { Component, OnInit } from '@angular/core';
-import { Animations } from '../../../../../../core/animations';
+import { fuseAnimations } from '../../../../../../core/animations';
 import { ChatService } from '../../chat.service';
 
 @Component({
     selector   : 'fuse-chat-left-sidenav',
     templateUrl: './left.component.html',
     styleUrls  : ['./left.component.scss'],
-    animations : [Animations.slideInLeft, Animations.slideInRight]
+    animations : fuseAnimations
 })
 export class FuseChatLeftSidenavComponent implements OnInit
 {

src/app/main/content/apps/chat/sidenavs/right/right.component.ts

@@ -1,12 +1,12 @@
 import { Component, OnInit } from '@angular/core';
-import { Animations } from '../../../../../../core/animations';
+import { fuseAnimations } from '../../../../../../core/animations';
 import { ChatService } from '../../chat.service';
 
 @Component({
     selector   : 'fuse-chat-right-sidenav',
     templateUrl: './right.component.html',
     styleUrls  : ['./right.component.scss'],
-    animations : [Animations.slideInLeft, Animations.slideInRight]
+    animations : fuseAnimations
 })
 export class FuseChatRightSidenavComponent implements OnInit
 {

src/app/main/content/apps/contacts/contact-list/contact-list.component.html

@@ -1,5 +1,5 @@
-<md-table #table [dataSource]="dataSource">
-
+<md-table #table [dataSource]="dataSource"
+          [@animateStagger]="{value:'50'}">
     <!-- Checkbox Column -->
     <ng-container cdkColumnDef="checkbox">
         <md-header-cell *cdkHeaderCellDef></md-header-cell>
@@ -95,15 +95,18 @@
 
     <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
     <md-row *cdkRowDef="let contact; columns: displayedColumns;"
+            class="contact"
             (click)="editContact(contact)"
             [ngClass]="{'md-light-blue-50-bg':checkboxes[contact.id]}"
-            md-ripple>
+            md-ripple
+            [@animate]="{value:'*',params:{y:'100%'}}">
     </md-row>
 </md-table>
 
 
 <!-- ADD CONTACT BUTTON -->
-<button md-fab class="md-accent-bg" id="add-contact-button" (click)="newContact()" aria-label="add contact">
+<button md-fab class="md-accent-bg" id="add-contact-button" (click)="newContact()" aria-label="add contact"
+        *fuseIfOnDom [@animate]="{value:'*', params:{delay:'300ms',scale:'.2'}}">
     <md-icon>person_add</md-icon>
 </button>
 <!-- / ADD CONTACT BUTTON -->

src/app/main/content/apps/contacts/contact-list/contact-list.component.ts

@@ -6,11 +6,13 @@ import { MdDialog, MdDialogRef } from '@angular/material';
 import { FuseConfirmDialogComponent } from '../../../../../core/components/confirm-dialog/confirm-dialog.component';
 import { FormGroup } from '@angular/forms';
 import { DataSource } from '@angular/cdk/collections';
+import { fuseAnimations } from '../../../../../core/animations';
 
 @Component({
     selector   : 'fuse-contacts-contact-list',
     templateUrl: './contact-list.component.html',
-    styleUrls  : ['./contact-list.component.scss']
+    styleUrls  : ['./contact-list.component.scss'],
+    animations   : fuseAnimations
 })
 export class FuseContactsContactListComponent implements OnInit
 {

src/app/main/content/apps/contacts/contacts.component.html

@@ -14,8 +14,8 @@
             </button>
 
             <div class="logo" fxLayout="row" fxLayoutAlign="start center">
-                <md-icon class="logo-icon mr-16">account_box</md-icon>
-                <span class="logo-text h1">Contacts</span>
+                <md-icon class="logo-icon mr-16" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">account_box</md-icon>
+                <span class="logo-text h1" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Contacts</span>
             </div>
 
         </div>
@@ -45,7 +45,7 @@
         <md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
                     fuseMdSidenavHelper="contacts-main-sidenav" md-is-locked-open="gt-md">
 
-            <fuse-contacts-main-sidenav></fuse-contacts-main-sidenav>
+            <fuse-contacts-main-sidenav *fuseIfOnDom [@animate]="{value:'*'}"></fuse-contacts-main-sidenav>
 
         </md-sidenav>
         <!-- / SIDENAV -->

src/app/main/content/apps/contacts/contacts.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { ContactsService } from './contacts.service';
-import { Animations } from '../../../../core/animations';
+import { fuseAnimations } from '../../../../core/animations';
 import { FormControl } from '@angular/forms';
 
 @Component({
@@ -8,7 +8,7 @@ import { FormControl } from '@angular/forms';
     templateUrl  : './contacts.component.html',
     styleUrls    : ['./contacts.component.scss'],
     encapsulation: ViewEncapsulation.None,
-    animations   : [Animations.slideInTop]
+    animations   : fuseAnimations
 })
 export class FuseContactsComponent implements OnInit
 {

src/app/main/content/apps/dashboards/project/project.component.html

@@ -10,7 +10,7 @@
 
                 <div fxLayout="row" fxLayoutAlign="space-between start">
 
-                    <span class="mat-display-1 mb-0">Welcome back, John!</span>
+                    <span class="mat-display-1 mb-0 welcome-message" *fuseIfOnDom [@animate]="{value:'*',params:{x:'50px'}}">Welcome back, John!</span>
 
                     <button md-icon-button fuseMdSidenavToggler="dashboards-right-sidenav" fxHide.gt-md>
                         <md-icon>menu</md-icon>
@@ -41,10 +41,10 @@
 
                     <md-tab label="Home">
 
-                        <div class="widget-group p-12" fxLayout="row" fxFlex="100" fxLayoutWrap>
+                        <div class="widget-group p-12" fxLayout="row" fxFlex="100" fxLayoutWrap *fuseIfOnDom [@animateStagger]="{value:'50'}">
 
                             <!-- WIDGET 1 -->
-                            <fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
+                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
 
                                 <!-- Front -->
                                 <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@@ -93,7 +93,7 @@
                             <!-- / WIDGET 1 -->
 
                             <!-- WIDGET 2 -->
-                            <fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
+                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
 
                                 <!-- Front -->
                                 <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@@ -135,7 +135,7 @@
                             <!-- / WIDGET 2 -->
 
                             <!-- WIDGET 3 -->
-                            <fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
+                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
 
                                 <!-- Front -->
                                 <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@@ -177,7 +177,7 @@
                             <!-- / WIDGET 3 -->
 
                             <!-- WIDGET 4 -->
-                            <fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
+                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
 
                                 <!-- Front -->
                                 <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@@ -219,7 +219,7 @@
 
 
                             <!-- WIDGET 5 -->
-                            <fuse-widget class="" fxLayout="row" fxFlex="100">
+                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="row" fxFlex="100">
 
                                 <!-- Front -->
                                 <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@@ -295,7 +295,7 @@
 
 
                             <!-- WIDGET 6 -->
-                            <fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">
+                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">
 
                                 <!-- Front -->
                                 <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@@ -345,7 +345,7 @@
                             <!-- / WIDGET 6 -->
 
                             <!-- WIDGET 7 -->
-                            <fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">
+                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">
 
                                 <!-- Front -->
                                 <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@@ -394,10 +394,10 @@
                     <md-tab label="Budget Summary">
 
                         <!-- WIDGET GROUP -->
-                        <div class="widget-group" fxLayout="row" fxFlex="100" fxLayoutWrap>
+                        <div class="widget-group" fxLayout="row" fxFlex="100" fxLayoutWrap *fuseIfOnDom [@animateStagger]="{value:'50'}">
 
                             <!-- WIDGET 8 -->
-                            <fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">
+                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">
 
                                 <!-- Front -->
                                 <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@@ -428,7 +428,7 @@
                             <!-- / WIDGET 8 -->
 
                             <!-- WIDGET 9 -->
-                            <fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">
+                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">
 
                                 <!-- Front -->
                                 <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@@ -542,7 +542,7 @@
                             <!-- / WIDGET 9 -->
 
                             <!-- WIDGET 10 -->
-                            <fuse-widget class="" fxLayout="row" fxFlex="100">
+                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="row" fxFlex="100">
 
                                 <!-- Front -->
                                 <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@@ -589,10 +589,10 @@
                     <md-tab label="Team Members">
 
                         <!-- WIDGET GROUP -->
-                        <div class="widget-group" fxLayout="row" fxFlex="100" fxLayoutWrap>
+                        <div class="widget-group" fxLayout="row" fxFlex="100" fxLayoutWrap *fuseIfOnDom [@animateStagger]="{value:'50'}">
 
                             <!-- WIDGET 11 -->
-                            <fuse-widget class="" fxLayout="row" fxFlex="100">
+                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="row" fxFlex="100">
 
                                 <!-- Front -->
                                 <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@@ -687,15 +687,15 @@
         <!-- / CENTER -->
 
         <!-- SIDENAV -->
-        <md-sidenav class="sidenav mat-sidenav-opened" align="end" mode="side"
-                    fuseMdSidenavHelper="dashboards-right-sidenav" md-is-locked-open="gt-md">
+        <md-sidenav class="sidenav mat-sidenav-opened" align="end" mode="side" opened="true" fuseMdSidenavHelper="dashboards-right-sidenav" md-is-locked-open="gt-md">
 
             <div class="sidenav-content" fusePerfectScrollbar>
+
                 <!-- WIDGET GROUP -->
-                <div class="widget-group" fxLayout="column" fxFlex="100">
+                <div class="widget-group" fxLayout="column" fxFlex="100" *fuseIfOnDom [@animateStagger]="{value:'50'}">
 
                     <!-- NOW WIDGET -->
-                    <fuse-widget class="sidenav-widget p-0">
+                    <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="sidenav-widget p-0">
 
                         <!-- Front -->
                         <div class="fuse-widget-front">
@@ -738,9 +738,8 @@
                     </fuse-widget>
                     <!-- / NOW WIDGET -->
 
-
                     <!-- WEATHER WIDGET -->
-                    <fuse-widget class="sidenav-widget p-0">
+                    <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="sidenav-widget p-0">
 
                         <!-- Front -->
                         <div class="fuse-widget-front">

src/app/main/content/apps/dashboards/project/project.component.scss

@@ -30,6 +30,15 @@
             }
 
             > .content {
+                flex: 1;
+
+                md-tab-group {
+                    height: 100%;
+
+                    .mat-tab-body-wrapper {
+                        flex-grow: 1;
+                    }
+                }
 
                 .mat-tab-label-container {
                     padding: 0 24px;

src/app/main/content/apps/dashboards/project/project.component.ts

@@ -4,12 +4,14 @@ import * as shape from 'd3-shape';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { Observable } from 'rxjs/Observable';
 import { DataSource } from '@angular/cdk/collections';
+import { fuseAnimations } from '../../../../../core/animations';
 
 @Component({
     selector     : 'fuse-project',
     templateUrl  : './project.component.html',
     styleUrls    : ['./project.component.scss'],
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    animations   : fuseAnimations
 })
 export class FuseProjectComponent implements OnInit, OnDestroy
 {

src/app/main/content/apps/file-manager/file-list/file-list.component.html

@@ -1,4 +1,4 @@
-<md-table #table [dataSource]="dataSource">
+<md-table #table [dataSource]="dataSource" *fuseIfOnDom [@animateStagger]="{value:'50'}">
 
     <!-- Type Column -->
     <ng-container cdkColumnDef="icon">
@@ -53,6 +53,8 @@
     <md-row *cdkRowDef="let row; columns: displayedColumns;"
             (click)="onSelect(row)"
             [ngClass]="{'md-light-blue-50-bg':row == selected}"
-            md-ripple>
+            md-ripple
+            [@animate]="{value:'*',params:{y:'100%'}}"
+    >
     </md-row>
 </md-table>

src/app/main/content/apps/file-manager/file-list/file-list.component.ts

@@ -2,11 +2,13 @@ import { Component, OnInit } from '@angular/core';
 import { FileManagerService } from '../file-manager.service';
 import { Observable } from 'rxjs/Observable';
 import { DataSource } from '@angular/cdk/collections';
+import { fuseAnimations } from '../../../../../core/animations';
 
 @Component({
     selector   : 'fuse-file-list',
     templateUrl: './file-list.component.html',
-    styleUrls  : ['./file-list.component.scss']
+    styleUrls  : ['./file-list.component.scss'],
+    animations : fuseAnimations
 })
 export class FuseFileManagerFileListComponent implements OnInit
 {

src/app/main/content/apps/file-manager/file-manager.component.html

@@ -34,7 +34,8 @@
                 <!-- / TOOLBAR -->
 
                 <!-- BREADCRUMB -->
-                <div class="breadcrumb text-truncate h1 pl-72" fxLayout="row" fxLayoutAlign="start center">
+                <div class="breadcrumb text-truncate h1 pl-72" fxLayout="row" fxLayoutAlign="start center"
+                     *fuseIfOnDom [@animate]="{value:'*',params:{x:'50px'}}">
                     <div *ngFor="let path of pathArr; last  as isLast" fxLayout="row" fxLayoutAlign="start center">
                         <span>{{path}}</span>
                         <md-icon *ngIf="!isLast" class="separator">chevron_right</md-icon>
@@ -48,7 +49,8 @@
                     <button md-fab
                             class="add-file-button mat-warn"
                             (click)="fileInput.click()"
-                            aria-label="Add file">
+                            aria-label="Add file"
+                            *fuseIfOnDom [@animate]="{value:'*', params:{delay:'300ms',scale:'0.2'}}">
                         <md-icon>add</md-icon>
                     </button>
                 </div>

src/app/main/content/apps/file-manager/file-manager.component.ts

@@ -1,11 +1,13 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { FileManagerService } from './file-manager.service';
+import { fuseAnimations } from '../../../../core/animations';
 
 @Component({
     selector     : 'fuse-file-manager',
     templateUrl  : './file-manager.component.html',
     styleUrls    : ['./file-manager.component.scss'],
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    animations   : fuseAnimations
 })
 export class FuseFileManagerComponent implements OnInit
 {
@@ -15,7 +17,6 @@ export class FuseFileManagerComponent implements OnInit
 
     constructor(private fileManagerService: FileManagerService)
     {
-
     }
 
     ngOnInit()

src/app/main/content/apps/file-manager/sidenavs/details/details.component.html

@@ -29,7 +29,8 @@
 <!-- SIDENAV CONTENT -->
 <div class="content p-24 md-white-bg" fusePerfectScrollbar>
 
-    <div class="file-details">
+    <div class="file-details"
+         *fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms'}}">
 
         <div class="preview file-icon" fxLayout="row" fxLayoutAlign="center center">
             <md-icon class="type-icon s-48" [class]="selected.type"></md-icon>

src/app/main/content/apps/file-manager/sidenavs/details/details.component.ts

@@ -1,10 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 import { FileManagerService } from '../../file-manager.service';
+import { fuseAnimations } from '../../../../../../core/animations';
 
 @Component({
     selector   : 'fuse-file-manager-details-sidenav',
     templateUrl: './details.component.html',
-    styleUrls  : ['./details.component.scss']
+    styleUrls  : ['./details.component.scss'],
+    animations : fuseAnimations
 })
 export class FuseFileManagerDetailsSidenavComponent implements OnInit
 {

src/app/main/content/apps/mail/mail-details/mail-details.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="!mail" fxLayout="column" fxLayoutAlign="center center" fxFlex>
-    <md-icon class="s-128 mb-16">email</md-icon>
-    <span class="select-message-text hint-text">Select a message to read</span>
+    <md-icon class="s-128 mb-16 select-message-icon" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">email</md-icon>
+    <span class="select-message-text hint-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'400ms'}}">Select a message to read</span>
 </div>
 
 <div *ngIf="mail">

src/app/main/content/apps/mail/mail-details/mail-details.component.ts

@@ -2,11 +2,13 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { MailService } from '../mail.service';
 import { Mail } from '../mail.model';
 import { Subscription } from 'rxjs/Subscription';
+import { fuseAnimations } from '../../../../../core/animations';
 
 @Component({
     selector   : 'fuse-mail-details',
     templateUrl: './mail-details.component.html',
-    styleUrls  : ['./mail-details.component.scss']
+    styleUrls  : ['./mail-details.component.scss'],
+    animations : fuseAnimations
 })
 export class FuseMailDetailsComponent implements OnInit, OnDestroy
 {

src/app/main/content/apps/mail/mail-list/mail-list.component.html

@@ -2,6 +2,9 @@
     <span class="no-messages-text hint-text">There are no messages!</span>
 </div>
 
-<fuse-mail-list-item md-ripple *ngFor="let mail of mails" [mail]="mail" (click)="readMail(mail.id)"
-                     [ngClass]="{'current-mail':mail?.id == currentMail?.id}">
-</fuse-mail-list-item>
+<div class="mail-list" *fuseIfOnDom [@animateStagger]="{value:'50'}">
+    <fuse-mail-list-item md-ripple *ngFor="let mail of mails" [mail]="mail" (click)="readMail(mail.id)"
+                         [ngClass]="{'current-mail':mail?.id == currentMail?.id}"
+                         [@animate]="{value:'*',params:{y:'100%'}}">
+    </fuse-mail-list-item>
+</div>

src/app/main/content/apps/mail/mail-list/mail-list.component.scss

@@ -11,4 +11,11 @@
         font-size: 24px;
         font-weight: 300;
     }
+
+    .mail-list {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+    }
 }

src/app/main/content/apps/mail/mail-list/mail-list.component.ts

@@ -4,11 +4,13 @@ import { ActivatedRoute } from '@angular/router';
 import { MailService } from '../mail.service';
 import { Location } from '@angular/common';
 import { Subscription } from 'rxjs/Subscription';
+import { fuseAnimations } from '../../../../../core/animations';
 
 @Component({
     selector   : 'fuse-mail-list',
     templateUrl: './mail-list.component.html',
-    styleUrls  : ['./mail-list.component.scss']
+    styleUrls  : ['./mail-list.component.scss'],
+    animations : fuseAnimations
 })
 export class FuseMailListComponent implements OnInit, OnDestroy
 {

src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html

@@ -2,11 +2,11 @@
 <div fxLayout="column" fxLayoutAlign="space-between start"
      class="header p-24 md-accent-bg" class.gt-md="header p-24 white-fg">
     <div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
-        <md-icon class="logo-icon s-32">mail</md-icon>
-        <span class="logo-text">Mailbox</span>
+        <md-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">mail</md-icon>
+        <span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Mailbox</span>
     </div>
 
-    <div class="account" fxLayout="column">
+    <div class="account" fxLayout="column" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms'}}">
         <div class="title">John Doe</div>
         <md-select class="account-selection" placeholder="Mail Selection"
                    floatPlaceholder="never"
@@ -21,7 +21,7 @@
 <!-- / SIDENAV HEADER -->
 
 <!-- SIDENAV CONTENT -->
-<div class="content" fusePerfectScrollbar>
+<div class="content" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{y:'50px'}}">
 
     <div class="p-24">
         <button md-raised-button fxFlex

src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.ts

@@ -4,11 +4,13 @@ import { Subscription } from 'rxjs/Subscription';
 import { FuseMailComposeDialogComponent } from '../../dialogs/compose/compose.component';
 import { MdDialog } from '@angular/material';
 import { FormGroup } from '@angular/forms';
+import { fuseAnimations } from '../../../../../../core/animations';
 
 @Component({
     selector   : 'fuse-mail-main-sidenav',
     templateUrl: './main-sidenav.component.html',
-    styleUrls  : ['./main-sidenav.component.scss']
+    styleUrls  : ['./main-sidenav.component.scss'],
+    animations : fuseAnimations
 })
 export class FuseMailMainSidenavComponent implements OnInit, OnDestroy
 {

src/app/main/content/apps/scrumboard/board/board.component.html

@@ -50,11 +50,12 @@
         </div>
         <!-- / HEADER -->
 
-        <div fxFlex class="board-content-wrapper p-16 p-md-24">
+        <div fxFlex class="board-content-wrapper p-16 p-md-24" [class]="board.settings.color+'-100-bg'">
 
             <!-- BOARD -->
-            <div class="board-content ngx-dnd-container p-16 p-md-24" [class]="board.settings.color+'-100-bg'" fxLayout="row"
-                 ngxDroppable="list" [model]="board.lists" (out)="onDrop($event)">
+            <div class="board-content ngx-dnd-container p-16 p-md-24" fxLayout="row"
+                 ngxDroppable="list" [model]="board.lists" (out)="onDrop($event)"
+                 *fuseIfOnDom [@animateStagger]="{value:'50'}">
 
                 <!-- LIST -->
                 <fuse-scrumboard-board-list
@@ -62,12 +63,15 @@
                     ngxDraggable
                     *ngFor="let list of board.lists"
                     [model]="list"
-                    [list]="list">
+                    [list]="list"
+                    [@animate]="{value:'*',params:{duration:'350ms',x:'100%'}}">
                 </fuse-scrumboard-board-list>
                 <!-- / LIST -->
 
                 <!-- NEW LIST BUTTON-->
-                <fuse-scrumboard-board-add-list class="new-list-wrapper" (onlistAdd)="onListAdd($event)"></fuse-scrumboard-board-add-list>
+                <fuse-scrumboard-board-add-list class="new-list-wrapper" (onlistAdd)="onListAdd($event)"
+                                                [@animate]="{value:'*',params:{duration:'350ms',x:'100%'}}">
+                </fuse-scrumboard-board-add-list>
                 <!-- / NEW LIST BUTTON-->
 
             </div>

src/app/main/content/apps/scrumboard/board/board.component.scss

@@ -100,6 +100,7 @@
 
             .board-content-wrapper {
                 position: relative;
+                background: #E5E7E8;
 
                 .board-content {
                     position: absolute;
@@ -108,7 +109,6 @@
                     bottom: 0;
                     left: 0;
                     height: 100%;
-                    background: #E5E7E8;
                     overflow-y: hidden;
                     overflow-x: auto;
                     -webkit-overflow-scrolling: touch;

src/app/main/content/apps/scrumboard/board/board.component.ts

@@ -4,11 +4,13 @@ import { ScrumboardService } from '../scrumboard.service';
 import { Subscription } from 'rxjs/Subscription';
 import { Location } from '@angular/common';
 import { List } from '../list.model';
+import { fuseAnimations } from '../../../../../core/animations';
 
 @Component({
     selector   : 'fuse-scrumboard-board',
     templateUrl: './board.component.html',
-    styleUrls  : ['./board.component.scss']
+    styleUrls  : ['./board.component.scss'],
+    animations  : fuseAnimations
 })
 export class FuseScrumboardBoardComponent implements OnInit, OnDestroy
 {

src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts

@@ -2,14 +2,14 @@ import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewEncapsul
 import { Subscription } from 'rxjs/Subscription';
 import { ScrumboardService } from '../../../../scrumboard.service';
 import { FuseUtils } from '../../../../../../../../core/fuseUtils';
-import { Animations } from '../../../../../../../../core/animations';
+import { fuseAnimations } from '../../../../../../../../core/animations';
 
 @Component({
     selector     : 'fuse-scrumboard-label-selector',
     templateUrl  : './label-selector.component.html',
     styleUrls    : ['./label-selector.component.scss'],
     encapsulation: ViewEncapsulation.None,
-    animations   : [Animations.slideInLeft, Animations.slideInRight]
+    animations   : fuseAnimations
 })
 
 export class FuseScrumboardLabelSelectorComponent implements OnInit, OnDestroy

src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.ts

@@ -1,13 +1,13 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';
 import { ScrumboardService } from '../../../scrumboard.service';
-import { Animations } from '../../../../../../../core/animations';
+import { fuseAnimations } from '../../../../../../../core/animations';
 
 @Component({
     selector   : 'fuse-scrumboard-board-settings',
     templateUrl: './settings.component.html',
     styleUrls  : ['./settings.component.scss'],
-    animations : [Animations.slideInLeft, Animations.slideInRight]
+    animations : fuseAnimations
 })
 export class FuseScrumboardBoardSettingsSidenavComponent implements OnInit, OnDestroy
 {
@@ -19,7 +19,6 @@ export class FuseScrumboardBoardSettingsSidenavComponent implements OnInit, OnDe
         private scrumboardService: ScrumboardService
     )
     {
-
     }
 
     ngOnInit()

src/app/main/content/apps/scrumboard/scrumboard.component.html

@@ -1,17 +1,19 @@
 <!-- BOARDS -->
 <div id="boards" class="md-primary-400-bg" fxLayout="column" fxLayoutAlign="start center" fxFlex fusePerfectScrollbar>
 
-    <div class="header pt-44 pt-md-88" fxFlex="0 0 auto">
+    <div class="header pt-44 pt-md-88" fxFlex="0 0 auto" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms'}}">
         <h1>Scrumboard App</h1>
     </div>
 
     <!-- BOARD LIST -->
-    <div class="board-list" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap>
+    <div class="board-list" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap
+         *fuseIfOnDom [@animateStagger]="{value:'50'}">
 
         <!-- BOARD -->
         <div class="board-list-item" *ngFor="let board of boards"
              [routerLink]="'/apps/scrumboard/boards/'+board.id+'/'+board.uri"
-             fxLayout="column" fxLayoutAlign="center center">
+             fxLayout="column" fxLayoutAlign="center center"
+             [@animate]="{value:'*',params:{y:'100%'}}">
             <md-icon class="s-64">assessment</md-icon>
             <div class="board-name">{{board.name}}</div>
         </div>
@@ -19,7 +21,8 @@
 
         <!-- NEW BOARD BUTTON -->
         <div class="board-list-item add-new-board" fxLayout="column" fxLayoutAlign="center center"
-             (click)="newBoard()">
+             (click)="newBoard()"
+             [@animate]="{value:'*',params:{y:'100%'}}">
             <md-icon class="s-64">add_circle</md-icon>
             <div class="board-name">Add new board</div>
         </div>

src/app/main/content/apps/scrumboard/scrumboard.component.ts

@@ -3,11 +3,13 @@ import { ScrumboardService } from './scrumboard.service';
 import { Subscription } from 'rxjs/Subscription';
 import { Router } from '@angular/router';
 import { Board } from './board.model';
+import { fuseAnimations } from '../../../../core/animations';
 
 @Component({
     selector   : 'fuse-scrumboard',
     templateUrl: './scrumboard.component.html',
-    styleUrls  : ['./scrumboard.component.scss']
+    styleUrls  : ['./scrumboard.component.scss'],
+    animations : fuseAnimations
 })
 export class FuseScrumboardComponent implements OnInit, OnDestroy
 {

src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.html

@@ -2,11 +2,11 @@
 <div fxLayout="column" fxLayoutAlign="space-between start"
      class="header p-24 md-accent-bg" class.gt-md="header p-24 white-fg">
     <div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
-        <md-icon class="logo-icon s-32">check_box</md-icon>
-        <span class="logo-text">To-do</span>
+        <md-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">check_box</md-icon>
+        <span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">To-do</span>
     </div>
 
-    <div class="account" fxLayout="column">
+    <div class="account" fxLayout="column" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms'}}">
         <div class="title">John Doe</div>
         <md-select class="account-selection" placeholder="Todo Selection"
                    floatPlaceholder="never"
@@ -21,7 +21,7 @@
 <!-- / SIDENAV HEADER -->
 
 <!-- SIDENAV CONTENT -->
-<div class="content" fusePerfectScrollbar>
+<div class="content" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{y:'50px'}}">
 
     <div class="p-24">
         <button md-raised-button fxFlex

src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.ts

@@ -2,11 +2,13 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { TodoService } from '../../todo.service';
 import { Subscription } from 'rxjs/Subscription';
 import { Router } from '@angular/router';
+import { fuseAnimations } from '../../../../../../core/animations';
 
 @Component({
     selector   : 'fuse-todo-main-sidenav',
     templateUrl: './main-sidenav.component.html',
-    styleUrls  : ['./main-sidenav.component.scss']
+    styleUrls  : ['./main-sidenav.component.scss'],
+    animations : fuseAnimations
 })
 export class FuseTodoMainSidenavComponent implements OnInit, OnDestroy
 {

src/app/main/content/apps/todo/todo-details/todo-details.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="!todo" fxLayout="column" fxLayoutAlign="center center" fxFlex>
-    <md-icon class="s-120 mb-12">check_box</md-icon>
-    <span class="hint-text mat-h1">Select a todo</span>
+    <md-icon class="s-120 mb-12 select-todo-icon" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">check_box</md-icon>
+    <span class="hint-text mat-h1 select-todo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'400ms'}}">Select a todo</span>
 </div>
 
 <div *ngIf="todo">

src/app/main/content/apps/todo/todo-details/todo-details.component.ts

@@ -4,11 +4,13 @@ import { Todo } from '../todo.model';
 import { Subscription } from 'rxjs/Subscription';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { FuseUtils } from '../../../../../core/fuseUtils';
+import { fuseAnimations } from '../../../../../core/animations';
 
 @Component({
     selector   : 'fuse-todo-details',
     templateUrl: './todo-details.component.html',
-    styleUrls  : ['./todo-details.component.scss']
+    styleUrls  : ['./todo-details.component.scss'],
+    animations : fuseAnimations
 })
 export class FuseTodoDetailsComponent implements OnInit, OnDestroy
 {

src/app/main/content/apps/todo/todo-list/todo-list.component.html

@@ -1,13 +1,14 @@
 <div *ngIf="todos.length === 0" fxLayout="column" fxLayoutAlign="center center" fxFlex>
     <span class="hint-text mat-h3">There are no todos!</span>
 </div>
-<div class="todo-list" ngxDroppable [model]="todos" (out)="onDrop($event)">
+<div class="todo-list" ngxDroppable [model]="todos" (out)="onDrop($event)" *fuseIfOnDom [@animateStagger]="{value:'50'}">
     <fuse-todo-list-item class="todo-list-item has-handle"
                          *ngFor="let todo of todos" [todo]="todo"
                          ngxDraggable
                          [model]="todo"
                          (click)="readTodo(todo.id)"
                          [ngClass]="{'current-todo':todo?.id == currentTodo?.id}"
-                         md-ripple>
+                         md-ripple
+                         [@animate]="{value:'*',params:{y:'100%'}}">
     </fuse-todo-list-item>
 </div>

src/app/main/content/apps/todo/todo-list/todo-list.component.ts

@@ -4,11 +4,13 @@ import { ActivatedRoute } from '@angular/router';
 import { TodoService } from '../todo.service';
 import { Location } from '@angular/common';
 import { Subscription } from 'rxjs/Subscription';
+import { fuseAnimations } from '../../../../../core/animations';
 
 @Component({
     selector   : 'fuse-todo-list',
     templateUrl: './todo-list.component.html',
-    styleUrls  : ['./todo-list.component.scss']
+    styleUrls  : ['./todo-list.component.scss'],
+    animations : fuseAnimations
 })
 export class FuseTodoListComponent implements OnInit, OnDestroy
 {

src/app/main/content/apps/todo/todo.component.ts

@@ -1,13 +1,15 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, HostBinding, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';
 import { TodoService } from './todo.service';
 import { FormControl } from '@angular/forms';
 import { Todo } from './todo.model';
+import { fuseAnimations } from '../../../../core/animations';
 
 @Component({
     selector   : 'fuse-todo',
     templateUrl: './todo.component.html',
-    styleUrls  : ['./todo.component.scss']
+    styleUrls  : ['./todo.component.scss'],
+    animations : fuseAnimations
 })
 export class FuseTodoComponent implements OnInit, OnDestroy
 {

src/app/main/content/content.component.ts

@@ -1,6 +1,6 @@
 import { Component, HostBinding, OnInit, OnDestroy } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
-import { Animations } from '../../core/animations';
+import { fuseAnimations } from '../../core/animations';
 import { FuseConfigService } from '../../core/services/config.service';
 import { Subscription } from 'rxjs/Subscription';
 import 'rxjs/add/operator/filter';
@@ -10,13 +10,7 @@ import 'rxjs/add/operator/map';
     selector   : 'fuse-content',
     templateUrl: './content.component.html',
     styleUrls  : ['./content.component.scss'],
-    animations : [
-        Animations.routerTransitionUp,
-        Animations.routerTransitionDown,
-        Animations.routerTransitionRight,
-        Animations.routerTransitionLeft,
-        Animations.routerTransitionFade
-    ]
+    animations : fuseAnimations
 })
 export class FuseContentComponent implements OnInit, OnDestroy
 {

src/app/main/content/pages/authentication/forgot-password/forgot-password.component.html

@@ -1,6 +1,6 @@
 <div id="forgot-password" fxLayout="column" fusePerfectScrollbar>
 
-    <div id="forgot-password-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
+    <div id="forgot-password-form-wrapper" fxLayout="column" fxLayoutAlign="center center" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
 
         <div id="forgot-password-form">
 

src/app/main/content/pages/authentication/forgot-password/forgot-password.component.ts

@@ -1,11 +1,13 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { FuseConfigService } from '../../../../../core/services/config.service';
+import { fuseAnimations } from '../../../../../core/animations';
 
 @Component({
     selector   : 'fuse-forgot-password',
     templateUrl: './forgot-password.component.html',
-    styleUrls  : ['./forgot-password.component.scss']
+    styleUrls  : ['./forgot-password.component.scss'],
+    animations : fuseAnimations
 })
 export class FuseForgotPasswordComponent implements OnInit
 {

src/app/main/content/pages/authentication/lock/lock.component.html

@@ -2,7 +2,7 @@
 
     <div id="lock-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
 
-        <div id="lock-form">
+        <div id="lock-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
 
             <div fxLayout="row" fxLayoutAlign="start center" fxLayout.sm="column" fxLayoutAlign.sm="center center">
                 <div class="avatar-container">

src/app/main/content/pages/authentication/lock/lock.component.ts

@@ -2,11 +2,13 @@ import { Component, OnInit } from '@angular/core';
 
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { FuseConfigService } from '../../../../../core/services/config.service';
+import { fuseAnimations } from '../../../../../core/animations';
 
 @Component({
     selector: 'fuse-lock',
     templateUrl: './lock.component.html',
-    styleUrls: ['./lock.component.scss']
+    styleUrls: ['./lock.component.scss'],
+    animations : fuseAnimations
 })
 export class FuseLockComponent implements OnInit
 {

src/app/main/content/pages/authentication/login-2/login-2.component.html

@@ -1,21 +1,21 @@
 <div id="login" fxLayout="row" fxLayoutAlign="start">
 
     <div id="login-intro" fxFlex fxHide fxShow.gt-xs>
-        <div class="logo">
+        <div class="logo" *fuseIfOnDom [@animate]="{value:'*',params:{scale:'0.2'}}">
             <span>F</span>
         </div>
 
-        <div class="title">
+        <div class="title" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',y:'25px'}}">
             Welcome to the FUSE!
         </div>
 
-        <div class="description">
+        <div class="description" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',y:'25px'}}">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper nisl erat,
             vel convallis elit fermentum pellentesque. Sed mollis velit facilisis facilisis viverra.
         </div>
     </div>
 
-    <div id="login-form-wrapper" fusePerfectScrollbar>
+    <div id="login-form-wrapper" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',x:'100%'}}">
 
         <div id="login-form">
 

src/app/main/content/pages/authentication/login-2/login-2.component.ts

@@ -2,11 +2,13 @@ import { Component, OnInit } from '@angular/core';
 
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { FuseConfigService } from '../../../../../core/services/config.service';
+import { fuseAnimations } from '../../../../../core/animations';
 
 @Component({
     selector   : 'fuse-login-2',
     templateUrl: './login-2.component.html',
-    styleUrls  : ['./login-2.component.scss']
+    styleUrls  : ['./login-2.component.scss'],
+    animations : fuseAnimations
 })
 export class FuseLogin2Component implements OnInit
 {
@@ -15,7 +17,8 @@ export class FuseLogin2Component implements OnInit
 
     constructor(
         private fuseConfig: FuseConfigService,
-        private formBuilder: FormBuilder)
+        private formBuilder: FormBuilder
+    )
     {
         this.fuseConfig.setSettings({
             layout: {

src/app/main/content/pages/authentication/login/login.component.html

@@ -2,7 +2,7 @@
 
     <div id="login-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
 
-        <div id="login-form">
+        <div id="login-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
             <div class="logo md-accent-bg">
                 <span>F</span>
             </div>

src/app/main/content/pages/authentication/login/login.component.ts

@@ -2,11 +2,13 @@ import { Component, OnInit } from '@angular/core';
 
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { FuseConfigService } from '../../../../../core/services/config.service';
+import { fuseAnimations } from '../../../../../core/animations';
 
 @Component({
     selector   : 'fuse-login',
     templateUrl: './login.component.html',
-    styleUrls  : ['./login.component.scss']
+    styleUrls  : ['./login.component.scss'],
+    animations : fuseAnimations
 })
 export class FuseLoginComponent implements OnInit
 {

src/app/main/content/pages/authentication/register-2/register-2.component.html

@@ -1,21 +1,21 @@
 <div id="register" fxLayout="row" fxLayoutAlign="start">
 
     <div id="register-intro" fxFlex fxHide fxShow.gt-xs>
-        <div class="logo">
+        <div class="logo" *fuseIfOnDom [@animate]="{value:'*',params:{scale:'0.2'}}">
             <span>F</span>
         </div>
 
-        <div class="title">
+        <div class="title" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',y:'25px'}}">
             Welcome to the FUSE!
         </div>
 
-        <div class="description">
+        <div class="description" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',y:'25px'}}">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper nisl erat,
             vel convallis elit fermentum pellentesque. Sed mollis velit facilisis facilisis viverra.
         </div>
     </div>
 
-    <div id="register-form-wrapper" fusePerfectScrollbar>
+    <div id="register-form-wrapper" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',x:'100%'}}">
 
         <div id="register-form">
 

src/app/main/content/pages/authentication/register-2/register-2.component.ts

@@ -2,11 +2,13 @@ import { Component, OnInit } from '@angular/core';
 
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { FuseConfigService } from '../../../../../core/services/config.service';
+import { fuseAnimations } from '../../../../../core/animations';
 
 @Component({
     selector   : 'fuse-register-2',
     templateUrl: './register-2.component.html',
-    styleUrls  : ['./register-2.component.scss']
+    styleUrls  : ['./register-2.component.scss'],
+    animations : fuseAnimations
 })
 export class FuseRegister2Component implements OnInit
 {
@@ -15,7 +17,8 @@ export class FuseRegister2Component implements OnInit
 
     constructor(
         private fuseConfig: FuseConfigService,
-        private formBuilder: FormBuilder)
+        private formBuilder: FormBuilder
+    )
     {
         this.fuseConfig.setSettings({
             layout: {

src/app/main/content/pages/authentication/register/register.component.html

@@ -2,7 +2,7 @@
 
     <div id="register-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
 
-        <div id="register-form">
+        <div id="register-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
             <div class="logo md-accent-bg">
                 <span>F</span>
             </div>

src/app/main/content/pages/authentication/register/register.component.ts

@@ -2,11 +2,13 @@ import { Component, OnInit } from '@angular/core';
 
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { FuseConfigService } from '../../../../../core/services/config.service';
+import { fuseAnimations } from '../../../../../core/animations';
 
 @Component({
     selector   : 'fuse-register',
     templateUrl: './register.component.html',
-    styleUrls  : ['./register.component.scss']
+    styleUrls  : ['./register.component.scss'],
+    animations : fuseAnimations
 })
 export class FuseRegisterComponent implements OnInit
 {
@@ -15,7 +17,8 @@ export class FuseRegisterComponent implements OnInit
 
     constructor(
         private fuseConfig: FuseConfigService,
-        private formBuilder: FormBuilder)
+        private formBuilder: FormBuilder
+    )
     {
         this.fuseConfig.setSettings({
             layout: {

src/app/main/content/pages/authentication/reset-password/reset-password.component.html

@@ -1,6 +1,7 @@
 <div id="reset-password" fxLayout="column" fusePerfectScrollbar>
 
-    <div id="reset-password-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
+    <div id="reset-password-form-wrapper" fxLayout="column" fxLayoutAlign="center center"
+         *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
 
         <div id="reset-password-form">
 

src/app/main/content/pages/authentication/reset-password/reset-password.component.ts

@@ -2,11 +2,13 @@ import { Component, OnInit } from '@angular/core';
 
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { FuseConfigService } from '../../../../../core/services/config.service';
+import { fuseAnimations } from '../../../../../core/animations';
 
 @Component({
     selector   : 'fuse-reset-password',
     templateUrl: './reset-password.component.html',
-    styleUrls  : ['./reset-password.component.scss']
+    styleUrls  : ['./reset-password.component.scss'],
+    animations : fuseAnimations
 })
 export class FuseResetPasswordComponent implements OnInit
 {

src/app/main/content/pages/coming-soon/coming-soon.component.html

@@ -2,7 +2,7 @@
 
     <div id="coming-soon-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
 
-        <div id="coming-soon-form">
+        <div id="coming-soon-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
 
             <div class="top">
 

src/app/main/content/pages/coming-soon/coming-soon.component.ts

@@ -2,11 +2,13 @@ import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 import { FuseConfigService } from '../../../../core/services/config.service';
+import { fuseAnimations } from '../../../../core/animations';
 
 @Component({
     selector   : 'fuse-coming-soon',
     templateUrl: './coming-soon.component.html',
-    styleUrls  : ['./coming-soon.component.scss']
+    styleUrls  : ['./coming-soon.component.scss'],
+    animations : fuseAnimations
 })
 export class FuseComingSoonComponent implements OnInit
 {

src/app/main/content/pages/maintenance/maintenance.component.html

@@ -2,7 +2,7 @@
 
     <div id="maintenance-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
 
-        <div id="maintenance-form">
+        <div id="maintenance-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
 
             <div class="logo">
                 <span>F</span>

src/app/main/content/pages/maintenance/maintenance.component.ts

@@ -1,16 +1,18 @@
 import { Component, OnInit } from '@angular/core';
 
 import { FuseConfigService } from '../../../../core/services/config.service';
+import { fuseAnimations } from '../../../../core/animations';
 
 @Component({
     selector   : 'fuse-maintenance',
     templateUrl: './maintenance.component.html',
-    styleUrls  : ['./maintenance.component.scss']
+    styleUrls  : ['./maintenance.component.scss'],
+    animations : fuseAnimations
 })
 export class FuseMaintenanceComponent implements OnInit
 {
     constructor(
-        private fuseConfig: FuseConfigService,
+        private fuseConfig: FuseConfigService
     )
     {
         this.fuseConfig.setSettings({

src/app/main/content/pages/profile/profile.component.html

@@ -6,11 +6,12 @@
 
         <div class="user-info" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-sm="row"
              fxLayoutAlign.gt-sm="start center">
-            <img class="profile-image avatar huge" src="assets/images/avatars/katherine.jpg">
-            <div class="name">Katherine Wilson</div>
+            <img class="profile-image avatar huge" src="assets/images/avatars/katherine.jpg"
+                 *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
+            <div class="name" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Katherine Wilson</div>
         </div>
 
-        <div class="actions" fxLayout="row" fxLayoutAlign="end center">
+        <div class="actions" fxLayout="row" fxLayoutAlign="end center" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms'}}">
             <button md-raised-button color="accent" aria-label="Follow">Follow</button>
             <button md-raised-button color="primary" aria-label="Send Message">Send Message</button>
         </div>
@@ -21,7 +22,7 @@
     <!-- CONTENT -->
     <div class="content">
 
-        <md-tab-group md-dynamic-height="true">
+        <md-tab-group dynamicHeight="true">
 
             <md-tab label="Timeline">
                 <fuse-profile-timeline></fuse-profile-timeline>

src/app/main/content/pages/profile/profile.component.scss

@@ -1,43 +1,52 @@
 @import "../../../../core/scss/fuse";
 
-:host {
+#profile {
 
-    #profile {
+    .header {
+        height: 320px;
+        min-height: 320px;
+        max-height: 320px;
+        background: url('/assets/images/backgrounds/march.jpg') no-repeat 0 45%;
+        background-size: 100% auto;
 
-        .header {
-            height: 320px;
-            min-height: 320px;
-            max-height: 320px;
-            background: url('/assets/images/backgrounds/march.jpg') no-repeat 0 45%;
-            background-size: 100% auto;
+        .profile-image {
+            margin-right: 24px;
 
-            .profile-image {
-                margin-right: 24px;
-
-                @include media-breakpoint('sm') {
-                    margin: 0 0 16px 0;
-                }
+            @include media-breakpoint('sm') {
+                margin: 0 0 16px 0;
             }
+        }
 
-            .name {
-                font-size: 34px;
-                color: #FFFFFF;
+        .name {
+            font-size: 34px;
+            color: #FFFFFF;
 
-                @include media-breakpoint('sm') {
-                    margin-bottom: 32px;
-                }
+            @include media-breakpoint('sm') {
+                margin-bottom: 32px;
             }
+        }
 
-            .actions {
+        .actions {
 
-                button {
-                    text-transform: none;
-                    padding: 0 16px;
-                    height: 32px;
-                    line-height: 32px;
-                    margin: 0 0 0 8px;
-                }
+            button {
+                text-transform: none;
+                padding: 0 16px;
+                height: 32px;
+                line-height: 32px;
+                margin: 0 0 0 8px;
             }
         }
     }
-}
+
+    .content {
+        flex: 1;
+
+        md-tab-group {
+            height: 100%;
+
+            .mat-tab-body-wrapper {
+                flex-grow: 1;
+            }
+        }
+    }
+}

src/app/main/content/pages/profile/profile.component.ts

@@ -1,9 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { fuseAnimations } from '../../../../core/animations';
 
 @Component({
-    selector   : 'fuse-profile',
-    templateUrl: './profile.component.html',
-    styleUrls  : ['./profile.component.scss']
+    selector     : 'fuse-profile',
+    templateUrl  : './profile.component.html',
+    styleUrls    : ['./profile.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    animations   : fuseAnimations
 })
 export class FuseProfileComponent implements OnInit
 {

src/app/main/content/pages/profile/tabs/about/about.component.html

@@ -1,8 +1,10 @@
 <div id="about" class="p-24" fxLayout="row" fxLayoutWrap>
 
-    <div class="about-content" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxFlex.gt-md="65">
+    <div class="about-content" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxFlex.gt-md="65"
+         *fuseIfOnDom [@animateStagger]="{value:'50'}">
 
-        <div class="profile-box info-box general" fxLayout="column">
+        <div class="profile-box info-box general" fxLayout="column"
+             [@animate]="{value:'*',params:{y:'100%'}}">
 
             <header class="md-accent-bg">
                 <div class="title">General Information</div>
@@ -36,7 +38,8 @@
 
         </div>
 
-        <div class="profile-box info-box work" fxLayout="column">
+        <div class="profile-box info-box work" fxLayout="column"
+             [@animate]="{value:'*',params:{y:'100%'}}">
 
             <header class="md-accent-bg">
                 <div class="title">Work</div>
@@ -65,7 +68,8 @@
             </div>
         </div>
 
-        <div class="profile-box info-box contact" fxLayout="column">
+        <div class="profile-box info-box contact" fxLayout="column"
+             [@animate]="{value:'*',params:{y:'100%'}}">
 
             <header class="md-accent-bg">
                 <div class="title">Contact</div>
@@ -100,9 +104,11 @@
 
     </div>
 
-    <div class="about-sidebar" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxFlex.gt-md="35">
+    <div class="about-sidebar" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxFlex.gt-md="35"
+         *fuseIfOnDom [@animateStagger]="{value:'50'}">
 
-        <div class="profile-box friends" fxLayout="column">
+        <div class="profile-box friends" fxLayout="column"
+             [@animate]="{value:'*',params:{y:'100%'}}">
 
             <header class="md-accent-bg" fxLayout="row" fxLayoutAlign="space-between center">
                 <div class="title">Friends</div>
@@ -119,7 +125,8 @@
 
         </div>
 
-        <div class="profile-box groups" fxLayout="column">
+        <div class="profile-box groups" fxLayout="column"
+             [@animate]="{value:'*',params:{y:'100%'}}">
 
             <header class="md-accent-bg" fxLayout="row" fxLayoutAlign="space-between center">
                 <div class="title">Joined Groups</div>

src/app/main/content/pages/profile/tabs/about/about.component.ts

@@ -1,10 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 import { ProfileService } from '../../profile.service';
+import { fuseAnimations } from '../../../../../../core/animations';
 
 @Component({
     selector   : 'fuse-profile-about',
     templateUrl: './about.component.html',
-    styleUrls  : ['./about.component.scss']
+    styleUrls  : ['./about.component.scss'],
+    animations : fuseAnimations
 })
 export class FuseProfileAboutComponent implements OnInit
 {

src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.html

@@ -1,12 +1,14 @@
-<div id="photos-videos" class="p-24">
+<div id="photos-videos" class="p-24" *fuseIfOnDom [@animateStagger]="{value:'50'}">
     <div class="period" *ngFor="let period of photosVideos">
+
         <div class="period-title">
             <span class="name">{{period.name}}</span>
             <span class="info">{{period.info}}</span>
         </div>
 
         <div class="period-media" fxLayout="row" fxLayoutWrap>
-            <div class="media" *ngFor="let media of period.media">
+            <div class="media" *ngFor="let media of period.media"
+                 [@animate]="{value:'*',params:{y:'100%'}}">
                 <img class="preview" [src]="media.preview" title="{{media.title}}">
                 <div class="title">{{media.title}}</div>
             </div>

src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.ts

@@ -1,11 +1,13 @@
 import { Component, OnInit } from '@angular/core';
 
 import { ProfileService } from '../../profile.service';
+import { fuseAnimations } from '../../../../../../core/animations';
 
 @Component({
     selector   : 'fuse-profile-photos-videos',
     templateUrl: './photos-videos.component.html',
-    styleUrls  : ['./photos-videos.component.scss']
+    styleUrls  : ['./photos-videos.component.scss'],
+    animations : fuseAnimations
 })
 export class FuseProfilePhotosVideosComponent implements OnInit
 {

src/app/main/content/pages/profile/tabs/timeline/timeline.component.html

@@ -1,9 +1,11 @@
 <div id="timeline" class="p-24" fxLayout="row" fxLayoutWrap>
 
     <div class="timeline-content" fxLayout="column" fxFlex="100" fxFlex.gt-sm="55" fxFlex.gt-md="65" fxFlexOrder="2"
-         fxFlexOrder.gt-sm="1">
+         fxFlexOrder.gt-sm="1"
+         *fuseIfOnDom [@animateStagger]="{value:'50'}">
 
-        <div class="profile-box add-post">
+        <div class="profile-box add-post"
+             [@animate]="{value:'*',params:{y:'100%'}}">
 
             <div class="form" fxFlex>
 
@@ -36,7 +38,8 @@
 
         <md-divider></md-divider>
 
-        <div class="timeline-item" *ngFor="let post of timeline.posts">
+        <div class="timeline-item" *ngFor="let post of timeline.posts"
+             [@animate]="{value:'*',params:{y:'100%'}}">
 
             <header fxLayout="row" fxLayoutAlign="space-between start">
                 <div class="user" fxLayout="row" fxLayoutAlign="start center">
@@ -135,7 +138,9 @@
     <div class="timeline-sidebar" fxLayout="column" fxFlex="100" fxFlex.gt-sm="45" fxFlex.gt-md="35" fxFlexOrder="1"
          fxFlexOrder.gt-sm="2">
 
-        <div class="profile-box latest-activity" fxLayout="column">
+        <div class="profile-box latest-activity" fxLayout="column"
+             *fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms',y:'100%'}}">
+
             <header class="md-accent-bg" fxLayout="row" fxLayoutAlign="space-between center">
                 <div class="title">Latest Activity</div>
                 <div class="more secondary-text">See All</div>

src/app/main/content/pages/profile/tabs/timeline/timeline.component.ts

@@ -1,10 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 import { ProfileService } from '../../profile.service';
+import { fuseAnimations } from '../../../../../../core/animations';
 
 @Component({
     selector   : 'fuse-profile-timeline',
     templateUrl: './timeline.component.html',
-    styleUrls  : ['./timeline.component.scss']
+    styleUrls  : ['./timeline.component.scss'],
+    animations : fuseAnimations
 })
 export class FuseProfileTimelineComponent implements OnInit
 {