Merge pull request #15 from wswidzinski/animations

Hero Animations

gulpfile.babel.js

@@ -125,6 +125,7 @@ gulp.task('hbs', () => {
           './src/hbs/helpers/repeat.js',
           './src/hbs/helpers/svg-icon.js',
           './src/hbs/helpers/new-line.js',
+          './src/hbs/helpers/ternary.js',
           './node_modules/handlebars-helpers/lib/fs.js',
           './node_modules/handlebars-helpers/lib/comparison.js',
           './node_modules/handlebars-helpers/lib/collection.js',

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",
@@ -12509,6 +12524,11 @@
         "isobject": "2.1.0"
       }
     },
+    "rellax": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/rellax/-/rellax-1.4.0.tgz",
+      "integrity": "sha1-wGJrwlkqxzBkeo+xyIjxw6yFb3E="
+    },
     "remarkable": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/remarkable/-/remarkable-1.7.1.tgz",

package.json

@@ -64,6 +64,8 @@
   },
   "dependencies": {
     "gumshoe": "github:cferdinandi/gumshoe",
+    "in-view": "^0.6.1",
+    "rellax": "^1.4.0",
     "sanitize.css": "^4.1.0",
     "smooth-scroll": "^12.1.5",
     "vanilla-tilt": "^1.4.1"

src/hbs/helpers/ternary.js

@@ -0,0 +1,7 @@
+'use strict';
+
+module.exports.register = function(Handlebars, options) {
+  Handlebars.registerHelper('ternary', function(test, yes, no) {
+    return (typeof test === 'function' ? test.call(this) : test) ? yes : no;
+  });
+};

src/hbs/index.hbs

@@ -43,9 +43,12 @@ project:
     - 'The art installation will be a traveling, penetrable sculpture that will provide an indoor and outdoor experience in the form of sounds, light and design. The surface of the installation will reflect the activity in the Doge-ETH bridge. The sculpture will be the space were creatives will realize their artistic vision.'
 
   images:
-    - 'images/project-img1.png'
-    - 'images/project-img2.png'
-    - 'images/project-img3.png'
+    - src: 'images/project-img1.png'
+      parallax: -0.2
+    - src: 'images/project-img2.png'
+      parallax: -0.3
+    - src: 'images/project-img3.png'
+      parallax: -0.1
 
   button:
     label: 'Project Proposal'
@@ -82,24 +85,48 @@ team:
   profiles:
     - name: 'Doge Doe'
       image: 'images/dog-profile.png'
+      parallax:
+        image: 1
+        description: 0.8
     - location: 'New York'
       name: 'Jessica Angel'
       image: 'images/jessica-profile.png'
+      parallax:
+        image: 1.2
+        description: 0.75
     - name: 'Jason Teutsch'
       image: 'images/jason-profile.png'
+      parallax:
+        image: 0.9
+        description: 0.9
     - location: 'Toronto'
       name: 'Robbie Bent'
       image: ''
+      parallax:
+        image: 0.9
+        description: 1.2
     - location: 'San Francisco'
       name: 'Sina Habibian'
       image: ''
+      parallax:
+        image: 1
+        description: 1.2
     - name: 'Emily Hunter'
       image: ''
-    - name: 'Jane Doe'
+      parallax:
+        image: 0.8
+        description: 0.7
+    - name: 'Andy Tudhope'
       image: ''
+      parallax:
+        image: 1
+        description: 1
     - location: 'Toronto'
       name: 'Aqeel Mohammad'
       image: ''
+      parallax:
+        image: 0.8
+        description: 0.9
 
   nextSectionLink:
     text: 'Learn more about getting involved ↓'

src/hbs/partials/components/button.hbs

@@ -1,6 +1,10 @@
 <{{#if href}}a href={{href}} rel="noopener" target="_blank"{{else}}button{{/if}}
   class="button {{ class }}"
-  style="
+>
+  <div
+    class="button__wrapper js-parallax"
+    data-rellax-speed="{{ternary rellax-speed rellax-speed 0}}"
+    style="
     {{#if outlineColor }}
       color: {{ outlineColor }};
     {{/if}}
@@ -8,11 +12,12 @@
       background-color: {{ backgroundColor }};
     {{/if}}
   "
->
-  {{#if icon}}
-    <div class="button__icon">
-      {{icon}}
-    </div>
-  {{/if}}
-  {{label}}
+  >
+    {{#if icon}}
+      <div class="button__icon">
+        {{icon}}
+      </div>
+    {{/if}}
+    {{label}}
+  </div>
 </{{#if href}}a{{else}}button{{/if}}>

src/hbs/partials/components/heading.hbs

@@ -1,3 +1,5 @@
 <h2 class="heading {{class}}">
-  {{text}}
+  <div class="js-parallax" data-rellax-speed="{{ternary rellax-speed rellax-speed 0}}">
+    {{text}}
+  </div>
 </h2>

src/hbs/partials/components/hero.hbs

@@ -1,14 +1,23 @@
 <section class="section hero" {{#if hero.id}} id="{{hero.id}}" {{/if}}>
   <div class="hero__canvas"></div>
-  <h1 class="hero__header">
-    <div class="hero__header--upper">{{ hero.header.upper }}</div>
-    <div class="hero__header--lower">{{ hero.header.lower }}</div>
-  </h1>
 
-  <div class="hero__counter">{{ hero.counterText }}</div>
+    <h1 class="hero__header">
+      <div class="js-parallax" data-rellax-speed="4">
+        <div class="hero__header--upper">{{ hero.header.upper }}</div>
+      </div>
+      <div class="js-parallax" data-rellax-speed="2">
+        <div class="hero__header--lower">{{ hero.header.lower }}</div>
+      </div>
+    </h1>
+
+  <div class="hero__counter">
+    <div class="js-parallax" data-rellax-speed="-0.5">
+      {{ hero.counterText }}
+    </div>
+  </div>
 
   <div class="hero__bottom">
-    <div class="hero__detail">
+    <div class="hero__detail js-parallax" data-rellax-speed="-0.2">
       <h3 class="hero__detail__title">{{ hero.eventsLabel }}</h3>
       {{#each hero.events as |event|}}
         <p class="hero__detail__event">
@@ -26,8 +35,12 @@
     }}
 
     <a href="{{ hero.nextSectionLink.link }}" class="hero__scroll">
-      {{svg 'images/arrow-down.svg' class="hero__scroll__icon"}}
-      <div class="hero__scroll__text">{{ hero.nextSectionLink.text }}</div>
+      <div class="js-parallax" data-rellax-speed="0.4">
+        {{svg 'images/arrow-down.svg' class="hero__scroll__icon"}}
+        <div class="hero__scroll__text" data-title="{{ hero.nextSectionLink.text }}">
+          {{ hero.nextSectionLink.text }}
+        </div>
+      </div>
     </a>
 
   </div>

src/hbs/partials/components/introduction.hbs

@@ -4,6 +4,7 @@
     {{> components/heading
       text=introduction.header
       class="introduction__header"
+      rellax-speed="0.7"
     }}
 
     <div class="introduction__img" data-tilt data-tilt-max="50" data-tilt-speed="400" data-tilt-perspective="400">
@@ -21,9 +22,11 @@
 
       <div class="introduction__content">
         <div class="introduction__paragraph text--small">
-          {{#each introduction.content as |paragraph|}}
-            <p>{{paragraph}}</p>
-          {{/each}}
+          <div class="js-parallax" data-rellax-speed="-0.1">
+            {{#each introduction.content as |paragraph|}}
+              <p>{{paragraph}}</p>
+            {{/each}}
+          </div>
         </div>
       </div>
 
@@ -32,6 +35,7 @@
           label=introduction.button.label
           outlineColor="#fff"
           backgroundColor="#000"
+          rellax-speed="0.5"
         }}
       </div>
 

src/hbs/partials/components/next-section-link.hbs

@@ -1,3 +1,8 @@
-<a href="{{ nextSection.link }}" class="next-section-link {{class}}">
-  {{ nextSection.text }}
+<a
+  href="{{ nextSection.link }}"
+  class="next-section-link {{class}}"
+>
+  <div class="next-section-link__wrapper" data-title="{{ nextSection.text }}">
+    {{ nextSection.text }}
+  </div>
 </a>

src/hbs/partials/components/profile.hbs

@@ -1,15 +1,22 @@
 <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-parallax js-profile"
+      data-rellax-speed="{{ternary profile.parallax.image profile.parallax.image 0}}"
+    >
+      <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 }}">
-      <h6 class="profile__location">
-        {{#if profile.location }} {{ profile.location }} {{else}} undisclosed {{/if}}
-      </h6>
+      <div class="js-parallax" data-rellax-speed="{{ternary profile.parallax.description profile.parallax.description 0}}">
+        <h6 class="profile__location">
+          {{#if profile.location }} {{ profile.location }} {{else}} undisclosed {{/if}}
+        </h6>
 
-      <h3 class="profile__name">{{new-line profile.name }}</h3>
+        <h3 class="profile__name">{{new-line profile.name }}</h3>
+      </div>
     </div>
   </div>
 </div>

src/hbs/partials/components/project.hbs

@@ -5,6 +5,7 @@
     {{> components/heading
       text=project.header
       class="project__header"
+      rellax-speed="-0.2"
     }}
 
     <div class="project__wrapper">
@@ -20,17 +21,22 @@
           backgroundColor="#ff5301"
           label=project.button.label
           href=project.button.href
+          rellax-speed="0.8"
           icon=(svg project.button.icon)
         }}
       </div>
 
       <div class="project__images">
-        {{#each project.images as |imageSrc|}}
-          <img src={{imageSrc}} class="project__image project__image--{{@index}}" alt="" />
+        {{#each project.images as |image|}}
+          <img
+            src={{image.src}}
+            class="project__image project__image--{{@index}} js-parallax"
+            alt=""
+            data-rellax-speed="{{ image.parallax }}"
+          />
         {{/each}}
       </div>
 
-
     </div>
 
     <div class="project__counter">{{ project.counterText }}</div>

src/hbs/partials/components/team.hbs

@@ -1,9 +1,14 @@
 <section class="section team" {{#if team.id}} id="{{team.id}}" {{/if}}>
-  <div class="team__container">
+  <div class="team__background">
+    <img class="team__background__image" src="images/gl-canvas-2.png" />
+  </div>
+
+  <div class="team__container js-parallax-scene">
 
     {{> components/heading
       text=team.header
       class="team__header"
+      rellax-speed="-0.5"
     }}
 
     <div class="team__quote">

src/scripts/main.js

@@ -2,8 +2,12 @@ import 'babel-polyfill';
 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/parallax.js

@@ -0,0 +1,13 @@
+import Rellax from 'rellax';
+
+const PARALLAX_CLASS = '.js-parallax';
+
+export default function init() {
+  return new Rellax(PARALLAX_CLASS, {
+    speed: -2,
+    center: false,
+    round: true,
+    vertical: true,
+    horizontal: false
+  });
+}

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/base/_colors.scss

@@ -11,6 +11,6 @@ $color-citron: #94ac20;
 $color-scampi: #694ac9;
 $color-corn: #e4c102;
 $color-red: #ef2f00;
-$color-blue: #3f0aff;
+$color-blue: #00b4ff;
 $color-turquoise: #6eccce;
 $color-tangerine: #e78d01;

src/styles/base/_core.scss

@@ -19,7 +19,7 @@ body {
   font-weight: 400;
   line-height: 1.33;
   color: $color-black;
-  background-color: $color-white;
+  background-color: $color-black;
 }
 
 *,

src/styles/base/_mixins.scss

@@ -3,3 +3,46 @@
   font-weight: 400;
   text-transform: uppercase;
 }
+
+@mixin disableTransform() {
+  transform: none !important;
+}
+
+/* element must have data-title property */
+@mixin hoverDistortion() {
+  position: relative;
+
+  &::before,
+  &::after {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: -1;
+    width: 100%;
+    content: attr(data-title);
+    transform: translate(-50%, -50%);
+    transition: transform .7s cubic-bezier(0, 1.54, .4, 1.7);
+  }
+
+  &::before {
+    color: $color-red;
+  }
+
+  &::after {
+    color: $color-blue;
+  }
+}
+
+@mixin hoverDistortionActive() {
+  &::before {
+    $transform-val: calc(-50% - #{$distort-anim-size});
+
+    transform: translate($transform-val, $transform-val);
+  }
+
+  &::after {
+    $transform-val: calc(-50% + #{$distort-anim-size});
+
+    transform: translate($transform-val, $transform-val);
+  }
+}

src/styles/base/_settings.scss

@@ -44,3 +44,4 @@ $title-font-family: 'Rubik Mono One', sans-serif;
 $duration: .2s;
 $header-height--mobile: 80px;
 $header-height--desktop: 95px;
+$distort-anim-size: 2px;

src/styles/components/_button.scss

@@ -1,15 +1,19 @@
 .button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
   width: 100%;
-  padding: 16px;
   font-family: 'Work Sans';
   font-size: 14px;
   font-weight: 600;
   color: white;
   text-transform: uppercase;
-  border: 2px solid currentColor;
+
+  &__wrapper {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: 16px;
+    border: 2px solid currentColor;
+  }
 
   &__icon {
     margin-right: 10px;
@@ -17,7 +21,10 @@
 
   @media #{$screen-sm} {
     width: initial;
-    padding: 25px;
     font-size: 16px;
+
+    &__wrapper {
+      padding: 25px;
+    }
   }
 }

src/styles/components/_footer.scss

@@ -4,6 +4,7 @@
   font-size: 12px;
   color: $color-gray;
   text-transform: uppercase;
+  background-color: $color-white;
 
   &__list {
     display: flex;

src/styles/components/_hero.scss

@@ -44,6 +44,7 @@ body {
     top: 25%;
     right: -20px;
     z-index: 1;
+    overflow: hidden;
     font-size: 24px;
     transform: rotate(-90deg);
   }
@@ -73,7 +74,7 @@ body {
   }
 
   &__scroll {
-    margin: 20px auto 0;
+    margin: 30px auto 0;
     font-size: 12px;
     font-weight: 700;
     text-align: center;
@@ -81,7 +82,17 @@ body {
     cursor: pointer;
 
     &__text {
-      margin-top: 15px;
+      @include hoverDistortion;
+
+      margin-top: 20px;
+    }
+
+    &__icon {
+      animation: scrollDown 3.5s infinite;
+    }
+
+    &:hover &__text {
+      @include hoverDistortionActive;
     }
   }
 }
@@ -152,6 +163,7 @@ body {
       top: 30%;
       right: initial;
       left: 70%;
+      overflow: initial;
       transform-origin: left center;
     }
 

src/styles/components/_introduction.scss

@@ -20,7 +20,9 @@
   }
 
   &__header {
+    position: relative;
     margin: 30px 0;
+    transform: translate(0, 40px);
 
     @media #{$screen-sm} {
       flex: 0 1 100%;
@@ -100,6 +102,14 @@
   &__button {
     margin-bottom: 30px;
 
+    @media #{$screen-only-xs},
+      #{$screen-only-sm},
+      #{$screen-only-md} {
+      .js-parallax {
+        @include disableTransform();
+      }
+    }
+
     @media #{$screen-xlg} {
       position: absolute;
       top: 65%;

src/styles/components/_nav.scss

@@ -46,6 +46,8 @@ $_anim-size: 2px;
   }
 
   &__link {
+    @include hoverDistortion();
+
     position: relative;
     display: flex;
     align-items: center;
@@ -60,35 +62,8 @@ $_anim-size: 2px;
     white-space: nowrap;
   }
 
-  &__link::after,
-  &__link::before {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    z-index: -1;
-    content: attr(data-title);
-    transform: translate(-50%, -50%);
-    transition: transform .7s cubic-bezier(0, 1.54, .4, 1.7);
-  }
-
-  &__link::before {
-    color: $color-red;
-  }
-
-  &__link::after {
-    color: $color-blue;
-  }
-
-  &__link.active::before {
-    $transform-val: calc(-50% - #{$_anim-size});
-
-    transform: translate($transform-val, $transform-val);
-  }
-
-  &__link.active::after {
-    $transform-val: calc(-50% + #{$_anim-size});
-
-    transform: translate($transform-val, $transform-val);
+  &__link.active {
+    @include hoverDistortionActive();
   }
 
   &__item--sub-nav {
@@ -130,21 +105,13 @@ $_anim-size: 2px;
       width: calc(100% - 20px);
     }
 
+    &__link:hover {
+      @include hoverDistortionActive();
+    }
+
     &__link {
       position: static;
       flex-direction: row;
     }
-
-    &__link:hover::before {
-      $transform-val: calc(-50% - #{$_anim-size});
-
-      transform: translate($transform-val, $transform-val);
-    }
-
-    &__link:hover::after {
-      $transform-val: calc(-50% + #{$_anim-size});
-
-      transform: translate($transform-val, $transform-val);
-    }
   }
 }

src/styles/components/_next-section-link.scss

@@ -4,4 +4,16 @@
   font-size: 13px;
   font-weight: 500;
   text-transform: uppercase;
+
+  &__wrapper {
+    @include hoverDistortion();
+
+    z-index: 1;
+
+    @media #{$screen-md} {
+      &:hover {
+        @include hoverDistortionActive();
+      }
+    }
+  }
 }

src/styles/components/_profile.scss

@@ -6,6 +6,27 @@
     }
   }
 
+  &__hovering {
+    @media #{$screen-md} {
+      // animation: hovering 8s infinite;
+    }
+  }
+
+  &__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 +36,7 @@
   }
 
   &__image {
+    position: relative;
     width: 100%;
     background-position: center center;
     background-size: cover;

src/styles/components/_project.scss

@@ -20,6 +20,12 @@
   }
 
   &__header {
+    @media #{$screen-only-xs}, #{$screen-only-sm} {
+      .js-parallax {
+        @include disableTransform();
+      }
+    }
+
     @media #{$screen-md} {
       position: absolute;
       bottom: 100px;
@@ -55,6 +61,7 @@
   }
 
   &__images {
+    position: relative;
     padding-top: 10px;
 
     @media #{$screen-sm} {
@@ -76,6 +83,10 @@
     width: 100%;
     margin: 10px 0;
 
+    @media #{$screen-only-xs}, #{$screen-only-sm} {
+      @include disableTransform();
+    }
+
     @media #{$screen-sm} {
       width: 80%;
       max-width: 250px;
@@ -105,6 +116,7 @@
 
       &--1 {
         position: relative;
+        z-index: 1;
         width: 60%;
         margin: 0;
         margin-top: -25%;
@@ -112,6 +124,7 @@
       }
 
       &--2 {
+        z-index: 3;
         width: 70%;
         margin: 0;
       }
@@ -121,11 +134,17 @@
   &__button {
     margin: 10px 0;
 
+    @media #{$screen-only-xs}, #{$screen-only-sm} {
+      .js-parallax {
+        @include disableTransform();
+      }
+    }
+
     @media #{$screen-md} {
       position: absolute;
       top: 50%;
       left: 15%;
-      z-index: 2;
+      z-index: 5;
     }
   }
 

src/styles/components/_team.scss

@@ -10,9 +10,28 @@
     $color-turquoise
   );
 
+  position: relative;
   padding: 20px 0;
+  overflow: hidden;
   color: $color-white;
-  background-color: $color-black;
+
+  &__background {
+    position: fixed;
+    top: 20%;
+    z-index: -1;
+
+    &__image {
+      max-width: 100%;
+    }
+
+    @media #{$screen-sm} {
+      left: 20%;
+
+      &__image {
+        max-width: 50%;
+      }
+    }
+  }
 
   &__container {
     @include container;
@@ -25,12 +44,18 @@
 
     @media #{$screen-md} {
       position: absolute;
-      top: 42%;
+      top: 27%;
       z-index: 1;
     }
 
     @media #{$screen-lg} {
-      top: 46%;
+      top: 31%;
+    }
+
+    @media #{$screen-only-xs}, #{$screen-only-sm} {
+      .js-parallax {
+        @include disableTransform();
+      }
     }
   }
 
@@ -97,6 +122,16 @@
       flex-flow: row wrap;
       justify-content: space-between;
     }
+
+    @media #{$screen-only-xs}, #{$screen-only-sm} {
+      .js-parallax {
+        @include disableTransform();
+      }
+    }
+
+    @media #{$screen-md} {
+      transform: translateY(300px);
+    }
   }
 
   &__profile {

src/styles/utils/_animations.scss

@@ -1,3 +1,5 @@
+$scroll-offset: 10px;
+
 @mixin fade-in($duration: .2s) {
   opacity: 1;
   visibility: visible;
@@ -37,3 +39,44 @@
   transform-origin: 50% 50%;
   transition: transform $duration $easing 0s, visibility 0s $easing $duration;
 }
+
+@keyframes scrollDown {
+  0% {
+    transform: translateY(0);
+  }
+
+  10% {
+    transform: translateY($scroll-offset);
+  }
+
+  15% {
+    transform: translateY(#{$scroll-offset - $scroll-offset / 2});
+  }
+
+  25% {
+    transform: translateY($scroll-offset);
+  }
+
+  50%,
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes hovering {
+  0% {
+    transform: translate(0, 0);
+  }
+
+  30% {
+    transform: translate(10px, 15px);
+  }
+
+  70% {
+    transform: translate(-12px, -7px);
+  }
+
+  100% {
+    transform: translate(0, 0);
+  }
+}