diff --git a/_sass/_animated-hero.scss b/_sass/_animated-hero.scss
index ba2df4c21..dbb0cd54d 100644
--- a/_sass/_animated-hero.scss
+++ b/_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) {
diff --git a/images/providers/exchange@2x.png b/images/providers/exchange@2x.png
new file mode 100644
index 000000000..af69829b0
Binary files /dev/null and b/images/providers/exchange@2x.png differ
diff --git a/images/providers/gmail@2x.png b/images/providers/gmail@2x.png
new file mode 100644
index 000000000..d2052d50b
Binary files /dev/null and b/images/providers/gmail@2x.png differ
diff --git a/images/providers/icloud@2x.png b/images/providers/icloud@2x.png
new file mode 100644
index 000000000..c2fd3efc8
Binary files /dev/null and b/images/providers/icloud@2x.png differ
diff --git a/images/providers/imap@2x.png b/images/providers/imap@2x.png
new file mode 100644
index 000000000..6c70ba22c
Binary files /dev/null and b/images/providers/imap@2x.png differ
diff --git a/images/providers/outlook@2x.png b/images/providers/outlook@2x.png
new file mode 100644
index 000000000..2c75107be
Binary files /dev/null and b/images/providers/outlook@2x.png differ
diff --git a/images/providers/yahoo@2x.png b/images/providers/yahoo@2x.png
new file mode 100644
index 000000000..d453f21c8
Binary files /dev/null and b/images/providers/yahoo@2x.png differ
diff --git a/js/index.coffee b/js/index.coffee
index 1a49824a5..084a1043f 100644
--- a/js/index.coffee
+++ b/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])
-    $timerFrame.on "animationend", ->
-      $timerFrame.off "animationend"
+    $("#step1").on "animationend", ->
+      $("#step1").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")
-    step1()
+    $("body").addClass("start-animation").removeClass("initial")
+    screencastSequence()
+    .then(providerSequence)
+