add cover

_includes/hero.html

@@ -1,7 +1,8 @@
-<div id="hero" class="hero">
+<div id="hero" class="hero step-0">
   <img id="watercolor-left" class="hero-bg" src="images/left.png">
   <img id="watercolor-right" class="hero-bg" src="images/right.png">
   <div id="bg-fade"></div>
+
   <img id="main-screenshot" class="main-screenshot" src="images/hero_screenshot.png">
 
   <div id="hero-text" class="hero-text">

_includes/top.html

@@ -14,5 +14,6 @@
    <script src="{{ site.baseurl }}/js/respond.min.js"></script>
    <![endif]-->
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
+   <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/2.10.2/bluebird.min.js"></script>
    <script src="{{ site.baseurl }}/js/index.js"></script>
  </head>

_sass/_animated-hero.scss

@@ -1,12 +1,31 @@
 $blue: #419bf9;
 
+@include keyframes(fadeIn) {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@include keyframes(fadeOut) {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
 .hero {
   z-index: 2;
   position: relative;
   width: 100%;
   height: 1200px; // Reset by js on boot
   position: relative;
-  overflow: visible; // So the screenshot can bleed
+  overflow-y: visible; // So the screenshot can bleed
+  overflow-x: hidden;
   img {
     -webkit-user-select: none;
   }
@@ -17,7 +36,7 @@ img.hero-bg {
   min-height: 400px;
   position: absolute;
   top: 0;
-  @include animation(burnIn 2s 1s $ease-in-out-cubic both);
+  @include animation(burnIn 1.5s 0.5s $ease-in-out-cubic both);
   @include keyframes(burnIn) {
     0% {
       opacity: 0;
@@ -58,14 +77,6 @@ img.hero-bg {
   text-align: center;
 
   @include animation(fadeIn 2s $ease-in-out-cubic both);
-  @include keyframes(fadeIn) {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
 }
 
 #play-intro {
@@ -90,25 +101,57 @@ img.hero-bg {
   }
 }
 
+$nav-height: 53px;
+$extra-hero-height: 200px;
+
 img.main-screenshot {
   z-index: 10;
-  max-width: 80%;
-  left: 10%;
   position: absolute;
+  left: 50%;
+  width: auto;
+  height: auto;
+  @include calc(max-height, "100% - 253px");
+}
 
-  @include animation(slideIn 2s 1s $ease-in-out-cubic both);
-  @include keyframes(slideIn) {
-    0% {
-      opacity: 0;
-      top: 510px;
-      @include transform(scale(0.98));
-    }
-    100% {
-      opacity: 1;
-      top: 460px;
-      @include transform(scale(1));
+@mixin main-screenshot-key-1 {
+  max-width: 80%;
+  max-height: 80%;
+  opacity: 0;
+  top: 510px;
+  @include transform(scale(0.98) translateX(-51%));
+}
+@mixin main-screenshot-key-2 {
+  max-width: 80%;
+  opacity: 1;
+  top: 460px;
+  @include transform(scale(1) translateX(-50%));
+}
+@mixin main-screenshot-key-3 {
+  max-width: 90%;
+  opacity: 1;
+  top: $nav-height;
+  @include transform(scale(1) translateX(-50%));
+}
+
+.step-0 {
+  img.main-screenshot {
+    @include animation(slideIn 1s 2s $ease-in-out-cubic both);
+    @include keyframes(slideIn) {
+      0% { @include main-screenshot-key-1 }
+      100% { @include main-screenshot-key-2 }
     }
   }
 }
 
-
+.step-1 {
+  #hero-text {
+    @include animation(fadeOut 1s $ease-in-out-cubic both);
+  }
+  img.main-screenshot {
+    @include animation(focusUp 1s 0.5s $ease-in-out-cubic both);
+    @include keyframes(focusUp) {
+      0% { @include main-screenshot-key-2 }
+      100% { @include main-screenshot-key-3 }
+    }
+  }
+}

js/index.coffee

@@ -1,17 +1,63 @@
 ---
 ---
 
-preparePage = ->
+# startSequence()
+# .then(step1)
+# .then(step2)
+# .then(step3)
+# .then(step4)
+# .then(step5)
+#
+# # show composer
+# step1 = ->
+#   startStep()
+#   .then(focusClient)
+#   .then(doReply)
+#   .then(typeReply)
+#   .then(addImage)
+#   .then(sendEmail)
+#
+# step2 = ->
+#   startStep()
+#   .then(addAccount)
+#   .then(focusPicker)
+#   .then(selectAccount)
+#   .then(swapModes)
+#
+# step3 = ->
+#   startStep()
+#   .then(openLabelPicker)
+#   .then(typeLabel)
+#   .then(applyLabel)
+#
+# step4 = ->
+#   startStep()
+#   .then(openInspectorPanel)
+#   .then(typeCommand)
+#   .then(activateExtension)
+#
+# step5 = ->
+#   startStep()
+#   .then(fadeClient)
+#   .then(showCta)
 
-loadAssets = ->
+# To ensure we have maximal width and height viewport coverage
+fixAnimationContainer = ->
+  # $("#animation-container")
 
-fixHeroSize = ->
+# To allow for a fixed amount of bleed below the fold regardless of window
+# size.
+fixHeroHeight = ->
   Math.max(Math.min($("#hero")?.height($(window).height() + 200), 640), 1200)
 
-fixNavMargin = ->
+# To ensure that our overflowing, dynamically sized screenshot pushes the
+# remaining content down the correct ammount.
+fixHeroMargin = ->
   marginBottom = Math.max(($("#main-screenshot").height() + ($("#main-screenshot").offset().top - $("#hero").offset().top)) - $("#hero").height(), 0)
   $("#hero").css(marginBottom: marginBottom)
 
+# To ensure there's enough white-space between the watercolor images to
+# let the hero text show through.
 fixWatercolors = ->
   lCutoff = 0.55
   rCutoff = 0.6
@@ -28,8 +74,8 @@ fixWatercolors = ->
   $("#watercolor-right").css(right: rightMove)
 
 onResize = ->
-  fixHeroSize()
-  fixNavMargin()
+  fixHeroHeight()
+  fixHeroMargin()
   fixWatercolors()
 
 window.onresize = onResize