Optimize logo-line animation

layout/_partials/header/brand.njk

@@ -15,9 +15,9 @@
     {%- endif %}
 
     <a href="{{ config.root }}" class="brand" rel="start">
-      <span class="logo-line-before"><i></i></span>
+      <i class="logo-line-before"></i>
       <h1 class="site-title">{{ title }}</h1>
-      <span class="logo-line-after"><i></i></span>
+      <i class="logo-line-after"></i>
     </a>
     {%- if subtitle %}
       <p class="site-subtitle" itemprop="description">{{ subtitle }}</p>

layout/_scripts/noscript.njk

@@ -16,8 +16,9 @@
     top: initial;
   }
 
-  .use-motion .logo-line-before i { left: initial; }
-  .use-motion .logo-line-after i { right: initial; }
+  .use-motion .logo-line-before, .use-motion .logo-line-after {
+    transform: scaleX(1);
+  }
 
   .search-pop-overlay, .sidebar-nav { display: none; }
   .sidebar-panel { display: block; }

source/css/_schemes/Mist/_header.styl

@@ -32,30 +32,26 @@
 }
 
 .logo-line-before, .logo-line-after {
+  background: var(--brand-color);
   display: block;
+  height: 2px;
   margin: 0 auto;
-  overflow: hidden;
   width: 75%;
 
   +mobile() {
     display: none;
   }
-
-  i {
-    background: var(--brand-color);
-    display: block;
-    height: 2px;
-    position: relative;
-  }
 }
 
 .use-motion {
-  .logo-line-before i {
-    left: -100%;
+  .logo-line-before {
+    transform-origin: left;
+    transform: scaleX(0);
   }
 
-  .logo-line-after i {
-    right: -100%;
+  .logo-line-after {
+    transform-origin: right;
+    transform: scaleX(0);
   }
 }
 

source/css/_schemes/Pisces/_sidebar.styl

@@ -1,4 +1,5 @@
 .sidebar {
+  background: initial;
   bottom: initial;
   box-shadow: none;
   margin-top: $sidebar-offset;

source/js/motion.js

@@ -33,8 +33,8 @@ NexT.motion.middleWares = {
     const image = document.querySelector('.custom-logo-image');
     const title = document.querySelector('.site-title');
     const subtitle = document.querySelector('.site-subtitle');
-    const logoLineTop = document.querySelector('.logo-line-before i');
-    const logoLineBottom = document.querySelector('.logo-line-after i');
+    const logoLineTop = document.querySelector('.logo-line-before');
+    const logoLineBottom = document.querySelector('.logo-line-after');
 
     brand && sequence.push({
       e: brand,
@@ -42,10 +42,11 @@ NexT.motion.middleWares = {
       o: {duration: 200}
     });
 
-    function getMistLineSettings(element, translateX) {
+    function getMistLineSettings(element) {
+      Velocity.hook(element, 'scaleX', 0);
       return {
         e: element,
-        p: {translateX},
+        p: {scaleX: 1},
         o: {
           duration     : 500,
           sequenceQueue: false
@@ -63,8 +64,8 @@ NexT.motion.middleWares = {
 
     CONFIG.scheme === 'Mist' && logoLineTop && logoLineBottom
     && sequence.push(
-      getMistLineSettings(logoLineTop, '100%'),
-      getMistLineSettings(logoLineBottom, '-100%')
+      getMistLineSettings(logoLineTop),
+      getMistLineSettings(logoLineBottom)
     );
 
     CONFIG.scheme === 'Muse' && image && pushImageToSequence();
@@ -165,11 +166,7 @@ NexT.motion.middleWares = {
     if (sidebarAffixTransition && (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini')) {
       Velocity(sidebarAffix, 'transition.' + sidebarAffixTransition, {
         display : null,
-        duration: 200,
-        complete: function() {
-          // After motion complete need to remove transform from sidebar to let affix work on Pisces | Gemini.
-          sidebarAffix.style.transform = 'initial';
-        }
+        duration: 200
       });
     }
     integrator.next();