diff --git a/dist/ionic.css b/dist/ionic.css
index e56a5d22b6..9defdc1292 100644
--- a/dist/ionic.css
+++ b/dist/ionic.css
@@ -1436,7 +1436,6 @@ address {
 .modal {
   position: fixed;
   z-index: 10;
-  visibility: hidden;
   top: 0;
   width: 100%;
   min-height: 100%;
@@ -1446,11 +1445,10 @@ address {
   -webkit-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0); }
   .modal.active {
-    visibility: visible;
+    -webkit-transform: translate3d(0, 0%, 0);
+    transform: translate3d(0, 0%, 0);
     opacity: 1;
-    height: 100%;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0); }
+    height: 100%; }
 
 .list {
   margin-bottom: 20px;
@@ -2144,11 +2142,18 @@ a.button {
 .slide-in-up {
   -webkit-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0);
-  -webkit-transition: -webkit-transform 0.25s, opacity 1ms 0.25s;
-  transition: transform 0.25s, opacity 1ms 0.25s;
-  -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); }
-
-.slide-in-up.enter {
-  -webkit-transition: -webkit-transform 0.25s;
-  transition: transform 0.25s;
   -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); }
+  .slide-in-up.enter {
+    -webkit-transition: -webkit-transform 0.25s, opacity 1ms 0.25s;
+    transition: transform 0.25s, opacity 1ms 0.25s; }
+  .slide-in-up.enter-active {
+    -webkit-transition: -webkit-transform 0.25s;
+    transition: transform 0.25s;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0); }
+  .slide-in-up.leave {
+    -webkit-transition: -webkit-transform 0.25s, opacity 1ms 0.25s;
+    transition: transform 0.25s, opacity 1ms 0.25s; }
+  .slide-in-up.leave-active {
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0); }
diff --git a/dist/ionic.js b/dist/ionic.js
index 72325fb5c4..2522d27517 100644
--- a/dist/ionic.js
+++ b/dist/ionic.js
@@ -1626,16 +1626,44 @@ if ( document.readyState === "complete" ) {
 })(ionic = window.ionic || {});
 ;(function(ionic) {
   ionic.Animator = {
-    animate: function(element, fn) {
-      var endFunc = function() {
-        console.log('Animation finished for element', element);
-        element.removeEventListener('webkitTransitionEnd', endFunc);
-        element.removeEventListener('transitionEnd', endFunc);
-      };
-      element.addEventListener('webkitTransitionEnd', endFunc);
-      element.addEventListener('transitionEnd', endFunc);
+    animate: function(element, className, fn) {
+      return {
+        leave: function() {
+          var endFunc = function() {
+            console.log('Animation finished for element', element);
 
-      element.classList.add('enter');
+            element.classList.remove('leave');
+            element.classList.remove('leave-active');
+
+            element.removeEventListener('webkitTransitionEnd', endFunc);
+            element.removeEventListener('transitionEnd', endFunc);
+          };
+          element.addEventListener('webkitTransitionEnd', endFunc);
+          element.addEventListener('transitionEnd', endFunc);
+
+          element.classList.add('leave');
+          element.classList.add('leave-active');
+          return this;
+        },
+        enter: function() {
+          var endFunc = function() {
+            console.log('Animation finished for element', element);
+
+            element.classList.remove('enter');
+            element.classList.remove('enter-active');
+
+            element.removeEventListener('webkitTransitionEnd', endFunc);
+            element.removeEventListener('transitionEnd', endFunc);
+          };
+          element.addEventListener('webkitTransitionEnd', endFunc);
+          element.addEventListener('transitionEnd', endFunc);
+
+          element.classList.add('enter');
+          element.classList.add('enter-active');
+
+          return this;
+        }
+      };
     }
   };
 })(ionic = window.ionic || {});
diff --git a/js/animate.js b/js/animate.js
index f64cc63108..c394117eb6 100644
--- a/js/animate.js
+++ b/js/animate.js
@@ -1,15 +1,43 @@
 (function(ionic) {
   ionic.Animator = {
-    animate: function(element, fn) {
-      var endFunc = function() {
-        console.log('Animation finished for element', element);
-        element.removeEventListener('webkitTransitionEnd', endFunc);
-        element.removeEventListener('transitionEnd', endFunc);
-      };
-      element.addEventListener('webkitTransitionEnd', endFunc);
-      element.addEventListener('transitionEnd', endFunc);
+    animate: function(element, className, fn) {
+      return {
+        leave: function() {
+          var endFunc = function() {
+            console.log('Animation finished for element', element);
 
-      element.classList.add('enter');
+            element.classList.remove('leave');
+            element.classList.remove('leave-active');
+
+            element.removeEventListener('webkitTransitionEnd', endFunc);
+            element.removeEventListener('transitionEnd', endFunc);
+          };
+          element.addEventListener('webkitTransitionEnd', endFunc);
+          element.addEventListener('transitionEnd', endFunc);
+
+          element.classList.add('leave');
+          element.classList.add('leave-active');
+          return this;
+        },
+        enter: function() {
+          var endFunc = function() {
+            console.log('Animation finished for element', element);
+
+            element.classList.remove('enter');
+            element.classList.remove('enter-active');
+
+            element.removeEventListener('webkitTransitionEnd', endFunc);
+            element.removeEventListener('transitionEnd', endFunc);
+          };
+          element.addEventListener('webkitTransitionEnd', endFunc);
+          element.addEventListener('transitionEnd', endFunc);
+
+          element.classList.add('enter');
+          element.classList.add('enter-active');
+
+          return this;
+        }
+      };
     }
   };
 })(ionic = window.ionic || {});
diff --git a/scss/ionic/_animations.scss b/scss/ionic/_animations.scss
index 62656ac881..779feca4c8 100644
--- a/scss/ionic/_animations.scss
+++ b/scss/ionic/_animations.scss
@@ -14,14 +14,29 @@ $bezier-function: cubic-bezier(.1, .5, .1, 1);
   -webkit-transform: translate3d(0, 100%, 0);
           transform: translate3d(0, 100%, 0);
 
-  -webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
-          transition:         transform .25s, opacity 1ms .25s;
-
   -webkit-transition-timing-function: $bezier-function;
-}
 
-.slide-in-up.enter {
-  -webkit-transition: -webkit-transform .25s;
-          transition:         transform .25s;
-  -webkit-transition-timing-function: $bezier-function;
+  &.enter {
+
+    -webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
+            transition:         transform .25s, opacity 1ms .25s;
+
+  }
+
+  &.enter-active {
+    -webkit-transition: -webkit-transform .25s;
+            transition:         transform .25s;
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+  }
+
+  &.leave {
+    -webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
+            transition:         transform .25s, opacity 1ms .25s;
+  }
+
+  &.leave-active {
+    -webkit-transform: translate3d(0, 100%, 0);
+            transform: translate3d(0, 100%, 0);
+  }
 }
diff --git a/scss/ionic/_modal.scss b/scss/ionic/_modal.scss
index 16aa3dfafc..a6d81c33be 100644
--- a/scss/ionic/_modal.scss
+++ b/scss/ionic/_modal.scss
@@ -6,7 +6,6 @@
   position: fixed; 
 
   z-index: $zindex-modal;
-  visibility: hidden;
 
   top: 0;
 
@@ -26,13 +25,10 @@
 
   // Active modal
   &.active {
-    visibility: visible;
-
+    -webkit-transform: translate3d(0, 0%, 0);
+            transform: translate3d(0, 0%, 0);
     opacity: 1;
     height: 100%;
-    // Put it up
-    -webkit-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
   }
 }
 
diff --git a/test/modals.html b/test/modals.html
index 81e36be0a6..25a5e1f3c7 100644
--- a/test/modals.html
+++ b/test/modals.html
@@ -38,20 +38,22 @@
     <script src="../dist/ionic.js"></script>
     <script>
       var open = document.getElementById('modal-opener');
+      var anim = ionic.Animator.animate(modal, function() {
+        console.log('Animation finished');
+      });
 
       ionic.on('tap', function(e) {
         var modal = document.getElementById('modal');
-        //modal.classList.add('active');
-        ionic.Animator.animate(modal, function() {
-          console.log('Animation finished');
-        });
+        modal.classList.add('active');
+        anim.enter();
         return false;
       }, open);
 
       var closer = document.getElementById('modal-closer');
       ionic.on('tap', function(e) {
         var modal = document.getElementById('modal');
-        //modal.classList.remove('active');
+        modal.classList.remove('active');
+        anim.leave();
         return false;
       }, closer);
     </script>