diff --git a/package-lock.json b/package-lock.json
index 80643c94..946b61a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1281,7 +1281,6 @@
       "requires": {
         "anymatch": "1.3.0",
         "async-each": "1.0.1",
-        "fsevents": "1.1.2",
         "glob-parent": "2.0.0",
         "inherits": "2.0.3",
         "is-binary-path": "1.0.1",
@@ -3306,905 +3305,6 @@
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
       "dev": true
     },
-    "fsevents": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.1.2.tgz",
-      "integrity": "sha512-Sn44E5wQW4bTHXvQmvSHwqbuiXtduD6Rrjm2ZtUEGbyrig+nUH3t/QD4M4/ZXViY556TBpRgZkHLDx3JxPwxiw==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "nan": "2.6.2",
-        "node-pre-gyp": "0.6.36"
-      },
-      "dependencies": {
-        "abbrev": {
-          "version": "1.1.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "ajv": {
-          "version": "4.11.8",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "co": "4.6.0",
-            "json-stable-stringify": "1.0.1"
-          }
-        },
-        "ansi-regex": {
-          "version": "2.1.1",
-          "bundled": true,
-          "dev": true
-        },
-        "aproba": {
-          "version": "1.1.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "are-we-there-yet": {
-          "version": "1.1.4",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "delegates": "1.0.0",
-            "readable-stream": "2.2.9"
-          }
-        },
-        "asn1": {
-          "version": "0.2.3",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "assert-plus": {
-          "version": "0.2.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "asynckit": {
-          "version": "0.4.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "aws-sign2": {
-          "version": "0.6.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "aws4": {
-          "version": "1.6.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "balanced-match": {
-          "version": "0.4.2",
-          "bundled": true,
-          "dev": true
-        },
-        "bcrypt-pbkdf": {
-          "version": "1.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "tweetnacl": "0.14.5"
-          }
-        },
-        "block-stream": {
-          "version": "0.0.9",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "inherits": "2.0.3"
-          }
-        },
-        "boom": {
-          "version": "2.10.1",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "hoek": "2.16.3"
-          }
-        },
-        "brace-expansion": {
-          "version": "1.1.7",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "balanced-match": "0.4.2",
-            "concat-map": "0.0.1"
-          }
-        },
-        "buffer-shims": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true
-        },
-        "caseless": {
-          "version": "0.12.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "co": {
-          "version": "4.6.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "code-point-at": {
-          "version": "1.1.0",
-          "bundled": true,
-          "dev": true
-        },
-        "combined-stream": {
-          "version": "1.0.5",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "delayed-stream": "1.0.0"
-          }
-        },
-        "concat-map": {
-          "version": "0.0.1",
-          "bundled": true,
-          "dev": true
-        },
-        "console-control-strings": {
-          "version": "1.1.0",
-          "bundled": true,
-          "dev": true
-        },
-        "core-util-is": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true
-        },
-        "cryptiles": {
-          "version": "2.0.5",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "boom": "2.10.1"
-          }
-        },
-        "dashdash": {
-          "version": "1.14.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "assert-plus": "1.0.0"
-          },
-          "dependencies": {
-            "assert-plus": {
-              "version": "1.0.0",
-              "bundled": true,
-              "dev": true,
-              "optional": true
-            }
-          }
-        },
-        "debug": {
-          "version": "2.6.8",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "deep-extend": {
-          "version": "0.4.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "delayed-stream": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true
-        },
-        "delegates": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "ecc-jsbn": {
-          "version": "0.1.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "jsbn": "0.1.1"
-          }
-        },
-        "extend": {
-          "version": "3.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "extsprintf": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true
-        },
-        "forever-agent": {
-          "version": "0.6.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "form-data": {
-          "version": "2.1.4",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "asynckit": "0.4.0",
-            "combined-stream": "1.0.5",
-            "mime-types": "2.1.15"
-          }
-        },
-        "fs.realpath": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true
-        },
-        "fstream": {
-          "version": "1.0.11",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "graceful-fs": "4.1.11",
-            "inherits": "2.0.3",
-            "mkdirp": "0.5.1",
-            "rimraf": "2.6.1"
-          }
-        },
-        "fstream-ignore": {
-          "version": "1.0.5",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "fstream": "1.0.11",
-            "inherits": "2.0.3",
-            "minimatch": "3.0.4"
-          }
-        },
-        "gauge": {
-          "version": "2.7.4",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "aproba": "1.1.1",
-            "console-control-strings": "1.1.0",
-            "has-unicode": "2.0.1",
-            "object-assign": "4.1.1",
-            "signal-exit": "3.0.2",
-            "string-width": "1.0.2",
-            "strip-ansi": "3.0.1",
-            "wide-align": "1.1.2"
-          }
-        },
-        "getpass": {
-          "version": "0.1.7",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "assert-plus": "1.0.0"
-          },
-          "dependencies": {
-            "assert-plus": {
-              "version": "1.0.0",
-              "bundled": true,
-              "dev": true,
-              "optional": true
-            }
-          }
-        },
-        "glob": {
-          "version": "7.1.2",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "fs.realpath": "1.0.0",
-            "inflight": "1.0.6",
-            "inherits": "2.0.3",
-            "minimatch": "3.0.4",
-            "once": "1.4.0",
-            "path-is-absolute": "1.0.1"
-          }
-        },
-        "graceful-fs": {
-          "version": "4.1.11",
-          "bundled": true,
-          "dev": true
-        },
-        "har-schema": {
-          "version": "1.0.5",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "har-validator": {
-          "version": "4.2.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ajv": "4.11.8",
-            "har-schema": "1.0.5"
-          }
-        },
-        "has-unicode": {
-          "version": "2.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "hawk": {
-          "version": "3.1.3",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "boom": "2.10.1",
-            "cryptiles": "2.0.5",
-            "hoek": "2.16.3",
-            "sntp": "1.0.9"
-          }
-        },
-        "hoek": {
-          "version": "2.16.3",
-          "bundled": true,
-          "dev": true
-        },
-        "http-signature": {
-          "version": "1.1.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "assert-plus": "0.2.0",
-            "jsprim": "1.4.0",
-            "sshpk": "1.13.0"
-          }
-        },
-        "inflight": {
-          "version": "1.0.6",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "once": "1.4.0",
-            "wrappy": "1.0.2"
-          }
-        },
-        "inherits": {
-          "version": "2.0.3",
-          "bundled": true,
-          "dev": true
-        },
-        "ini": {
-          "version": "1.3.4",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "number-is-nan": "1.0.1"
-          }
-        },
-        "is-typedarray": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "isarray": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true
-        },
-        "isstream": {
-          "version": "0.1.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "jodid25519": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "jsbn": "0.1.1"
-          }
-        },
-        "jsbn": {
-          "version": "0.1.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "json-schema": {
-          "version": "0.2.3",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "json-stable-stringify": {
-          "version": "1.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "jsonify": "0.0.0"
-          }
-        },
-        "json-stringify-safe": {
-          "version": "5.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "jsonify": {
-          "version": "0.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "jsprim": {
-          "version": "1.4.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "assert-plus": "1.0.0",
-            "extsprintf": "1.0.2",
-            "json-schema": "0.2.3",
-            "verror": "1.3.6"
-          },
-          "dependencies": {
-            "assert-plus": {
-              "version": "1.0.0",
-              "bundled": true,
-              "dev": true,
-              "optional": true
-            }
-          }
-        },
-        "mime-db": {
-          "version": "1.27.0",
-          "bundled": true,
-          "dev": true
-        },
-        "mime-types": {
-          "version": "2.1.15",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "mime-db": "1.27.0"
-          }
-        },
-        "minimatch": {
-          "version": "3.0.4",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "brace-expansion": "1.1.7"
-          }
-        },
-        "minimist": {
-          "version": "0.0.8",
-          "bundled": true,
-          "dev": true
-        },
-        "mkdirp": {
-          "version": "0.5.1",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "minimist": "0.0.8"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "node-pre-gyp": {
-          "version": "0.6.36",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "mkdirp": "0.5.1",
-            "nopt": "4.0.1",
-            "npmlog": "4.1.0",
-            "rc": "1.2.1",
-            "request": "2.81.0",
-            "rimraf": "2.6.1",
-            "semver": "5.3.0",
-            "tar": "2.2.1",
-            "tar-pack": "3.4.0"
-          }
-        },
-        "nopt": {
-          "version": "4.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "abbrev": "1.1.0",
-            "osenv": "0.1.4"
-          }
-        },
-        "npmlog": {
-          "version": "4.1.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "are-we-there-yet": "1.1.4",
-            "console-control-strings": "1.1.0",
-            "gauge": "2.7.4",
-            "set-blocking": "2.0.0"
-          }
-        },
-        "number-is-nan": {
-          "version": "1.0.1",
-          "bundled": true,
-          "dev": true
-        },
-        "oauth-sign": {
-          "version": "0.8.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "object-assign": {
-          "version": "4.1.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "once": {
-          "version": "1.4.0",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "wrappy": "1.0.2"
-          }
-        },
-        "os-homedir": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "os-tmpdir": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "osenv": {
-          "version": "0.1.4",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "os-homedir": "1.0.2",
-            "os-tmpdir": "1.0.2"
-          }
-        },
-        "path-is-absolute": {
-          "version": "1.0.1",
-          "bundled": true,
-          "dev": true
-        },
-        "performance-now": {
-          "version": "0.2.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "process-nextick-args": {
-          "version": "1.0.7",
-          "bundled": true,
-          "dev": true
-        },
-        "punycode": {
-          "version": "1.4.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "qs": {
-          "version": "6.4.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "rc": {
-          "version": "1.2.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "deep-extend": "0.4.2",
-            "ini": "1.3.4",
-            "minimist": "1.2.0",
-            "strip-json-comments": "2.0.1"
-          },
-          "dependencies": {
-            "minimist": {
-              "version": "1.2.0",
-              "bundled": true,
-              "dev": true,
-              "optional": true
-            }
-          }
-        },
-        "readable-stream": {
-          "version": "2.2.9",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "buffer-shims": "1.0.0",
-            "core-util-is": "1.0.2",
-            "inherits": "2.0.3",
-            "isarray": "1.0.0",
-            "process-nextick-args": "1.0.7",
-            "string_decoder": "1.0.1",
-            "util-deprecate": "1.0.2"
-          }
-        },
-        "request": {
-          "version": "2.81.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "aws-sign2": "0.6.0",
-            "aws4": "1.6.0",
-            "caseless": "0.12.0",
-            "combined-stream": "1.0.5",
-            "extend": "3.0.1",
-            "forever-agent": "0.6.1",
-            "form-data": "2.1.4",
-            "har-validator": "4.2.1",
-            "hawk": "3.1.3",
-            "http-signature": "1.1.1",
-            "is-typedarray": "1.0.0",
-            "isstream": "0.1.2",
-            "json-stringify-safe": "5.0.1",
-            "mime-types": "2.1.15",
-            "oauth-sign": "0.8.2",
-            "performance-now": "0.2.0",
-            "qs": "6.4.0",
-            "safe-buffer": "5.0.1",
-            "stringstream": "0.0.5",
-            "tough-cookie": "2.3.2",
-            "tunnel-agent": "0.6.0",
-            "uuid": "3.0.1"
-          }
-        },
-        "rimraf": {
-          "version": "2.6.1",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "glob": "7.1.2"
-          }
-        },
-        "safe-buffer": {
-          "version": "5.0.1",
-          "bundled": true,
-          "dev": true
-        },
-        "semver": {
-          "version": "5.3.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "set-blocking": {
-          "version": "2.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "signal-exit": {
-          "version": "3.0.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "sntp": {
-          "version": "1.0.9",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "hoek": "2.16.3"
-          }
-        },
-        "sshpk": {
-          "version": "1.13.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "asn1": "0.2.3",
-            "assert-plus": "1.0.0",
-            "bcrypt-pbkdf": "1.0.1",
-            "dashdash": "1.14.1",
-            "ecc-jsbn": "0.1.1",
-            "getpass": "0.1.7",
-            "jodid25519": "1.0.2",
-            "jsbn": "0.1.1",
-            "tweetnacl": "0.14.5"
-          },
-          "dependencies": {
-            "assert-plus": {
-              "version": "1.0.0",
-              "bundled": true,
-              "dev": true,
-              "optional": true
-            }
-          }
-        },
-        "string-width": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "code-point-at": "1.1.0",
-            "is-fullwidth-code-point": "1.0.0",
-            "strip-ansi": "3.0.1"
-          }
-        },
-        "string_decoder": {
-          "version": "1.0.1",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "safe-buffer": "5.0.1"
-          }
-        },
-        "stringstream": {
-          "version": "0.0.5",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "strip-ansi": {
-          "version": "3.0.1",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "ansi-regex": "2.1.1"
-          }
-        },
-        "strip-json-comments": {
-          "version": "2.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "tar": {
-          "version": "2.2.1",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "block-stream": "0.0.9",
-            "fstream": "1.0.11",
-            "inherits": "2.0.3"
-          }
-        },
-        "tar-pack": {
-          "version": "3.4.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "debug": "2.6.8",
-            "fstream": "1.0.11",
-            "fstream-ignore": "1.0.5",
-            "once": "1.4.0",
-            "readable-stream": "2.2.9",
-            "rimraf": "2.6.1",
-            "tar": "2.2.1",
-            "uid-number": "0.0.6"
-          }
-        },
-        "tough-cookie": {
-          "version": "2.3.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "punycode": "1.4.1"
-          }
-        },
-        "tunnel-agent": {
-          "version": "0.6.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "safe-buffer": "5.0.1"
-          }
-        },
-        "tweetnacl": {
-          "version": "0.14.5",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "uid-number": {
-          "version": "0.0.6",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "util-deprecate": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true
-        },
-        "uuid": {
-          "version": "3.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "verror": {
-          "version": "1.3.6",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "extsprintf": "1.0.2"
-          }
-        },
-        "wide-align": {
-          "version": "1.1.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "string-width": "1.0.2"
-          }
-        },
-        "wrappy": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true
-        }
-      }
-    },
     "fstream": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
@@ -8728,6 +7828,15 @@
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
       "dev": true
     },
+    "string_decoder": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "5.1.1"
+      }
+    },
     "string-width": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
@@ -8755,15 +7864,6 @@
         }
       }
     },
-    "string_decoder": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
-      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "5.1.1"
-      }
-    },
     "stringstream": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
diff --git a/src/app/core/animations.ts b/src/app/core/animations.ts
index 611dd1f1..193b9e10 100644
--- a/src/app/core/animations.ts
+++ b/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})
         ]))
-    ]);
-}
+    ])
+];
diff --git a/src/app/core/components/material-color-picker/material-color-picker.component.ts b/src/app/core/components/material-color-picker/material-color-picker.component.ts
index 3010b448..786ce470 100644
--- a/src/app/core/components/material-color-picker/material-color-picker.component.ts
+++ b/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
diff --git a/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.ts b/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.ts
index 84954253..4fb2853a 100644
--- a/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.ts
+++ b/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
 {
diff --git a/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts b/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts
index a32e0c9a..5585f1e5 100644
--- a/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts
+++ b/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
 {
diff --git a/src/app/core/components/theme-options/theme-options.component.scss b/src/app/core/components/theme-options/theme-options.component.scss
index e3cae6f3..f2670861 100644
--- a/src/app/core/components/theme-options/theme-options.component.scss
+++ b/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;
         }
     }
+
 }
diff --git a/src/app/core/components/theme-options/theme-options.component.ts b/src/app/core/components/theme-options/theme-options.component.ts
index c69966b7..15c6fbc7 100644
--- a/src/app/core/components/theme-options/theme-options.component.ts
+++ b/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()
diff --git a/src/app/main/content/apps/calendar/calendar.component.html b/src/app/main/content/apps/calendar/calendar.component.html
index 47b1545b..6f7969e7 100644
--- a/src/app/main/content/apps/calendar/calendar.component.html
+++ b/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'"
diff --git a/src/app/main/content/apps/calendar/calendar.component.ts b/src/app/main/content/apps/calendar/calendar.component.ts
index 067c0b0f..8c424350 100644
--- a/src/app/main/content/apps/calendar/calendar.component.ts
+++ b/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
 {
diff --git a/src/app/main/content/apps/chat/chat-start/chat-start.component.html b/src/app/main/content/apps/chat/chat-start/chat-start.component.html
index f51a7779..7d7a5e46 100644
--- a/src/app/main/content/apps/chat/chat-start/chat-start.component.html
+++ b/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!..
diff --git a/src/app/main/content/apps/chat/chat-start/chat-start.component.ts b/src/app/main/content/apps/chat/chat-start/chat-start.component.ts
index 4fe1e7b0..3cc6f8b8 100644
--- a/src/app/main/content/apps/chat/chat-start/chat-start.component.ts
+++ b/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
 {
diff --git a/src/app/main/content/apps/chat/chat.component.ts b/src/app/main/content/apps/chat/chat.component.ts
index c7f5ee60..51cb1971 100644
--- a/src/app/main/content/apps/chat/chat.component.ts
+++ b/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
 {
diff --git a/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.html b/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.html
index 228360bf..a2df3ca7 100644
--- a/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.html
+++ b/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">
diff --git a/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.ts b/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.ts
index 0cdd0bae..89cf73f3 100644
--- a/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.ts
+++ b/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
 {
diff --git a/src/app/main/content/apps/chat/sidenavs/left/left.component.ts b/src/app/main/content/apps/chat/sidenavs/left/left.component.ts
index d12d63ba..3ca134ac 100644
--- a/src/app/main/content/apps/chat/sidenavs/left/left.component.ts
+++ b/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
 {
diff --git a/src/app/main/content/apps/chat/sidenavs/right/right.component.ts b/src/app/main/content/apps/chat/sidenavs/right/right.component.ts
index 9f7b1515..3d9c33e9 100644
--- a/src/app/main/content/apps/chat/sidenavs/right/right.component.ts
+++ b/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
 {
diff --git a/src/app/main/content/apps/contacts/contact-list/contact-list.component.html b/src/app/main/content/apps/contacts/contact-list/contact-list.component.html
index 7a81ccea..5e43e571 100644
--- a/src/app/main/content/apps/contacts/contact-list/contact-list.component.html
+++ b/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 -->
diff --git a/src/app/main/content/apps/contacts/contact-list/contact-list.component.ts b/src/app/main/content/apps/contacts/contact-list/contact-list.component.ts
index f8624b9a..cc0e8287 100644
--- a/src/app/main/content/apps/contacts/contact-list/contact-list.component.ts
+++ b/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
 {
diff --git a/src/app/main/content/apps/contacts/contacts.component.html b/src/app/main/content/apps/contacts/contacts.component.html
index 24d898c4..4df1bda9 100644
--- a/src/app/main/content/apps/contacts/contacts.component.html
+++ b/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 -->
diff --git a/src/app/main/content/apps/contacts/contacts.component.ts b/src/app/main/content/apps/contacts/contacts.component.ts
index dcc4f8f6..68c708a1 100644
--- a/src/app/main/content/apps/contacts/contacts.component.ts
+++ b/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
 {
diff --git a/src/app/main/content/apps/dashboards/project/project.component.html b/src/app/main/content/apps/dashboards/project/project.component.html
index 00fc77a3..7d785fe9 100644
--- a/src/app/main/content/apps/dashboards/project/project.component.html
+++ b/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">
diff --git a/src/app/main/content/apps/dashboards/project/project.component.scss b/src/app/main/content/apps/dashboards/project/project.component.scss
index 4e52524e..4cd2735d 100644
--- a/src/app/main/content/apps/dashboards/project/project.component.scss
+++ b/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;
diff --git a/src/app/main/content/apps/dashboards/project/project.component.ts b/src/app/main/content/apps/dashboards/project/project.component.ts
index 6e81ed55..9c2b6c72 100644
--- a/src/app/main/content/apps/dashboards/project/project.component.ts
+++ b/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
 {
diff --git a/src/app/main/content/apps/file-manager/file-list/file-list.component.html b/src/app/main/content/apps/file-manager/file-list/file-list.component.html
index fe89ad27..b98db1fa 100644
--- a/src/app/main/content/apps/file-manager/file-list/file-list.component.html
+++ b/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>
diff --git a/src/app/main/content/apps/file-manager/file-list/file-list.component.ts b/src/app/main/content/apps/file-manager/file-list/file-list.component.ts
index 56e21283..15d1d560 100644
--- a/src/app/main/content/apps/file-manager/file-list/file-list.component.ts
+++ b/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
 {
diff --git a/src/app/main/content/apps/file-manager/file-manager.component.html b/src/app/main/content/apps/file-manager/file-manager.component.html
index d6f499e6..f49416be 100644
--- a/src/app/main/content/apps/file-manager/file-manager.component.html
+++ b/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>
diff --git a/src/app/main/content/apps/file-manager/file-manager.component.ts b/src/app/main/content/apps/file-manager/file-manager.component.ts
index 0fd30a5f..3374fc48 100644
--- a/src/app/main/content/apps/file-manager/file-manager.component.ts
+++ b/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()
diff --git a/src/app/main/content/apps/file-manager/sidenavs/details/details.component.html b/src/app/main/content/apps/file-manager/sidenavs/details/details.component.html
index 51b60b43..9c4b4cf7 100644
--- a/src/app/main/content/apps/file-manager/sidenavs/details/details.component.html
+++ b/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>
diff --git a/src/app/main/content/apps/file-manager/sidenavs/details/details.component.ts b/src/app/main/content/apps/file-manager/sidenavs/details/details.component.ts
index cb08fb7b..ced23ac0 100644
--- a/src/app/main/content/apps/file-manager/sidenavs/details/details.component.ts
+++ b/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
 {
diff --git a/src/app/main/content/apps/mail/mail-details/mail-details.component.html b/src/app/main/content/apps/mail/mail-details/mail-details.component.html
index 0927817a..42df8292 100644
--- a/src/app/main/content/apps/mail/mail-details/mail-details.component.html
+++ b/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">
diff --git a/src/app/main/content/apps/mail/mail-details/mail-details.component.ts b/src/app/main/content/apps/mail/mail-details/mail-details.component.ts
index ca3d9165..ac475616 100644
--- a/src/app/main/content/apps/mail/mail-details/mail-details.component.ts
+++ b/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
 {
diff --git a/src/app/main/content/apps/mail/mail-list/mail-list.component.html b/src/app/main/content/apps/mail/mail-list/mail-list.component.html
index 713a359c..467fac48 100644
--- a/src/app/main/content/apps/mail/mail-list/mail-list.component.html
+++ b/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>
diff --git a/src/app/main/content/apps/mail/mail-list/mail-list.component.scss b/src/app/main/content/apps/mail/mail-list/mail-list.component.scss
index 6451a90e..440b75aa 100644
--- a/src/app/main/content/apps/mail/mail-list/mail-list.component.scss
+++ b/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;
+    }
 }
diff --git a/src/app/main/content/apps/mail/mail-list/mail-list.component.ts b/src/app/main/content/apps/mail/mail-list/mail-list.component.ts
index 1059f2be..54eb8985 100644
--- a/src/app/main/content/apps/mail/mail-list/mail-list.component.ts
+++ b/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
 {
diff --git a/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html b/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html
index 249a4458..a00fbb05 100644
--- a/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html
+++ b/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
diff --git a/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.ts b/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.ts
index 2e92d113..54b1d3bc 100644
--- a/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.ts
+++ b/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
 {
diff --git a/src/app/main/content/apps/scrumboard/board/board.component.html b/src/app/main/content/apps/scrumboard/board/board.component.html
index de67df7d..1bb4f21c 100644
--- a/src/app/main/content/apps/scrumboard/board/board.component.html
+++ b/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>
diff --git a/src/app/main/content/apps/scrumboard/board/board.component.scss b/src/app/main/content/apps/scrumboard/board/board.component.scss
index 9d1ccb1c..edb67fc6 100644
--- a/src/app/main/content/apps/scrumboard/board/board.component.scss
+++ b/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;
diff --git a/src/app/main/content/apps/scrumboard/board/board.component.ts b/src/app/main/content/apps/scrumboard/board/board.component.ts
index 4eaa55d7..b9e4e5bc 100644
--- a/src/app/main/content/apps/scrumboard/board/board.component.ts
+++ b/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
 {
diff --git a/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts b/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts
index 9eda6022..dc031d81 100644
--- a/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts
+++ b/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
diff --git a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.ts b/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.ts
index b23eb83c..ddb268a8 100644
--- a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.ts
+++ b/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()
diff --git a/src/app/main/content/apps/scrumboard/scrumboard.component.html b/src/app/main/content/apps/scrumboard/scrumboard.component.html
index a5a29202..9aea1c88 100644
--- a/src/app/main/content/apps/scrumboard/scrumboard.component.html
+++ b/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>
diff --git a/src/app/main/content/apps/scrumboard/scrumboard.component.ts b/src/app/main/content/apps/scrumboard/scrumboard.component.ts
index 1b17dd5d..969748a4 100644
--- a/src/app/main/content/apps/scrumboard/scrumboard.component.ts
+++ b/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
 {
diff --git a/src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.html b/src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.html
index c8025806..4eda7b40 100644
--- a/src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.html
+++ b/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
diff --git a/src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.ts b/src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.ts
index c81f88f1..a8956656 100644
--- a/src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.ts
+++ b/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
 {
diff --git a/src/app/main/content/apps/todo/todo-details/todo-details.component.html b/src/app/main/content/apps/todo/todo-details/todo-details.component.html
index d17658e9..9884527d 100644
--- a/src/app/main/content/apps/todo/todo-details/todo-details.component.html
+++ b/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">
diff --git a/src/app/main/content/apps/todo/todo-details/todo-details.component.ts b/src/app/main/content/apps/todo/todo-details/todo-details.component.ts
index dc736847..1a82ca19 100644
--- a/src/app/main/content/apps/todo/todo-details/todo-details.component.ts
+++ b/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
 {
diff --git a/src/app/main/content/apps/todo/todo-list/todo-list.component.html b/src/app/main/content/apps/todo/todo-list/todo-list.component.html
index 460c949f..d6e9382b 100644
--- a/src/app/main/content/apps/todo/todo-list/todo-list.component.html
+++ b/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>
diff --git a/src/app/main/content/apps/todo/todo-list/todo-list.component.ts b/src/app/main/content/apps/todo/todo-list/todo-list.component.ts
index dac030cd..268070e2 100644
--- a/src/app/main/content/apps/todo/todo-list/todo-list.component.ts
+++ b/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
 {
diff --git a/src/app/main/content/apps/todo/todo.component.ts b/src/app/main/content/apps/todo/todo.component.ts
index 31661447..4511b929 100644
--- a/src/app/main/content/apps/todo/todo.component.ts
+++ b/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
 {
diff --git a/src/app/main/content/content.component.ts b/src/app/main/content/content.component.ts
index 1d05e904..297eaa11 100644
--- a/src/app/main/content/content.component.ts
+++ b/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
 {
diff --git a/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.html b/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.html
index 81962f9b..1eb104b1 100644
--- a/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.html
+++ b/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">
 
diff --git a/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.ts b/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.ts
index cdd9f2d6..5c060222 100644
--- a/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.ts
+++ b/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
 {
diff --git a/src/app/main/content/pages/authentication/lock/lock.component.html b/src/app/main/content/pages/authentication/lock/lock.component.html
index 1b74729a..cf055f5d 100644
--- a/src/app/main/content/pages/authentication/lock/lock.component.html
+++ b/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">
diff --git a/src/app/main/content/pages/authentication/lock/lock.component.ts b/src/app/main/content/pages/authentication/lock/lock.component.ts
index bbd3fe12..b08145a3 100644
--- a/src/app/main/content/pages/authentication/lock/lock.component.ts
+++ b/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
 {
diff --git a/src/app/main/content/pages/authentication/login-2/login-2.component.html b/src/app/main/content/pages/authentication/login-2/login-2.component.html
index fe2b6f79..8177b1bc 100644
--- a/src/app/main/content/pages/authentication/login-2/login-2.component.html
+++ b/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">
 
diff --git a/src/app/main/content/pages/authentication/login-2/login-2.component.ts b/src/app/main/content/pages/authentication/login-2/login-2.component.ts
index 22faf546..f74ba611 100644
--- a/src/app/main/content/pages/authentication/login-2/login-2.component.ts
+++ b/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: {
diff --git a/src/app/main/content/pages/authentication/login/login.component.html b/src/app/main/content/pages/authentication/login/login.component.html
index 69a23fdb..4221ec98 100644
--- a/src/app/main/content/pages/authentication/login/login.component.html
+++ b/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>
diff --git a/src/app/main/content/pages/authentication/login/login.component.ts b/src/app/main/content/pages/authentication/login/login.component.ts
index a1fcee1b..c8f4f4a4 100644
--- a/src/app/main/content/pages/authentication/login/login.component.ts
+++ b/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
 {
diff --git a/src/app/main/content/pages/authentication/register-2/register-2.component.html b/src/app/main/content/pages/authentication/register-2/register-2.component.html
index bbc773bc..5092e6fe 100644
--- a/src/app/main/content/pages/authentication/register-2/register-2.component.html
+++ b/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">
 
diff --git a/src/app/main/content/pages/authentication/register-2/register-2.component.ts b/src/app/main/content/pages/authentication/register-2/register-2.component.ts
index 85bdec05..57e6db4a 100644
--- a/src/app/main/content/pages/authentication/register-2/register-2.component.ts
+++ b/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: {
diff --git a/src/app/main/content/pages/authentication/register/register.component.html b/src/app/main/content/pages/authentication/register/register.component.html
index ec5127f9..d38b333d 100644
--- a/src/app/main/content/pages/authentication/register/register.component.html
+++ b/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>
diff --git a/src/app/main/content/pages/authentication/register/register.component.ts b/src/app/main/content/pages/authentication/register/register.component.ts
index 563a5efd..69b64353 100644
--- a/src/app/main/content/pages/authentication/register/register.component.ts
+++ b/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: {
diff --git a/src/app/main/content/pages/authentication/reset-password/reset-password.component.html b/src/app/main/content/pages/authentication/reset-password/reset-password.component.html
index 45527e9e..e9f2c27d 100644
--- a/src/app/main/content/pages/authentication/reset-password/reset-password.component.html
+++ b/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">
 
diff --git a/src/app/main/content/pages/authentication/reset-password/reset-password.component.ts b/src/app/main/content/pages/authentication/reset-password/reset-password.component.ts
index 268bcb62..f33643d9 100644
--- a/src/app/main/content/pages/authentication/reset-password/reset-password.component.ts
+++ b/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
 {
diff --git a/src/app/main/content/pages/coming-soon/coming-soon.component.html b/src/app/main/content/pages/coming-soon/coming-soon.component.html
index 447ad97e..fa19777e 100644
--- a/src/app/main/content/pages/coming-soon/coming-soon.component.html
+++ b/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">
 
diff --git a/src/app/main/content/pages/coming-soon/coming-soon.component.ts b/src/app/main/content/pages/coming-soon/coming-soon.component.ts
index 4308505c..76b287f5 100644
--- a/src/app/main/content/pages/coming-soon/coming-soon.component.ts
+++ b/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
 {
diff --git a/src/app/main/content/pages/maintenance/maintenance.component.html b/src/app/main/content/pages/maintenance/maintenance.component.html
index 09b74843..7c383483 100644
--- a/src/app/main/content/pages/maintenance/maintenance.component.html
+++ b/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>
diff --git a/src/app/main/content/pages/maintenance/maintenance.component.ts b/src/app/main/content/pages/maintenance/maintenance.component.ts
index ca814a9d..ae86b9bf 100644
--- a/src/app/main/content/pages/maintenance/maintenance.component.ts
+++ b/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({
diff --git a/src/app/main/content/pages/profile/profile.component.html b/src/app/main/content/pages/profile/profile.component.html
index ce2c7f7d..907d1f79 100644
--- a/src/app/main/content/pages/profile/profile.component.html
+++ b/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>
diff --git a/src/app/main/content/pages/profile/profile.component.scss b/src/app/main/content/pages/profile/profile.component.scss
index af51ba98..5fa913f9 100644
--- a/src/app/main/content/pages/profile/profile.component.scss
+++ b/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;
             }
         }
     }
-}
\ No newline at end of file
+
+    .content {
+        flex: 1;
+
+        md-tab-group {
+            height: 100%;
+
+            .mat-tab-body-wrapper {
+                flex-grow: 1;
+            }
+        }
+    }
+}
diff --git a/src/app/main/content/pages/profile/profile.component.ts b/src/app/main/content/pages/profile/profile.component.ts
index a14d43a4..3acea298 100644
--- a/src/app/main/content/pages/profile/profile.component.ts
+++ b/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
 {
diff --git a/src/app/main/content/pages/profile/tabs/about/about.component.html b/src/app/main/content/pages/profile/tabs/about/about.component.html
index 7c9f7404..d9cda5a1 100644
--- a/src/app/main/content/pages/profile/tabs/about/about.component.html
+++ b/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>
diff --git a/src/app/main/content/pages/profile/tabs/about/about.component.ts b/src/app/main/content/pages/profile/tabs/about/about.component.ts
index 0722a70c..7bfd816a 100644
--- a/src/app/main/content/pages/profile/tabs/about/about.component.ts
+++ b/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
 {
diff --git a/src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.html b/src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.html
index 59148e23..e491a242 100644
--- a/src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.html
+++ b/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>
diff --git a/src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.ts b/src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.ts
index 1fc43f84..df1f26c2 100644
--- a/src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.ts
+++ b/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
 {
diff --git a/src/app/main/content/pages/profile/tabs/timeline/timeline.component.html b/src/app/main/content/pages/profile/tabs/timeline/timeline.component.html
index 95060737..b717a0c5 100644
--- a/src/app/main/content/pages/profile/tabs/timeline/timeline.component.html
+++ b/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>
diff --git a/src/app/main/content/pages/profile/tabs/timeline/timeline.component.ts b/src/app/main/content/pages/profile/tabs/timeline/timeline.component.ts
index 9bb32d2d..69bffa7c 100644
--- a/src/app/main/content/pages/profile/tabs/timeline/timeline.component.ts
+++ b/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
 {