From 2bda6dd128e56532d1f16704d7523b6c2e694215 Mon Sep 17 00:00:00 2001
From: Maciej Matuszewski <maciek.matuszewski@gmail.com>
Date: Mon, 15 Jan 2018 01:29:27 +0100
Subject: [PATCH] Reveal team section members when scrolled into view

---
 package-lock.json                       | 15 +++++++++++++++
 package.json                            |  1 +
 src/hbs/partials/components/profile.hbs |  6 ++++--
 src/scripts/main.js                     |  2 ++
 src/scripts/reveal.js                   | 20 ++++++++++++++++++++
 src/styles/components/_profile.scss     | 16 ++++++++++++++++
 6 files changed, 58 insertions(+), 2 deletions(-)
 create mode 100644 src/scripts/reveal.js

diff --git a/package-lock.json b/package-lock.json
index 02ffc95..7819958 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8857,6 +8857,21 @@
       "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=",
       "dev": true
     },
+    "in-view": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/in-view/-/in-view-0.6.1.tgz",
+      "integrity": "sha1-+fmbXVpv4BNZ2eGcVwMCoxIbr0I=",
+      "requires": {
+        "lodash": "4.17.4"
+      },
+      "dependencies": {
+        "lodash": {
+          "version": "4.17.4",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
+          "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4="
+        }
+      }
+    },
     "indent-string": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
diff --git a/package.json b/package.json
index b499b76..6f1d994 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
   },
   "dependencies": {
     "gumshoe": "github:cferdinandi/gumshoe",
+    "in-view": "^0.6.1",
     "rellax": "^1.4.0",
     "sanitize.css": "^4.1.0",
     "smooth-scroll": "^12.1.5",
diff --git a/src/hbs/partials/components/profile.hbs b/src/hbs/partials/components/profile.hbs
index 74ec0da..0a80f21 100644
--- a/src/hbs/partials/components/profile.hbs
+++ b/src/hbs/partials/components/profile.hbs
@@ -1,7 +1,9 @@
 <div class="profile {{ class }}">
   <div class="profile__container">
-    <figure class="profile__image-wrapper">
-      <div class="profile__image" style="background-image: url('{{ profile.image }}')"></div>
+    <figure class="profile__image-wrapper js-profile">
+      <div class="profile__image" style="background-image: url('{{ profile.image }}')">
+        <div class="profile__cover"></div>
+      </div>
     </figure>
 
     <div class="profile__detail profile__detail--index-{{ index }}">
diff --git a/src/scripts/main.js b/src/scripts/main.js
index 0bea70a..ba0606e 100644
--- a/src/scripts/main.js
+++ b/src/scripts/main.js
@@ -3,9 +3,11 @@ import 'vanilla-tilt';
 import nav from './nav';
 import scroll from './scroll';
 import parallax from './parallax';
+import reveal from './reveal';
 
 document.addEventListener('DOMContentLoaded', () => {
   nav();
   scroll();
   parallax();
+  reveal();
 });
diff --git a/src/scripts/reveal.js b/src/scripts/reveal.js
new file mode 100644
index 0000000..82cfd6f
--- /dev/null
+++ b/src/scripts/reveal.js
@@ -0,0 +1,20 @@
+/* eslint-disable class-methods-use-this */
+import inView from 'in-view';
+
+const ACTIVE_CLASS = 'active';
+
+class Reveal {
+  init() {
+    this.revealProfiles();
+  }
+
+  revealProfiles() {
+    inView.offset(200);
+    inView('.js-profile')
+      .on('enter', el => el.classList.add(ACTIVE_CLASS));
+  }
+}
+
+export default function init() {
+  return new Reveal().init();
+}
diff --git a/src/styles/components/_profile.scss b/src/styles/components/_profile.scss
index 1935ae3..d1c80ae 100644
--- a/src/styles/components/_profile.scss
+++ b/src/styles/components/_profile.scss
@@ -6,6 +6,21 @@
     }
   }
 
+  &__cover {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: $color-navy;
+    transform-origin: left center;
+    transition: transform .7s $ease-out-quint;
+
+    .active & {
+      transform: scaleX(0);
+    }
+  }
+
   &__image-wrapper {
     display: flex;
     align-items: center;
@@ -15,6 +30,7 @@
   }
 
   &__image {
+    position: relative;
     width: 100%;
     height: 100%;
     padding-bottom: 114%;