From 2d416bb5a7f42330bd9a97aa8c284d33b954dff9 Mon Sep 17 00:00:00 2001
From: Maciej Matuszewski <maciek.matuszewski@gmail.com>
Date: Sun, 14 Jan 2018 18:34:07 +0100
Subject: [PATCH] Add 'scroll down' animation and hover

---
 src/hbs/partials/components/hero.hbs |  4 ++-
 src/styles/base/_mixins.scss         | 39 ++++++++++++++++++++++
 src/styles/base/_settings.scss       |  1 +
 src/styles/components/_hero.scss     | 10 ++++++
 src/styles/components/_nav.scss      | 49 +++++-----------------------
 src/styles/utils/_animations.scss    | 27 +++++++++++++++
 6 files changed, 88 insertions(+), 42 deletions(-)

diff --git a/src/hbs/partials/components/hero.hbs b/src/hbs/partials/components/hero.hbs
index 66e222d..cbe1792 100644
--- a/src/hbs/partials/components/hero.hbs
+++ b/src/hbs/partials/components/hero.hbs
@@ -37,7 +37,9 @@
     <a href="{{ hero.nextSectionLink.link }}" class="hero__scroll">
       <div class="js-parallax" data-rellax-speed="0.2">
         {{svg 'images/arrow-down.svg' class="hero__scroll__icon"}}
-        <div class="hero__scroll__text">{{ hero.nextSectionLink.text }}</div>
+        <div class="hero__scroll__text" data-title="{{ hero.nextSectionLink.text }}">
+          {{ hero.nextSectionLink.text }}
+        </div>
       </div>
     </a>
 
diff --git a/src/styles/base/_mixins.scss b/src/styles/base/_mixins.scss
index 520f0f1..c2926e5 100644
--- a/src/styles/base/_mixins.scss
+++ b/src/styles/base/_mixins.scss
@@ -3,3 +3,42 @@
   font-weight: 400;
   text-transform: uppercase;
 }
+
+/* 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);
+  }
+}
diff --git a/src/styles/base/_settings.scss b/src/styles/base/_settings.scss
index 125aab4..4b71d6f 100644
--- a/src/styles/base/_settings.scss
+++ b/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;
diff --git a/src/styles/components/_hero.scss b/src/styles/components/_hero.scss
index 2aad9e1..0090d7e 100644
--- a/src/styles/components/_hero.scss
+++ b/src/styles/components/_hero.scss
@@ -81,8 +81,18 @@ body {
     cursor: pointer;
 
     &__text {
+      @include hoverDistortion;
+
       margin-top: 15px;
     }
+
+    &__icon {
+      animation: scrollDown 3.5s infinite;
+    }
+
+    &:hover &__text {
+      @include hoverDistortionActive;
+    }
   }
 }
 
diff --git a/src/styles/components/_nav.scss b/src/styles/components/_nav.scss
index c9d7db6..e34e253 100644
--- a/src/styles/components/_nav.scss
+++ b/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);
-    }
   }
 }
diff --git a/src/styles/utils/_animations.scss b/src/styles/utils/_animations.scss
index 4515b4d..201e6f1 100644
--- a/src/styles/utils/_animations.scss
+++ b/src/styles/utils/_animations.scss
@@ -37,3 +37,30 @@
   transform-origin: 50% 50%;
   transition: transform $duration $easing 0s, visibility 0s $easing $duration;
 }
+
+// @keyframes hovering {
+
+// }
+
+@keyframes scrollDown {
+  0% {
+    transform: translateY(0);
+  }
+
+  10% {
+    transform: translateY(5px);
+  }
+
+  15% {
+    transform: translateY(2px);
+  }
+
+  25% {
+    transform: translateY(5px);
+  }
+
+  50%,
+  100% {
+    transform: translateY(0);
+  }
+}