Possibly more efficient shader. Cleaned up ellipses image.

shader.vs

@@ -51,17 +51,14 @@ const float PI = 3.1415629;
 void main()
 {
     vec4 pos = a_position;
-    float ramp = a_meshCoord.y;
-    if (ramp > 0.5) {
-    	ramp = 1.0 - ramp;
-    }
+    float ramp = step(0.5, 1.0 - a_meshCoord.y) * a_meshCoord.y + step(0.5, a_meshCoord.y) * (1.0 - a_meshCoord.y);
     float zOffset = ramp * -50.0;
     float adjT = t * 0.999; // don't get to the end to avoid overlap
 
     pos.z = zOffset * mapDepth * adjT - mapDepth * adjT / 2.0;
     pos.y = (pos.y + 0.5) * (1.0 - adjT) - 0.5; 
 
-    v_lighting = 1.0 - (ramp * adjT * 1.5);
+    v_lighting = 1.0 - (ramp * adjT * 0.5);
 
     gl_Position = u_projectionMatrix * transform * pos;
 }

styles.css

@@ -28,49 +28,49 @@
 }
 
 .doFold {
-    -webkit-animation-duration: 0.15s;
+    -webkit-animation-duration: 0.4s;
     -webkit-animation-name: fold;
     -webkit-animation-fill-mode: forwards;
-    -webkit-animation-timing-function: linear;
+    -webkit-animation-timing-function: ease-in;
 }
 
 .doUnfold {
-    -webkit-animation-duration: 0.15s;
+    -webkit-animation-duration: 0.4s;
     -webkit-animation-name: unfold;
     -webkit-animation-fill-mode: forwards;
-    -webkit-animation-timing-function: linear;
+    -webkit-animation-timing-function: ease-in;
 }
 
 @-webkit-keyframes fold {
     from {
-        -webkit-filter: custom(url(shader.vs) mix(url(shader.fs) multiply source-atop), 4 4 border-box, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), t 0, mapDepth 10, useColoredBack 1, backColor 1 1 1 1, direction 0, shadow 0);
+        -webkit-filter: custom(url(shader.vs) mix(url(shader.fs) multiply source-atop), 2 2 border-box, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), t 0, mapDepth 5, useColoredBack 1, backColor 1 1 1 1, direction 0, shadow 0);
     }
     to {
-        -webkit-filter: custom(url(shader.vs) mix(url(shader.fs) multiply source-atop), 4 4 border-box, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), t 1, mapDepth 10, useColoredBack 1, backColor 1 1 1 1, direction 0, shadow 0);
+        -webkit-filter: custom(url(shader.vs) mix(url(shader.fs) multiply source-atop), 2 2 border-box, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), t 1, mapDepth 5, useColoredBack 1, backColor 1 1 1 1, direction 0, shadow 0);
     }
 }
 
 @-webkit-keyframes unfold {
     from {
-        -webkit-filter: custom(url(shader.vs) mix(url(shader.fs) multiply source-atop), 4 4 border-box, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), t 1, mapDepth 10, useColoredBack 1, backColor 1 1 1 1, direction 0, shadow 0);
+        -webkit-filter: custom(url(shader.vs) mix(url(shader.fs) multiply source-atop), 2 2 border-box, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), t 1, mapDepth 5, useColoredBack 1, backColor 1 1 1 1, direction 0, shadow 0);
     }
     to {
-        -webkit-filter: custom(url(shader.vs) mix(url(shader.fs) multiply source-atop), 4 4 border-box, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), t 0, mapDepth 10, useColoredBack 1, backColor 1 1 1 1, direction 0, shadow 0);
+        -webkit-filter: custom(url(shader.vs) mix(url(shader.fs) multiply source-atop), 2 2 border-box, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), t 0, mapDepth 5, useColoredBack 1, backColor 1 1 1 1, direction 0, shadow 0);
     }
 }
 
 .doBelowFold {
-    -webkit-animation-duration: 0.15s;
+    -webkit-animation-duration: 0.4s;
     -webkit-animation-name: slideUp;
     -webkit-animation-fill-mode: forwards;
-    -webkit-animation-timing-function: linear;
+    -webkit-animation-timing-function: ease-in;
 }
 
 .doBelowUnfold {
-    -webkit-animation-duration: 0.15s;
+    -webkit-animation-duration: 0.4s;
     -webkit-animation-name: slideDown;
     -webkit-animation-fill-mode: forwards;
-    -webkit-animation-timing-function: linear;
+    -webkit-animation-timing-function: ease-in;
 }
 
 @-webkit-keyframes slideUp {
@@ -105,17 +105,17 @@
 }
 
 .collapse {
-    -webkit-animation-duration: 0.15s;
+    -webkit-animation-duration: 0.4s;
     -webkit-animation-name: collapse;
     -webkit-animation-fill-mode: forwards;
-    -webkit-animation-timing-function: linear;    
+    -webkit-animation-timing-function: ease-in;    
 }
 
 .expand {
-    -webkit-animation-duration: 0.15s;
+    -webkit-animation-duration: 0.4s;
     -webkit-animation-name: expand;
     -webkit-animation-fill-mode: forwards;
-    -webkit-animation-timing-function: linear;
+    -webkit-animation-timing-function: ease-in;
 }
 
 @-webkit-keyframes collapse {