Add providers

_sass/_animated-hero.scss

@@ -118,7 +118,7 @@ $extra-hero-height: 200px;
   position: absolute;
 }
 
-.step-0 {
+.start-animation {
   #hero-text {
     @include animation(fadeOut 1s $ease-in-out-cubic both);
   }
@@ -153,6 +153,28 @@ $extra-hero-height: 200px;
   }
 }
 
+#provider-wrap {
+  @include keyframes(providerPopIn) {
+    0% {
+      opacity: 0;
+      @include transform(translateY(10px) scale(0.5));
+    }
+    100% {
+      opacity: 1;
+      @include transform(translateY(0) scale(0.5));
+    }
+  }
+  .provider-img {
+    position: relative;
+    display: inline-block;
+  }
+  .p-0 { @include animation(providerPopIn 300ms 0 $ease-in-out-cubic both); }
+  .p-1 { @include animation(providerPopIn 300ms 150ms $ease-in-out-cubic both); }
+  .p-2 { @include animation(providerPopIn 300ms 300ms $ease-in-out-cubic both); }
+  .p-3 { @include animation(providerPopIn 300ms 450ms $ease-in-out-cubic both); }
+  .p-4 { @include animation(providerPopIn 300ms 600ms $ease-in-out-cubic both); }
+}
+
 .slide-out {
   @include animation(slideOut 1s $ease-in-out-cubic both);
   @include keyframes(slideOut) {

js/index.coffee

@@ -106,7 +106,7 @@ runFrames = (frames) ->
       else setTimeout(resolve, delay)
   return sequence
 
-window.step1 = ->
+window.screencastSequence = ->
 
   # Need to know the dimensions of the images used in step 1
   animationContainerSize = [1136,823]
@@ -183,16 +183,31 @@ window.step1 = ->
 
   $("##{_.keys(frames.step1)[0]}").show()
 
-  runFrames(frames.step1).then ->
+  return runFrames(frames.step1).then -> new Promise (resolve, reject) ->
     $("#step1").addClass("slide-out")
     $("#step2").addClass("slide-in")
     $("##{_.keys(frames.step2)[0]}").show()
-    $timerFrame = $($("#step1")[0])
+    $("#step1").on "animationend", ->
-    $timerFrame.on "animationend", ->
+      $("#step1").off "animationend"
-      $timerFrame.off "animationend"
       $("#step1").remove()
       runFrames(frames.step2).then ->
-        console.log "Step 2 done!"
+        $("#step2").removeClass("slide-in").addClass("slide-out")
+        $("#step2").on "animationend", ->
+          $("#step2").remove()
+          return resolve()
+
+window.providerSequence = ->
+  providers = [
+    "outlook"
+    "exchange"
+    "gmail"
+    "icloud"
+    "yahoo"
+  ]
+  imgs = providers.map (provider, i) ->
+    "<img id='#{provider}' class='provider-img p-#{i}' src='images/providers/#{provider}@2x.png'/>"
+  .join('')
+  $("#animation-container").html("<div id='provider-wrap'>#{imgs}</div>")
 
 positionAnimationContainer = ->
   winW = $(window).width()
@@ -251,5 +266,7 @@ window.onload = ->
   onResize()
   $("body").addClass("initial")
   $("#play-intro").on "click", ->
-    $("body").addClass("step-0").removeClass("initial")
+    $("body").addClass("start-animation").removeClass("initial")
-    step1()
+    screencastSequence()
+    .then(providerSequence)
+