intro animation

_src/_assets/javascripts/bigchain/testimonials.js

@@ -0,0 +1,35 @@
+
+//=include ../../../../node_modules/is-in-viewport/lib/isInViewport.js
+
+var Testimonials = (function(w, d, $) {
+
+    'use strict'
+
+    var app, _private, _config
+
+    _config = {
+        testimonials: $('.testimonials'),
+        testimonial: $('.testimonial')
+    }
+
+    _private = {
+        toggleReady: function() {
+            $(window).on('load resize scroll',function() {
+                if (_config.testimonials.is( ':in-viewport()' ) ) {
+                    _config.testimonials.addClass('is-ready');
+                } else {
+                    _config.testimonials.removeClass('is-ready');
+                }
+            });
+        },
+    }
+
+    app = {
+        init: function() {
+            _private.toggleReady();
+        }
+    }
+
+    return app
+
+})(window, document, jQuery)

_src/_assets/javascripts/page-front.js

@@ -1,6 +1,7 @@
 
 //=include bigchain/hero-video.js
 //=include bigchain/smoothscroll.js
+//=include bigchain/testimonials.js
 //=include ../../../node_modules/vivus/dist/vivus.js
 
 
@@ -26,4 +27,6 @@ jQuery(function($) {
 
     new Vivus('bigchain-graph', iconOptions);
 
+    Testimonials.init();
+
 });

_src/_assets/styles/bigchain/_animations.scss

@@ -43,7 +43,7 @@ $timing-bounce:         cubic-bezier(0,1.02,.32,1.34); // easeOutBack, modified:
 @keyframes slide-in-from-bottom {
     0%   {
         opacity: 0;
-        transform: translateY(100px);
+        transform: translateY(50px);
     }
     100% {
         opacity: 1;

_src/_assets/styles/bigchain/_testimonials.scss

@@ -6,11 +6,22 @@
         display: flex;
         flex-wrap: wrap;
     }
+
+    // intro animation
+    &.is-ready .grid__col {
+        &:nth-child(2) .testimonial { animation-delay: .3s; }
+        &:nth-child(3) .testimonial { animation-delay: .6s; }
+    }
 }
 
 .testimonial {
     display: flex;
     flex-wrap: wrap;
+
+    .is-ready & {
+        @extend .animation-slide-in-from-bottom;
+        animation-fill-mode: backwards;
+    }
 }
 
 .testimonial__quote,
@@ -29,7 +40,6 @@
 
     // styling
     margin-bottom: $spacer;
-    font-size: 95%;
     align-self: flex-start;
 
     // quote characters

_src/_includes/section-testimonials.html

@@ -0,0 +1,11 @@
+<section class="section section-testimonials">
+    <div class="row row--wide">
+
+        <header class="section-header">
+            <h1 class="section-title">What others are saying</h1>
+        </header>
+
+        {% include testimonials.html %}
+
+    </div>
+</section>

_src/index.html

@@ -94,17 +94,7 @@ js: page-front.min.js
     </div>
 </section>
 
-<section class="section">
-    <div class="row row--wide">
-
-        <header class="section-header">
-            <h1 class="section-title">What others are saying</h1>
-        </header>
-
-        {% include testimonials.html %}
-
-    </div>
-</section>
+{% include section-testimonials.html  %}
 
 <section class="section section-whitepaper background--photo">
     <div class="row">