diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css
index 5945aee48c..017e5965d8 100644
--- a/dist/css/ionic-ios7.css
+++ b/dist/css/ionic-ios7.css
@@ -2289,12 +2289,12 @@ a.button {
   -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; }
 
 .slide-left-fade-add-active {
-  -webkit-transform: translate3d(-120px, 0, 0);
+  -webkit-transform: translate3d(-100%, 0, 0);
   opacity: 0; }
 
 .slide-in-left-fade-add {
   -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
-  -webkit-transform: translate3d(120px, 0, 0);
+  -webkit-transform: translate3d(100%, 0, 0);
   opacity: 0; }
 
 .slide-in-left-fade-add-active {
diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css
index e2c0a83934..be39f0d02b 100644
--- a/dist/css/ionic-scoped.css
+++ b/dist/css/ionic-scoped.css
@@ -3109,11 +3109,11 @@
   .ionic .slide-left-fade-add {
     -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; }
   .ionic .slide-left-fade-add-active {
-    -webkit-transform: translate3d(-120px, 0, 0);
+    -webkit-transform: translate3d(-100%, 0, 0);
     opacity: 0; }
   .ionic .slide-in-left-fade-add {
     -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
-    -webkit-transform: translate3d(120px, 0, 0);
+    -webkit-transform: translate3d(100%, 0, 0);
     opacity: 0; }
   .ionic .slide-in-left-fade-add-active {
     -webkit-transform: translate3d(0px, 0, 0);
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index d06c4d2a46..a37fa3e426 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -3875,12 +3875,12 @@ a.button {
   -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; }
 
 .slide-left-fade-add-active {
-  -webkit-transform: translate3d(-120px, 0, 0);
+  -webkit-transform: translate3d(-100%, 0, 0);
   opacity: 0; }
 
 .slide-in-left-fade-add {
   -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
-  -webkit-transform: translate3d(120px, 0, 0);
+  -webkit-transform: translate3d(100%, 0, 0);
   opacity: 0; }
 
 .slide-in-left-fade-add-active {
diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js
index dbb122d77c..a50196ce2d 100644
--- a/dist/js/ionic-angular.js
+++ b/dist/js/ionic-angular.js
@@ -593,21 +593,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
       // Compile the template with the new scrope, and append it to the navigation's content area
       var el = $compile(templateString)(childScope, function(cloned, scope) {
         var content = $element[0].querySelector('.content');
-        var title = $element.parent().parent().parent()[0].querySelector('.title');
-        var newTitle = angular.element(title.cloneNode());
-
-        $compile(newTitle)(childScope);
-
-        title.parentNode.insertBefore(newTitle[0], title.nextSibling);
-
-        console.log(newTitle);
         $animate.enter(cloned, angular.element(content));
-        $animate.addClass(angular.element(newTitle), 'slide-in-left-fade', function() {
-          $animate.removeClass(angular.element(newTitle), 'slide-in-left-fade', function() {
-            newTitle.scope().$destroy();
-            newTitle.remove();
-          });
-        });
       });
     });
   };
@@ -655,7 +641,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
   };
 })
 
-.directive('navContent', ['Gesture', '$animate', function(Gesture, $animate) {
+.directive('navContent', ['Gesture', '$animate', '$compile', function(Gesture, $animate, $compile) {
   return {
     restrict: 'ECA',
     require: '^navs',
@@ -666,6 +652,8 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
         var lastParent, lastIndex, childScope, childElement;
 
         $scope.title = $attr.title;
+        $scope.slideAnimation = $attr.slideAnimation || '';
+        $scope.slideTitleAnimation = $attr.slideTitleAnimation || '';
 
         if($attr.navBar === "false") {
           navCtrl.hideNavBar();
@@ -675,20 +663,31 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
 
         $scope.pushController($scope, $element);
 
+        var title = angular.element($element.parent().parent().parent()[0].querySelector('.title'));
+        var newTitle = angular.element(title.clone());
+
+        $compile(newTitle)($scope);
+
+        title.after(newTitle);
+
+        console.log(newTitle);
+
+        $animate.addClass(newTitle, $scope.slideTitleAnimation, function() {
+          $animate.removeClass(newTitle, $scope.slideTitleAnimation, function() {
+            newTitle.scope().$destroy();
+            newTitle.remove();
+          });
+        });
         
         $scope.$watch('isVisible', function(value) {
-          if(childElement) {
-            $animate.leave(childElement);
-            childElement = undefined;
-          }
-          if(childScope) {
-            childScope.$destroy();
-            childScope = undefined;
-          }
           if(value) {
             childScope = $scope.$new();
             transclude(childScope, function(clone) {
               childElement = clone;
+        
+              clone.addClass($scope.slideAnimation);
+
+              /*
               Gesture.on('drag', function(e) {
                 //navCtrl.handleDrag(e);
                 console.log('Content drag', e);
@@ -697,14 +696,24 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
               Gesture.on('release', function(e) {
                 //navCtrl._endDrag(e);
               }, childElement[0]);
+              */
 
               var title = $element.parent().parent().parent()[0].querySelector('.title');
               $animate.enter(clone, $element.parent(), $element);
-              $animate.addClass(angular.element(title), 'slide-left-fade', function() {
-                $animate.removeClass(angular.element(title), 'slide-left-fade', function() {
+              $animate.addClass(angular.element(title), $scope.slideTitleAnimation, function() {
+                $animate.removeClass(angular.element(title), $scope.slideTitleAnimation, function() {
                 });
               });
             });
+          } else {
+            if(childElement) {
+              $animate.leave(childElement);
+              childElement = undefined;
+            }
+            if(childScope) {
+              childScope.$destroy();
+              childScope = undefined;
+            }
           }
         });
       }
diff --git a/js/ext/angular/src/directive/ionicNav.js b/js/ext/angular/src/directive/ionicNav.js
index 5474dec9f8..b1ca19beff 100644
--- a/js/ext/angular/src/directive/ionicNav.js
+++ b/js/ext/angular/src/directive/ionicNav.js
@@ -48,21 +48,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
       // Compile the template with the new scrope, and append it to the navigation's content area
       var el = $compile(templateString)(childScope, function(cloned, scope) {
         var content = $element[0].querySelector('.content');
-        var title = $element.parent().parent().parent()[0].querySelector('.title');
-        var newTitle = angular.element(title.cloneNode());
-
-        $compile(newTitle)(childScope);
-
-        title.parentNode.insertBefore(newTitle[0], title.nextSibling);
-
-        console.log(newTitle);
         $animate.enter(cloned, angular.element(content));
-        $animate.addClass(angular.element(newTitle), 'slide-in-left-fade', function() {
-          $animate.removeClass(angular.element(newTitle), 'slide-in-left-fade', function() {
-            newTitle.scope().$destroy();
-            newTitle.remove();
-          });
-        });
       });
     });
   };
@@ -110,7 +96,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
   };
 })
 
-.directive('navContent', ['Gesture', '$animate', function(Gesture, $animate) {
+.directive('navContent', ['Gesture', '$animate', '$compile', function(Gesture, $animate, $compile) {
   return {
     restrict: 'ECA',
     require: '^navs',
@@ -121,6 +107,8 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
         var lastParent, lastIndex, childScope, childElement;
 
         $scope.title = $attr.title;
+        $scope.slideAnimation = $attr.slideAnimation || '';
+        $scope.slideTitleAnimation = $attr.slideTitleAnimation || '';
 
         if($attr.navBar === "false") {
           navCtrl.hideNavBar();
@@ -130,20 +118,31 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
 
         $scope.pushController($scope, $element);
 
+        var title = angular.element($element.parent().parent().parent()[0].querySelector('.title'));
+        var newTitle = angular.element(title.clone());
+
+        $compile(newTitle)($scope);
+
+        title.after(newTitle);
+
+        console.log(newTitle);
+
+        $animate.addClass(newTitle, $scope.slideTitleAnimation, function() {
+          $animate.removeClass(newTitle, $scope.slideTitleAnimation, function() {
+            newTitle.scope().$destroy();
+            newTitle.remove();
+          });
+        });
         
         $scope.$watch('isVisible', function(value) {
-          if(childElement) {
-            $animate.leave(childElement);
-            childElement = undefined;
-          }
-          if(childScope) {
-            childScope.$destroy();
-            childScope = undefined;
-          }
           if(value) {
             childScope = $scope.$new();
             transclude(childScope, function(clone) {
               childElement = clone;
+        
+              clone.addClass($scope.slideAnimation);
+
+              /*
               Gesture.on('drag', function(e) {
                 //navCtrl.handleDrag(e);
                 console.log('Content drag', e);
@@ -152,14 +151,24 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
               Gesture.on('release', function(e) {
                 //navCtrl._endDrag(e);
               }, childElement[0]);
+              */
 
               var title = $element.parent().parent().parent()[0].querySelector('.title');
               $animate.enter(clone, $element.parent(), $element);
-              $animate.addClass(angular.element(title), 'slide-left-fade', function() {
-                $animate.removeClass(angular.element(title), 'slide-left-fade', function() {
+              $animate.addClass(angular.element(title), $scope.slideTitleAnimation, function() {
+                $animate.removeClass(angular.element(title), $scope.slideTitleAnimation, function() {
                 });
               });
             });
+          } else {
+            if(childElement) {
+              $animate.leave(childElement);
+              childElement = undefined;
+            }
+            if(childScope) {
+              childScope.$destroy();
+              childScope = undefined;
+            }
           }
         });
       }
diff --git a/js/ext/angular/test/nav.html b/js/ext/angular/test/nav.html
index 2c78aaee5d..555897312a 100644
--- a/js/ext/angular/test/nav.html
+++ b/js/ext/angular/test/nav.html
@@ -7,9 +7,9 @@
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
     <link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
     <link rel="stylesheet" href="../../../../dist/css/ionic.css">
-    <script src="/vendor/angular/angular-1.2.0rc2.min.js"></script>
-    <script src="/vendor/angular/angular-touch.js"></script>
-    <script src="/vendor/angular/angular-animate.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-touch.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-animate.js"></script>
     <style>
 .view {
   position: fixed;
@@ -34,12 +34,12 @@
     <navs>
       <nav-bar></nav-bar>
 
-      <content has-header="true" ng-controller="AppCtrl" class="slide-in-slide-out">
+      <content has-header="true" ng-controller="AppCtrl">
       </content>
     </navs>
 
     <script id="page.html" type="text/ng-template">
-      <div title="Home" ng-controller="CatsCtrl" class="nav-content slide-in-slide-out">
+      <div title="Home" ng-controller="CatsCtrl" class="nav-content" slide-animation="slide-in-slide-out" slide-title-animation="slide-left-fade">
         <h1></h1>
         <a href="#" class="button button-success" ng-click="goNext()">Next</a>
         <list><list-item ng-repeat="item in items" on-select="goNext()">Test</list-item></list>
diff --git a/scss/ionic/_animations.scss b/scss/ionic/_animations.scss
index 66835b6d4f..3fad6570e2 100644
--- a/scss/ionic/_animations.scss
+++ b/scss/ionic/_animations.scss
@@ -92,7 +92,7 @@ $bezier-function: cubic-bezier(.1, .7, .1, 1);
 }
 .slide-left-fade-add-active {
   //margin-left: -80px;
-  -webkit-transform: translate3d(-120px, 0, 0);
+  -webkit-transform: translate3d(-100%, 0, 0);
   opacity: 0;
 }
 .slide-left-fade-remove {
@@ -102,7 +102,7 @@ $bezier-function: cubic-bezier(.1, .7, .1, 1);
 
 .slide-in-left-fade-add {
   -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
-  -webkit-transform: translate3d(120px, 0, 0);
+  -webkit-transform: translate3d(100%, 0, 0);
   opacity: 0;
 }
 .slide-in-left-fade-add-active {