Add 'scroll down' animation and hover

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>
 

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

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/_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;
+    }
   }
 }
 

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.active {
-  &__link::before {
+    @include hoverDistortionActive();
-    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);
   }
 
   &__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/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);
+  }
+}