update site animations

build/index.html

@@ -220,6 +220,8 @@
 
             </div>
 
+              <div class="white-blocks">
+
             <div class="block-square">
 
                 <div class="card-avatar avatar-wallet">
@@ -244,6 +246,7 @@
                 <p>Braggadocio and public exchange with candidates in the US presidential</p>
             </div>
             </div>
+          </div>
           <div class="table-right table-bottom">
             <div class="phone-even">
                 <div class="phone-image phone-big">
@@ -267,7 +270,7 @@
               <p>Status is lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at magna et libero</p>
           </div>
           </div>
-          <div class="status-email">
+          <div class="gradient-email">
           <div class="email">
               <input type="email" class="email-input" placeholder="Leave Your email">
               <div class="email-button"></div>

src/css/main.css

@@ -179,10 +179,15 @@ p {
   -webkit-transform: translate3d(0, 20px, 0);
           transform: translate3d(0, 20px, 0); }
 
-.visible {
-  opacity: 1;
-  -webkit-transform: translate3d(0, 0, 0);
-          transform: translate3d(0, 0, 0); }
+.gradient-email {
+  width: 360px;
+  opacity: 0;
+  -webkit-transition: opacity .4s ease, -webkit-transform .4s ease;
+  transition: opacity .4s ease, -webkit-transform .4s ease;
+  transition: transform .4s ease, opacity .4s ease;
+  transition: transform .4s ease, opacity .4s ease, -webkit-transform .4s ease;
+  -webkit-transform: translate3d(0, 20px, 0);
+          transform: translate3d(0, 20px, 0); }
 
 input[type=email] {
   padding: 15px;
@@ -666,21 +671,22 @@ input[type=email] {
   vertical-align: top;
   text-align: center;
   opacity: 0;
-  -webkit-transition: all .4s ease;
-  transition: all .4s ease;
+  -webkit-transition: opacity .4s ease, -webkit-transform .4s ease;
+  transition: opacity .4s ease, -webkit-transform .4s ease;
+  transition: transform .4s ease, opacity .4s ease;
+  transition: transform .4s ease, opacity .4s ease, -webkit-transform .4s ease;
   -webkit-transform: translate3d(-40px, 0, 0) scale(1);
           transform: translate3d(-40px, 0, 0) scale(1); }
   .block-square:first-child {
-    -webkit-transition-delay: .120s;
-            transition-delay: .120s; }
-  .block-square:nth-child(2) {
     -webkit-transition-delay: 0;
             transition-delay: 0; }
+  .block-square:nth-child(2) {
+    -webkit-transition-delay: .120s;
+            transition-delay: .120s; }
   .block-square:last-child {
+    margin-right: 0;
     -webkit-transition-delay: .240s;
             transition-delay: .240s; }
-  .block-square:last-child {
-    margin-right: 0; }
   .block-square h3 {
     margin-top: 10px;
     margin-bottom: 0;
@@ -693,6 +699,11 @@ input[type=email] {
     font-size: 12px;
     line-height: 18px; }
 
+.shown .block-square {
+  opacity: 1;
+  -webkit-transform: translate3d(0, 0, 0) scale(1);
+          transform: translate3d(0, 0, 0) scale(1); }
+
 .two-third {
   margin-top: 10%;
   text-align: center;
@@ -1077,6 +1088,7 @@ body {
   margin: 0;
   padding: 0;
   min-width: 320px;
+  background-color: #eef2f5;
   font-weight: 400;
   font-size: 14px;
   font-family: 'Roboto', sans-serif;

src/index.html

@@ -222,6 +222,8 @@
 
             </div>
 
+              <div class="white-blocks">
+
             <div class="block-square">
 
                 <div class="card-avatar avatar-wallet">
@@ -246,6 +248,7 @@
                 <p>Braggadocio and public exchange with candidates in the US presidential</p>
             </div>
             </div>
+          </div>
           <div class="table-right table-bottom">
             <div class="phone-even">
                 <div class="phone-image phone-big">
@@ -269,7 +272,7 @@
               <p>Status is lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at magna et libero</p>
           </div>
           </div>
-          <div class="status-email">
+          <div class="gradient-email">
           <div class="email">
               <input type="email" class="email-input" placeholder="Leave Your email">
               <div class="email-button"></div>

src/js/common.js

@@ -11,19 +11,21 @@ $(function() {
 
   $(document).ready(function(){
 
+    setTimeout(function() {
         $(".status-text").addClass("shown");
+    },400);
     setTimeout(function() {
         $(".status-email").addClass("shown");
-    },200);
+    },500);
     setTimeout(function() {
         $(".phone-primary").addClass("shown");
-    },300);
+    },600);
     setTimeout(function() {
         $(".phone-secondary").addClass("shown");
-    },460);
+    },700);
     setTimeout(function() {
         $(".main-header").addClass("shown");
-    },700);
+    },1000);
 
      $(".email-input").on('click', function(){
        $(".email").addClass("focused");
@@ -78,6 +80,9 @@ $(function() {
 
   $('.gradient-text').waypoint(function() {
       $('.gradient-text').addClass('shown');
+      setTimeout(function() {
+          $(".gradient-email").addClass("shown");
+      },100);
   }, { offset: '90%' });
 
 

src/sass/index.scss

@@ -110,13 +110,11 @@ section {
     line-height: 33px;
   }
 }
+
 .phone {
   @include span-columns(6);
 }
 
-.phone-cut {
-  //margin-top: 240px;
-}
 
 .phone-image {
   position: relative;
@@ -168,10 +166,11 @@ p {
   transform: translate3d(0, 20px, 0);
 }
 
-.visible {
-  opacity: 1;
-  transform: translate3d(0, 0, 0);
-
+.gradient-email {
+  width: 360px;
+  opacity: 0;
+  transition: transform .4s ease, opacity .4s ease;
+  transform: translate3d(0, 20px, 0);
 }
 
 input[type=email] {
@@ -266,10 +265,6 @@ input[type=email] {
 }
 
 .block-white {
-  //margin-right: 35px;
-  // opacity: 0;
-  // transition: transform .4s ease, opacity .4s ease;
-  // transform: translate3d(0, -20px, 0) scale(0.9);;
   padding: 33px 50px;
   border-right: 1px solid #dde2e6;
   border-radius: 0;
@@ -690,19 +685,18 @@ input[type=email] {
   vertical-align: top;
   text-align: center;
   opacity: 0;
-  transition: all .4s ease;
+  transition: transform .4s ease, opacity .4s ease;
   transform: translate3d(-40px, 0, 0) scale(1);
   &:first-child {
-    transition-delay: .120s;
-  }
-  &:nth-child(2) {
     transition-delay: 0;
   }
-  &:last-child {
-    transition-delay: .240s;
+  &:nth-child(2) {
+    transition-delay: .120s;
   }
   &:last-child {
     margin-right: 0;
+    transition-delay: .240s;
+
   }
   h3 {
     margin-top: 10px;
@@ -719,6 +713,11 @@ input[type=email] {
   }
 }
 
+.shown .block-square {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+}
+
 .two-third {
   margin-top: 10%;
   text-align: center;

src/sass/main.scss

@@ -21,6 +21,7 @@ body {
   margin: 0;
   padding: 0;
   min-width: 320px;
+  background-color: #eef2f5;
   font-weight: 400;
   font-size: 14px;
   font-family: 'Roboto', sans-serif;