Reveal team section members when scrolled into view

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",

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",

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 }}">

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();
 });

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();
+}

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%;