Add experiment affordances and fix double-playing animation

Gemfile.lock

@@ -132,3 +132,6 @@ PLATFORMS
 DEPENDENCIES
   bourbon
   github-pages
+
+BUNDLED WITH
+   1.10.2

_includes/hero.html

@@ -172,5 +172,8 @@ function runPluginsSequence(callback, almostDone) {
   <h4>The extensible, open source mail&nbsp;client.</h4>
   <div class="cta" style="margin-top:40px;">
     <div id="play-intro"><div class="triangle"></div>Play Intro</div>
+    <a id="home-download-button" style="display: none;" class="btn btn-large btn-emphasis" href="https://invite.nylas.com/download">
+      Download
+    </a>
   </div>
 </div>

_sass/_animated-hero.scss

@@ -84,6 +84,10 @@ img {
   top: 50%;
   left: 50%;
 
+  &:hover {
+    cursor: pointer;
+  }
+
   @include animation(fadeIn 2s $ease-in-out-cubic both);
 }
 

index.html

@@ -37,7 +37,7 @@ overview: true
   </div>
   -->
 
-  <div class="grid feature" style="margin-top: 60px;">
+  <div id="beautiful-inside-and-out" class="grid feature" style="margin-top: 60px;">
     <div class="unit two-thirds" style="margin-top:60px;">
       <h3>Beautiful inside and out.</h3>
       <p style="max-width:530px;">N1 is designed to be friendly, with an emphasis on clean typography, subtle drop shadows, and delightful buttons. When you use N1, things feel familiar with nothing out of place. It's just the way things should be.</p>
@@ -47,7 +47,7 @@ overview: true
     </div>
   </div>
 
-  <div class="grid feature">
+  <div id="all-platforms" class="grid feature">
     <div class="unit one-third">
       <img src="{{ site.baseurl }}/images/watercolor_earth.png" style="width:300px;"/>
     </div>
@@ -58,7 +58,7 @@ overview: true
     </div>
   </div>
 
-  <div class="grid feature">
+  <div id="developers-welcome" class="grid feature">
     <div class="unit two-thirds">
       <h3>Developers welcome.</h3>
       <p style="max-width:530px;">

js/index.coffee

@@ -272,6 +272,11 @@ fixStaticClientImages = ->
   nominalComposer = 615
   innerWidth = $("#static-client-images").innerWidth() - padding - overhang
 
+  if window.experiments.disableAnimation
+    heroOverhangHeight = 200
+    $("#static-client-images").css
+      "margin-top": -1 * (heroOverhangHeight + $(window).height() * 0.2)
+
   scale = Math.min(1 - (nominalScreenshot - innerWidth) / nominalScreenshot, 1)
   $(".static-screenshot, #static-screenshot-wrap").width(nominalScreenshot * scale)
   $(".static-composer").width(nominalComposer * scale)
@@ -304,16 +309,26 @@ onResize = ->
   positionAnimationContainer()
   fixStaticClientImages()
 
+window.experiments = {}
+
 window.onresize = onResize
 $ ->
   onResize()
   $("body").addClass("initial")
 
+  animationPlaying = false
   $("#play-intro, .hero-text").on "click", _.debounce ->
+    return if window.experiments.disableAnimation
+    return if animationPlaying
+    animationPlaying = true
     ga?("track", "event", "N1", "intro", "start")
     fixHeroHeight()
     $("body").removeClass("finished").removeClass("start-animation")
 
+    $("#hero-text").on "animationend", ->
+      $("#hero-text").off "animationend"
+      $("#hero-text").hide()
+
     $wc = $("#window-container")
     if $wc.length > 0
       $wc.addClass("fade-out")
@@ -332,8 +347,10 @@ $ ->
       $wc.addClass("fade-out")
       $wc.on "animationend", -> $wc.remove()
       $("body").addClass("finished")
+      $("#hero-text").show()
       $("#static-client-images").css
         "margin-top": "-320px"
+      animationPlaying = false
 
       # $("#static-client-images").height($("#hero").height() - 250)
 
@@ -361,4 +378,7 @@ $ ->
       , 2200
   , 100
 
+window.onload = ->
+  onResize()
+
 console.log("%cWe love your curiosity! Let us know what other easter eggs you find. 😊 We're always looking for extraordinary people. Check out the jobs page or give me a ping at evan@nylas.com if you're interested in learning more about some of the big challenges we're tackling", "font-size: 16px;font-family:FaktPro, sans-serif;line-height:1.7")