3 files changed, 13 insertions, 18 deletions
diff --git a/public/assets/js/app.js b/public/assets/js/app.js
index 22215ae..2151dab 100644
--- a/public/assets/js/app.js
+++ b/public/assets/js/app.js
@@ -63,10 +63,10 @@ var app = (function() {
   }
   
   app.resize = function(){
-    $(".cell, .next, .previous").css({ 'display': 'none' })
+    $(".active .cell,.active  .next,.active .previous").css({ 'display': 'none' })
     $('body').addClass('resizing')
     debounce(function() {
-      $(".item").addClass("hidden")
+      $(".active.item").addClass("hidden")
       setTimeout(function(){
         $(".item").each(function(i){
           var height = window.innerHeight - $(this).find(".bottom").height()
@@ -75,7 +75,7 @@ var app = (function() {
         app.view.$el.removeClass("hidden")
         // $('.top').flickity('resize')
         $('body').removeClass('resizing')
-      }, 20)
+      }, 400)
     }, 400)
   }
 
diff --git a/public/assets/js/lib/ProjectView.js b/public/assets/js/lib/ProjectView.js
index 107c3d5..726a430 100644
--- a/public/assets/js/lib/ProjectView.js
+++ b/public/assets/js/lib/ProjectView.js
@@ -22,7 +22,7 @@ var ProjectView = View.extend({
     app.header.updateSlideCount( 1 )
     $('body').removeClass('navopen')
     this.$el.removeClass("hidden")
-    
+    this.$el.addClass("active")
     if (this.project_id == "cover") {
       app.router.pushState("/")
     }
@@ -39,6 +39,7 @@ var ProjectView = View.extend({
   hide: function(){
     addClassForPeriod( this.el, "hiding", app.navigation_delay, function(){
       this.$el.addClass("hidden")
+      this.$el.removeClass("active")
     }.bind(this) )
   },
   
diff --git a/public/assets/ok.css b/public/assets/ok.css
index c6d48da..3670770 100644
--- a/public/assets/ok.css
+++ b/public/assets/ok.css
@@ -376,22 +376,18 @@ nav b {
   left: 0;
   background: white;
 }
-.bottom * {
-    transform:translateY(0px);
-    transition:150ms transform, 150ms opacity;
-    transition-timing-function: cubic-bezier(0, 0, 0, 1);
-    opacity:1;
-}
 
-.showing .bottom > * {
-    transform:translateY(20px);
 
+.up .showing.item {
+    transform:translateY(-10px);
+    opacity:0;
+    background:white;
 }
 
-.hiding .bottom > * {
-    transform:translateY(-20px);
+.down .showing.item  {
+    transform:translateY(10px);
     opacity:0;
-
+    background:white;
 }
 
 /* Flickity */
@@ -574,9 +570,7 @@ ul li {
 }
 
 @media (min-width: 1300px) {
-    .bottom {
-        padding: 7px 0 8px 0;
-    }
+
     .texts {
         font-size: 13px;
         line-height: 16px;