diff --git a/ionic/components/nav/nav-item.js b/ionic/components/nav/nav-item.js
index 41d55369db..d02e5b8592 100644
--- a/ionic/components/nav/nav-item.js
+++ b/ionic/components/nav/nav-item.js
@@ -14,6 +14,7 @@ export class NavItem {
     this.id = util.nextUid();
     this.headerProtos = [];
     this.toolbarViews = [];
+    this._titleEle = undefined;
     this.disposals = [];
   }
 
@@ -103,6 +104,21 @@ export class NavItem {
     return elements;
   }
 
+  getTitle() {
+    if (this._titleEle === undefined) {
+      let toolbarElements = this.getToolbars();
+      for (let i = 0; i < toolbarElements.length; i++) {
+        var titleEle = toolbarElements[i].querySelector('ion-title');
+        if (titleEle) {
+          this._titleEle = titleEle;
+          return this._titleEle;
+        }
+      }
+      this._titleEle = null;
+    }
+    return this._titleEle;
+  }
+
   destroy() {
     for (let i = 0; i < this.disposals.length; i++) {
       this.disposals[i]();
diff --git a/ionic/components/nav/test/basic/pages/first-page.js b/ionic/components/nav/test/basic/pages/first-page.js
index c2ca3b34b2..7c74aab922 100644
--- a/ionic/components/nav/test/basic/pages/first-page.js
+++ b/ionic/components/nav/test/basic/pages/first-page.js
@@ -1,14 +1,14 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {NavController, Header, Toolbar} from 'ionic/ionic';
+import {NavController, HeaderTemplate, Toolbar} from 'ionic/ionic';
 import {SecondPage} from './second-page';
 
 
 @Component({selector: 'ion-view'})
 @View({
   templateUrl: 'pages/first-page.html',
-  directives: [Header, Toolbar]
+  directives: [HeaderTemplate, Toolbar]
 })
 export class FirstPage {
   constructor(
diff --git a/ionic/components/nav/test/basic/pages/second-page.js b/ionic/components/nav/test/basic/pages/second-page.js
index d7a80255a3..b4b939009b 100644
--- a/ionic/components/nav/test/basic/pages/second-page.js
+++ b/ionic/components/nav/test/basic/pages/second-page.js
@@ -1,14 +1,14 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {NavController, NavParams, Header, Toolbar} from 'ionic/ionic';
+import {NavController, NavParams, HeaderTemplate, Toolbar} from 'ionic/ionic';
 import {ThirdPage} from './third-page';
 
 
 @Component()
 @View({
   templateUrl: 'pages/second-page.html',
-  directives: [Header, Toolbar]
+  directives: [HeaderTemplate, Toolbar]
 })
 export class SecondPage {
   constructor(
diff --git a/ionic/components/nav/test/basic/pages/third-page.js b/ionic/components/nav/test/basic/pages/third-page.js
index 279dad6457..d9605d7d06 100644
--- a/ionic/components/nav/test/basic/pages/third-page.js
+++ b/ionic/components/nav/test/basic/pages/third-page.js
@@ -1,13 +1,13 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {NavController, Header, Toolbar} from 'ionic/ionic';
+import {NavController, HeaderTemplate, Toolbar} from 'ionic/ionic';
 
 
 @Component()
 @View({
   templateUrl: 'pages/third-page.html',
-  directives: [Header, Toolbar]
+  directives: [HeaderTemplate, Toolbar]
 })
 export class ThirdPage {
   constructor(
diff --git a/ionic/components/toolbar/extensions/ios.scss b/ionic/components/toolbar/extensions/ios.scss
index 3eee683fef..b7dbdb48d0 100644
--- a/ionic/components/toolbar/extensions/ios.scss
+++ b/ionic/components/toolbar/extensions/ios.scss
@@ -44,10 +44,6 @@ $toolbar-ios-button-background-color:       transparent !default;
     @include flex-order(map-get($toolbar-order-ios, 'secondary'));
   }
 
-  .toolbar-inner-title {
-
-  }
-
   ion-title {
     @include flex-order(map-get($toolbar-order-ios, 'title'));
     font-size: $toolbar-ios-title-font-size;
diff --git a/ionic/components/toolbar/toolbar.js b/ionic/components/toolbar/toolbar.js
index d1aa776245..9c4f089c62 100644
--- a/ionic/components/toolbar/toolbar.js
+++ b/ionic/components/toolbar/toolbar.js
@@ -93,7 +93,7 @@ new IonicComponent(Toolbar, {});
 @Directive({
   selector: 'template[header]'
 })
-export class Header {
+export class HeaderTemplate {
   constructor(navItem: NavItem, protoViewRef: ProtoViewRef) {
     navItem.addHeader(protoViewRef);
   }
diff --git a/ionic/transitions/ios-transition.js b/ionic/transitions/ios-transition.js
index 66a9ecccc3..2bb75cd7dd 100644
--- a/ionic/transitions/ios-transition.js
+++ b/ionic/transitions/ios-transition.js
@@ -33,6 +33,9 @@ class IOSTransition extends Animation {
     // create animation for the entering toolbars
     let enteringToolbars = new Animation(this.enteringItem.getToolbars());
 
+    // create animation for the entering title element
+    let enteringTitle = new Animation(this.enteringItem.getTitle());
+
     // create animation for the leaving content
     // leavingItem could be null, but the animation instance knows to do nothing
     let leavingContent = new Animation(this.leavingItem && this.leavingItem.getContent());
@@ -41,6 +44,9 @@ class IOSTransition extends Animation {
     // leavingItem could be null, but the animation instance knows to do nothing
     let leavingToolbars = new Animation(this.leavingItem && this.leavingItem.getToolbars());
 
+    // create animation for the entering title element
+    let leavingTitle = new Animation(this.leavingItem && this.leavingItem.getTitle());
+
     // entering item moves to center
     // before starting, set enteringItem to display: block
     enteringContent
@@ -48,11 +54,13 @@ class IOSTransition extends Animation {
       .to(TRANSLATE_X, 0)
       .to(OPACITY, 1);
 
-    enteringToolbars
-      .addStartClass('show-toolbar')
+    enteringTitle
       .to(TRANSLATE_X, 0)
       .to(OPACITY, 1);
 
+    enteringToolbars
+      .addStartClass('show-toolbar');
+
     // leaving view moves off screen
     // when completed, set leavingItem to display: none
     leavingContent
@@ -61,7 +69,9 @@ class IOSTransition extends Animation {
       .from(OPACITY, 1);
 
     leavingToolbars
-      .removeEndClass('show-toolbar')
+      .removeEndClass('show-toolbar');
+
+    leavingTitle
       .from(TRANSLATE_X, 0)
       .from(OPACITY, 1);
 
@@ -73,16 +83,16 @@ class IOSTransition extends Animation {
         .from(OPACITY, OFF_OPACITY)
         .to(OPACITY, 1);
 
-      enteringToolbars
+      enteringTitle
         .from(TRANSLATE_X, OFF_LEFT)
-        .from(OPACITY, OFF_OPACITY)
+        .from(OPACITY, 0)
         .to(OPACITY, 1);
 
       leavingContent
         .to(TRANSLATE_X, OFF_RIGHT)
         .to(OPACITY, 1);
 
-      leavingToolbars
+      leavingTitle
         .to(TRANSLATE_X, OFF_RIGHT)
         .to(OPACITY, 1);
 
@@ -92,21 +102,20 @@ class IOSTransition extends Animation {
         .from(TRANSLATE_X, OFF_RIGHT)
         .from(OPACITY, 1);
 
-      enteringToolbars
-        .from(TRANSLATE_X, OFF_RIGHT)
-        .from(OPACITY, 1);
+      enteringTitle
+        .from(TRANSLATE_X, OFF_RIGHT);
 
       leavingContent
         .to(TRANSLATE_X, OFF_LEFT)
         .to(OPACITY, OFF_OPACITY);
 
-      leavingToolbars
+      leavingTitle
         .to(TRANSLATE_X, OFF_LEFT)
-        .to(OPACITY, OFF_OPACITY);
+        .to(OPACITY, 0);
     }
 
     // set child animations
-    this.setChildren([enteringContent, enteringToolbars, leavingContent, leavingToolbars]);
+    this.setChildren([enteringContent, enteringToolbars, enteringTitle, leavingContent, leavingToolbars, leavingTitle]);
   }
 
   stage() {