Merge pull request #13 from wswidzinski/menu-animation

Menu animation

package-lock.json

@@ -13494,6 +13494,11 @@
       "integrity": "sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU=",
       "dev": true
     },
+    "smooth-scroll": {
+      "version": "12.1.5",
+      "resolved": "https://registry.npmjs.org/smooth-scroll/-/smooth-scroll-12.1.5.tgz",
+      "integrity": "sha1-ttjeyjcant1eo60pHvD7fnQe1B4="
+    },
     "snapdragon": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.1.tgz",

package.json

@@ -64,6 +64,7 @@
   },
   "dependencies": {
     "sanitize.css": "^4.1.0",
+    "smooth-scroll": "^12.1.5",
     "vanilla-tilt": "^1.4.1"
   }
 }

src/hbs/index.hbs

@@ -2,6 +2,7 @@
 title: 'Home'
 
 hero:
+  id: 'hero'
   header:
     upper: '#Art'
     lower: 'Project.'
@@ -14,10 +15,13 @@ hero:
   button:
     label: 'Telegram Community'
     icon: 'images/telegram-logo.svg'
-  nextSectionLink: 'Scroll Down'
+  nextSectionLink:
+    text: 'Scroll Down'
+    link: '#introduction'
   counterText: '01 - 06'
 
 introduction:
+  id: 'introduction'
   header: 'Introduction —'
   subheader: '<a class="underline" href="https://truebit.io" rel="noopener" target="_blank">TrueBit</a>, in collaboration with artist <a class="underline" href="http://www.jessicaangelarts.com" rel="noopener" target="_blank">Jessica Angel</a>, are creating an open source, massive public art installation connected to the blockchain in real time.'
   content:
@@ -25,10 +29,13 @@ introduction:
     - 'We are facing exciting times in the history of humanity, and this project will pay tribute to the greatness of this technology, while proposing a holistic approach to knowledge; where music, art, education, economics, mathematics and philosophy take place under the same roof.'
   button:
     label: 'Signup for newsletter'
-  nextSectionLink: 'Learn more about the project ↓'
+  nextSectionLink:
+    text: 'Learn more about the project ↓'
+    link: '#project'
   counterText: '02 - 06'
 
 project:
+  id: 'project'
   header: 'Project —'
   subheader: 'This first art project proposes the visualization and experience of immersion inside the “dogetherium bridge”, an endeavour that TrueBit is undertaking to create a “bridge" between the Dogecoin and Ethereum blockchains.'
   content:
@@ -45,9 +52,12 @@ project:
     icon: 'images/file.svg'
 
   counterText: '03 - 06'
-  nextSectionLink: 'Learn more about the structure ↓'
+  nextSectionLink:
+    text: 'Learn more about the structure ↓'
+    link: '#structure'
 
 structure:
+  id: 'structure'
   header: 'Structure —'
   button:
     label: 'Floor / Elevation Plans'
@@ -58,10 +68,13 @@ structure:
       - 'The Mobius strip leads to the construction of a very interesting solid called the Klein Bottle. Imagine connecting the sides of a paper ring to come up with a donut shape. Similarly, imagine connecting the sides of a Mobius strip, you would end up with a Klein bottle.'
     lower:
       - 'The Klein bottle shares the same characteristics as the Mobius strip of having a unified surface. In addition, the Klein bottle provides an enclosed environment perfect for the development of a public programming schedule to take place inside of it. Hence, The public art structure will be a penetrable Klein bottle that symbolizes the bridge between the Dogecoin and Ethereum blockchains, connecting the outer side with the inner surface through the bottleneck pass way.'
-  nextSectionLink: 'Learn more about the team ↓'
+  nextSectionLink:
+    text: 'Learn more about the team ↓'
+    link: '#team'
   counterText: '04 - 06'
 
 team:
+  id: 'team'
   header: 'Team -'
   quote:
     text: '"Everything I do is some kind of modified borrowing from others who have been close to me either actually or virtually, and the virtual influences are amongst the most profound"'
@@ -88,10 +101,13 @@ team:
       name: 'Aqeel Mohammad'
       image: ''
 
-  nextSectionLink: 'Learn more about getting involved ↓'
+  nextSectionLink:
+    text: 'Learn more about getting involved ↓'
+    link: '#get-involved'
   counter: '05 - 06'
 
 getInvolved:
+  id: 'get-involved'
   header: 'Get Involved —'
   description:
   - 'We are looking to hear about your ideas, skills and passions. This project is about fostering collaborations with creators, thinkers, burners, makers, and people excited about technology and art. Get involved by communicating with the team (<a href="mailto:artproject@truebit.com">artproject@truebit.io</a>), sharing your vision and affiliation to these ideas. Anything counts as long as there is passion, rigor and commitment!'
@@ -115,7 +131,9 @@ getInvolved:
       - 'Art DAO'
       - 'Network Topology'
       - 'Art and culture in the blockchain space'
-  nextSectionLink: 'Learn more about our process →'
+  nextSectionLink:
+    text: 'Learn more about our process →'
+    link: '#'
   counterText: '06 - 06'
 
 ---

src/hbs/partials/components/get-involved.hbs

@@ -1,4 +1,4 @@
-<section class="section get-involved">
+<section class="section get-involved" {{#if getInvolved.id}} id="{{getInvolved.id}}" {{/if}}>
   <div class="get-involved__container">
 
     {{> components/heading
@@ -43,7 +43,7 @@
 
     {{> components/next-section-link
       class="get-involved__link"
-      name=getInvolved.nextSectionLink
+      nextSection=getInvolved.nextSectionLink
     }}
 
   </div>

src/hbs/partials/components/header.hbs

@@ -1,11 +1,11 @@
-<header class="header">
+<header class="header js-scroll-header">
   <div class="header__container">
     <a class="header-logo" href="{{data.rootUrl}}" title="artproject">
       {{svg 'images/logo.svg'}}
       <span class="header-logo__subtitle">ART PROJECT</span>
     </a>
 
-    {{> components/nav parentRouteName=parentRouteName}}
+    {{> components/nav}}
 
     {{> components/burger-button class="header__btn"}}
   </div>

src/hbs/partials/components/hero.hbs

@@ -1,4 +1,4 @@
-<section class="section hero">
+<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>
@@ -25,9 +25,9 @@
       icon=(svg hero.button.icon width="24px" height="24px")
     }}
 
-    <a href="#" class="hero__scroll">
+    <a href="{{ hero.nextSectionLink.link }}" class="hero__scroll">
       {{svg 'images/arrow-down.svg' class="hero__scroll__icon"}}
-      <div class="hero__scroll__text">{{ hero.nextSectionLink }}</div>
+      <div class="hero__scroll__text">{{ hero.nextSectionLink.text }}</div>
     </a>
 
   </div>

src/hbs/partials/components/introduction.hbs

@@ -1,4 +1,4 @@
-<section class="section introduction">
+<section class="section introduction" {{#if introduction.id}} id="{{introduction.id}}" {{/if}}>
   <div class="introduction__container">
 
     {{> components/heading
@@ -37,7 +37,7 @@
 
       {{> components/next-section-link
         class="introduction__link"
-        name=introduction.nextSectionLink
+        nextSection=introduction.nextSectionLink
       }}
 
     </div>

src/hbs/partials/components/nav.hbs

@@ -2,7 +2,12 @@
   <ul class="nav__list js-nav-list">
     {{#each data.header.links as |link|}}
       <li class="nav__item">
-        <a class="nav__link" href="{{link.url}}" {{#if link.inNewTab}}target="_blank" rel="noopener"{{/if}}>
+        <a
+          class="nav__link"
+          href="{{link.url}}"
+          data-title="{{link.title}}"
+          {{#if link.inNewTab}} target="_blank" rel="noopener"{{/if}}
+        >
           {{link.title}}
         </a>
       </li>

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

@@ -1,3 +1,3 @@
-<a href="{{ href }}" class="next-section-link {{class}}">
-  {{ name }}
+<a href="{{ nextSection.link }}" class="next-section-link {{class}}">
+  {{ nextSection.text }}
 </a>

src/hbs/partials/components/project.hbs

@@ -1,4 +1,4 @@
-<section class="section project">
+<section class="section project" {{#if project.id}} id="{{project.id}}" {{/if}}>
 
   <div class="project__container">
 
@@ -36,7 +36,7 @@
 
     {{> components/next-section-link
       class="project__link"
-      name=project.nextSectionLink
+      nextSection=project.nextSectionLink
     }}
 
   </div>

src/hbs/partials/components/structure.hbs

@@ -1,4 +1,4 @@
-<section class="section structure">
+<section class="section structure" {{#if structure.id}} id="{{structure.id}}" {{/if}}>
   <div class="structure__container">
     <div class="structure__content">
       {{> components/heading
@@ -36,7 +36,7 @@
 
       {{> components/next-section-link
         class="structure__link"
-        name=structure.nextSectionLink
+        nextSection=structure.nextSectionLink
       }}
     </div>
   </div>

src/hbs/partials/components/team.hbs

@@ -1,4 +1,4 @@
-<section class="section team">
+<section class="section team" {{#if team.id}} id="{{team.id}}" {{/if}}>
   <div class="team__container">
 
     {{> components/heading
@@ -30,7 +30,7 @@
 
     {{> components/next-section-link
       class="team__link"
-      name=team.nextSectionLink
+      nextSection=team.nextSectionLink
     }}
 
   </div>

src/scripts/main.js

@@ -1,7 +1,9 @@
 import 'babel-polyfill';
 import 'vanilla-tilt';
 import nav from './nav';
+import scroll from './scroll';
 
 document.addEventListener('DOMContentLoaded', () => {
   nav();
+  scroll();
 });

src/scripts/scroll.js

@@ -0,0 +1,47 @@
+import SmoothScroll from 'smooth-scroll';
+
+const LINKS_SELECTOR = 'a[href^="#"]';
+const SECTION_SELECTOR = '.section';
+const HEADER_SELECTOR = '.js-scroll-header';
+const ACTIVE_CLASS = 'active';
+
+function setActiveClassNames() {
+  const $links = document.querySelectorAll(LINKS_SELECTOR);
+  const currentHash = location.hash;
+
+  $links.forEach(($link) => {
+    if ($link.hash === currentHash) {
+      $link.classList.add(ACTIVE_CLASS);
+    } else {
+      $link.classList.remove(ACTIVE_CLASS);
+    }
+  });
+}
+
+// function listenForActiveSection() {
+//   const $sections = document.querySelectorAll(SECTION_SELECTOR);
+//   const $header = document.querySelector(HEADER_SELECTOR);
+
+//   document.addEventListener('scroll', () => {
+//     const scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
+//     const $sectionsArray = [...$sections];
+//     const $activeSections = $sectionsArray.filter(($section) => {
+//       return $section.offsetTop <= scrollPosition + $header.offsetHeight;
+//     });
+
+//     const $activeSection = $activeSections[$activeSections.length - 1];
+
+//     history.pushState(undefined, undefined, `#${$activeSection.id}`);
+//   });
+// }
+
+export default function init() {
+  // listenForActiveSection();
+
+  return new SmoothScroll(LINKS_SELECTOR, {
+    header: HEADER_SELECTOR,
+    speed: 500,
+    easing: 'easeInOutQuad',
+    before: setActiveClassNames
+  });
+}

src/styles/base/_colors.scss

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

src/styles/components/_nav.scss

@@ -1,4 +1,6 @@
 .nav {
+  $anim-size: 2px;
+
   height: 100%;
   margin-left: auto;
 
@@ -58,21 +60,37 @@
     white-space: nowrap;
   }
 
-  &__link::after {
+  &__link::after,
+  &__link::before {
     position: absolute;
-    bottom: 0;
+    top: 50%;
     left: 50%;
-    width: calc(100% + 20px);
-    height: 3px;
-    background-color: $color-white;
-    content: '';
-    transform: translate(-50%, 0) scaleX(0);
-    transition: transform $duration $ease-out-cubic;
+    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:hover::before,
+  &__link.active::before {
+    $transform-val: calc(-50% - #{$anim-size});
+
+    transform: translate($transform-val, $transform-val);
   }
 
   &__link:hover::after,
-  &__link.is-active::after {
-    transform: translate(-50%, 0) scaleX(1);
+  &__link.active::after {
+    $transform-val: calc(-50% + #{$anim-size});
+
+    transform: translate($transform-val, $transform-val);
   }
 
   &__item--sub-nav {

src/styles/components/_structure.scss

@@ -1,7 +1,7 @@
 .structure {
   display: flex;
   align-items: center;
-  margin-top: 10px;
+  padding-top: 10px;
   color: $color-scarlet;
   background-color: $color-white;
 
@@ -88,6 +88,6 @@
   }
 
   @media #{$screen-sm} {
-    margin-top: 30px;
+    padding-top: 30px;
   }
 }